Home / Flow and Network / Sankey Diagram
Sankey Diagram in HTML, CSS and JavaScript
A Sankey diagram shows how an amount flows from one set of steps to the next. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows website visitors from source to landing page to outcome.
What is a sankey diagram?
A Sankey diagram shows how an amount flows from one set of steps to the next. Blocks stand for steps, and the bands between them get wider the more of the amount takes that path.
It is the best chart for questions like: where did our visitors come from, which page did they land on, and what did they do next? The widest bands show the most common paths at a glance.
At a glance
- Best for
- Flows through two or more stages
- Data you need
- A list of from, to and amount
- Skip it when
- Flows that loop back to an earlier step.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a sankey diagram
- Website visitor paths
- Energy or money flows in a system
- Budgets from income to spending
- Materials from source to product
When to pick another chart
- Funnel Chart: everyone follows the same single path
- Alluvial Diagram: your stages are points in time
- Chord Diagram: flows go both ways between the same groups
What you get in this template
- A Sankey layout written in about 25 lines of JavaScript
- Bands colored by where visitors came from
- Hover a block to highlight every band that passes through it
- Hover a band to see the number and its share
- Labels with a soft outline so they stay readable over bands
- A data table with every flow
How the code works
Here is a short version of the idea behind this sankey diagram. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const flows = [['Search', 'Home', 1800], ['Search', 'Blog', 1500], ['Social', 'Home', 900]];
const left = { Search: [20, 200], Social: [240, 60] }; // y and height of each block
const right = { Home: [40, 160], Blog: [220, 90] };
const used = {}, filled = {};
const scale = 0.06;
flows.forEach(([from, to, n]) => {
const w = n * scale;
const y1 = left[from][0] + (used[from] || 0), y2 = right[to][0] + (filled[to] || 0);
used[from] = (used[from] || 0) + w; filled[to] = (filled[to] || 0) + w;
make('path', { d: 'M60,' + y1 + 'C300,' + y1 + ' 300,' + y2 + ' 540,' + y2 + 'L540,' + (y2 + w) + 'C300,' + (y2 + w) + ' 300,' + (y1 + w) + ' 60,' + (y1 + w) + 'Z', fill: '#4f5bd5', 'fill-opacity': 0.4 });
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called sankey-diagram.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a Sankey diagram used for?
It shows how an amount moves between stages, like visitors from traffic source to page to sign up, or energy from source to use. Band width shows the amount on each path.
How is a Sankey diagram different from a funnel chart?
A funnel shows one path where people drop out. A Sankey shows many paths that split and join, so you can see where each group ends up.
Where does the name Sankey come from?
It is named after Matthew Sankey, an Irish engineer who used this style in 1898 to show the energy use of a steam engine.
How do I make a Sankey diagram without a library?
Place the blocks in columns with heights that match their totals, then draw each flow as a curved band from the right edge of one block to the left edge of the next. This template does it in plain JavaScript.
More flow and network
052. Chord Diagram
Example: customers switching between five phone networks
053. Arc Diagram
Example: characters who share scenes in a novel
054. Network Graph
Example: who runs with whom in a running club
055. Alluvial Diagram
Example: customers changing plans over three years
056. Tree Diagram
Example: a garden centre website map with monthly visits
057. Dendrogram
Example: grocery items that shoppers buy together
058. Org Chart
Example: the team structure of a design studio
059. Flowchart
Example: how an online shop handles a return request