Home / Flow and Network / Chord Diagram
Chord Diagram in HTML, CSS and JavaScript
A chord diagram arranges groups around a circle and joins them with ribbons. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows customers switching between five phone networks.
What is a chord diagram?
A chord diagram arranges groups around a circle and joins them with ribbons. Each ribbon shows the flow between two groups, and its width at each end shows how much went in that direction.
It is made for two way flows, like customers switching between phone networks or people moving between cities. You can see at once who gains, who loses and which pairs swap the most.
At a glance
- Best for
- Two way flows between a handful of groups
- Data you need
- A table of how much moved from each group to each other group
- Skip it when
- More than about 8 groups. It turns into a tangle.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a chord diagram
- Customers switching between brands
- People moving between cities or countries
- Trade between regions
- Messages or calls between teams
When to pick another chart
- Sankey Diagram: flows go one way through stages
- Heatmap: you want a grid that is easier to read exactly
What you get in this template
- Arcs sized by how many people left each network
- Ribbons drawn with SVG curves through the center
- Each ribbon colored by the network that won the bigger share
- Hover a network to highlight its ribbons and see its net gain
- Hover a ribbon to see the numbers in both directions
- A full from and to table
How the code works
Here is a short version of the idea behind this chord diagram. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const names = ['Nova', 'Beam', 'Pulse'];
const m = [[0, 12, 8], [18, 0, 6], [9, 10, 0]];
const cx = 200, cy = 160, r = 120;
const total = m.flat().reduce((a, b) => a + b, 0);
const pt = a => (cx + r * Math.sin(a)) + ',' + (cy - r * Math.cos(a));
let a = 0; const spans = [];
m.forEach((row, i) => { spans.push(row.map(v => { const s = [a, a + v / total * Math.PI * 2]; a = s[1]; return s; })); });
for (let i = 0; i < 3; i++) for (let j = i + 1; j < 3; j++) {
const [s, t] = [spans[i][j], spans[j][i]];
make('path', { fill: '#7c83ff', 'fill-opacity': 0.5, d: 'M' + pt(s[0]) + 'A' + r + ',' + r + ' 0 0 1 ' + pt(s[1]) + 'Q' + cx + ',' + cy + ' ' + pt(t[0]) + 'A' + r + ',' + r + ' 0 0 1 ' + pt(t[1]) + 'Q' + cx + ',' + cy + ' ' + pt(s[0]) + 'Z' });
}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 chord-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 chord diagram?
A chord diagram places groups around a circle and draws ribbons between them to show how much flows from each group to each other group.
How do you read a chord diagram?
Pick a group on the circle. Each ribbon leaving it goes to another group. The width of the ribbon at each end shows how much moved in that direction.
When is a chord diagram better than a Sankey diagram?
When flows go both ways between the same groups, like switching between networks. A Sankey is better when flows move forward through stages.
How many groups can a chord diagram show?
About 5 to 8. With more, ribbons get too thin and cross too often to follow.
More flow and network
051. Sankey Diagram
Example: website visitors from source to landing page to outcome
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