Sources on the left flow into destinations on the right. Width encodes volume.
A free, animated sankey (two stage) you can read here or embed on any website, from Scrollchart.
Sankey (Two Stage)
A two-stage Sankey diagram maps quantities flowing from a set of sources on the left to a set of destinations on the right. The width of each band is strictly proportional to the volume it represents, so the eye can judge relative magnitudes without reading axis labels. Bands that converge or diverge show where flows combine or split.
The format takes its name from Captain Matthew Henry Phineas Riall Sankey, whose 1898 steam-engine efficiency diagram used width-scaled arrows to show where energy was lost at each stage. The convention that "wider means more" has remained unchanged since that original publication.
Sankey's steam-engine efficiency diagram , Sankey, M. H. P. R. (1898) - Original presentation to the Institution of Civil Engineers, the first published use of width-scaled flow arrows.
Budget allocation: revenue sources on the left, spending categories on the right. The widths reveal which income streams fund which departments at a glance.
Energy accounting: primary energy inputs (coal, gas, renewables) flowing to end-use sectors (transport, heating, industry). Wide losses to heat or transmission stand out immediately.
Customer routing: traffic sources (search, social, direct) flowing to landing pages or product categories. Thin bands identify underperforming acquisition channels.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This sankey (two stage) is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
Sources to destinations with proportional flows
A two-stage Sankey diagram shows categories on the left (sources) flowing into categories on the right (destinations), with flow width proportional to volume or value. Each source-destination pair is a flow band; the height encodes how much of each source goes to each destination. The destinations are stacked vertically, so the total width on the right equals the total width on the left, conserving the overall quantity.
Applications and reading patterns
Two-stage Sankeys are used for student enrollment (major of entry vs major of graduation), budget allocation (spending category vs department), and energy flow (fuel sources vs end uses). To read a diagram: trace a source horizontally across; if its flow splits, multiple destinations receive it. If a destination's inflow comes from many sources, that destination is fed by a diverse set. The comparison of inflow and outflow widths at each node shows whether destinations are specialized (fed by few sources) or generalized (fed by many).
Embed this diagram
Add this animated sankey (two stage) to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated sankey (two stage) for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Sankey (Two Stage)" for my website?
Scrollchart provides "Sankey (Two Stage)" 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 (two stage) 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.