Sankey Flow
A two-stage flow visualizing how a population splits across categories - the data-viz workhorse.
A free, animated sankey flow you can read here or embed on any website, from Scrollchart.
A Sankey diagram tracks quantity as it flows through a series of stages or transformations. The width of each band is proportional to the quantity it carries: thicker bands move more, thinner bands move less. Total width is conserved at every stage so the eye can verify that nothing has been added or lost. The shape is named after Captain Matthew Henry Phineas Riall Sankey, an Irish engineer who used it in 1898 to visualize the energy efficiency of a steam engine.
Drop a Sankey in to show how a starting population (visitors, leads, study candidates, dollars) splits across categories at one or more decision points. The visual answers two questions at once: where most of the volume goes, and where the meaningful drop-offs happen. Width comparisons across non-adjacent bands are easier than reading numbers from a stacked bar.
- On the Thermal Efficiency of Steam Engines , Sankey, M. H. P. R. (1898) - the original publication that introduced the format
Start at the leftmost stage and follow the bands rightward. Each node (the vertical bar at a stage) shows a category; each band leaving a node shows a flow into a downstream category. Band thickness is the only visual encoding that carries quantity, so let your eye compare thicknesses rather than count anything.
A Sankey reads cleanest with 2 to 4 stages and fewer than 10 categories per stage. Beyond that, band crossings multiply and the visual collapses into noise. For deep multi-stage flows, prefer a series of two-stage Sankeys or switch to a parallel-sets layout.
Good for
- Data journalists visualizing decision flows
- Researchers building PRISMA selection diagrams
- Business writers showing funnel breakdowns
Source & accuracy
Configurable bands and labels; pass any flow values.
Frequently asked questions
- Where can I get a free animated "Sankey Flow" for my website?
- Scrollchart provides "Sankey Flow" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
- How do I embed a sankey flow in a blog post or article?
- Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.
Other statistics explainers
Bell Curve with “You Are Here”
The canonical normal distribution with a personal percentile marker that scrolls into place as the reader arrives.
Compound vs Linear Returns
Two curves over 30 years - the compounding investor pulling away from the linear saver, with milestone markers.
The Daily Cortisol Curve
A 24-hour cortisol rhythm with a configurable stress spike and threshold band - clean, animated, and instantly legible.