Sankey flow diagram
Show flows between nodes laid out in columns — sources on the left, sinks on the right, intermediate nodes in between. Ribbon thickness encodes flow magnitude. Useful for conversion funnels, budget allocation, energy flow, attribution.
The demo plots the NASA astronaut career flow, Groups 1–3 (Mercury / Gemini / Apollo eras). ~30 astronauts; sources on the left are the service branches they came from (USAF, Navy / USMC); the middle column groups them by training cohort (Mercury or Gemini); the right shows the ultimate Apollo outcome (Walked on Moon vs Did not). Twelve astronauts ultimately walked on the Moon — the right-hand ribbon converging into that node is the visible bottom-line of the whole program.
Source: NASA Astronaut Group 1 — Wikipedia
Public surface
use wisp_chart::topology::{Sankey, SankeyLink, SankeyNode};
let nodes = vec![
SankeyNode::new("Organic", /* column */ 0, blue),
SankeyNode::new("Paid", 0, orange),
SankeyNode::new("Signed Up", 1, green),
SankeyNode::new("Trial", 1, pink),
SankeyNode::new("Converted", 2, sky),
SankeyNode::new("Lost", 2, gold),
];
let links = vec![
SankeyLink::new(0, 2, 40.0, grey),
SankeyLink::new(0, 3, 25.0, grey),
// ...
];
let s = Sankey::new(nodes, links);
let g = s.emit_graphics(&theme, viewport);
v1 uses a column-based layout: every node names its column explicitly, link Y-positions stack within each column in declaration order, and ribbon ribbons are drawn as convex quads (not Bezier curves). Quads are visually noisier than Beziers at crossings but are deterministic, cheap, and easy to test — appropriate for v1.
- Conversion / funnel narratives where you also want to show the lost flow at each step.
- Budget allocation between fixed buckets.
- "Where does this come from / where does it go" — anything with a clear flow direction.
For a strictly-stepped conversion without crossings, funnel is the simpler shape.