Chord Diagram Chart — Free HTML CSS JS Snippet

A chord diagram arranges categories as arcs around a circle and draws a ribbon between every pair with a nonzero flow, where each ribbon's width represents the size of that flow. It is the standard way to visualize relationships or transfers between many entities at once — who sends what to whom — when a Sankey diagram's left-to-right layout doesn't fit because the flows are bidirectional or cyclic (any category can send to, and receive from, any other) rather than moving through discrete left-to-right stages.

Representing flows as an adjacency matrix

The data model is a square matrix where matrix[i][j] is the amount that flowed from group i to group j — here, work items handed off from one team to another. Unlike a Sankey diagram's stage-based node list, a matrix naturally allows matrix[i][j] and matrix[j][i] to both be nonzero and different (Frontend hands off 24 items to Backend, while Backend hands back only 10 in the other direction), which is exactly the kind of bidirectional relationship a chord diagram is built to show that a strictly directional layout cannot.

Sizing each group's arc proportionally to its total involvement

Each group's outer arc length is proportional to its groupTotals[i] — the sum of everything it sent out (rowTotals[i]) plus everything it received (colTotals[i]) — divided by the grandTotal across all groups, scaled to fill 2π radians minus small fixed gaps between arcs. A group involved in a lot of handoffs, in either direction, gets a visually larger arc than one with only a little total flow, giving an immediate at-a-glance sense of which categories are the busiest hubs.

Sub-dividing each arc into per-connection segments

Within a single group's arc span, the code further divides it into subSegments — one smaller segment per other group it exchanges with, sized proportionally to that specific flow amount relative to the group's own total. Outgoing flows are placed first around the arc, followed by incoming flows, so each group's arc reads, walking around it, as "here's how each of my outgoing flows breaks down, then here's how each of my incoming flows breaks down." These segment boundaries are exactly where each connecting ribbon attaches to the arc.

Drawing a ribbon between two arcs

For every unordered pair of groups with any nonzero flow in either direction, one ribbon is drawn as a single closed SVG path: two arcs along the inner radius (each following that pair's matching sub-segment boundaries computed above) connected by two quadratic Bézier curves (Q commands) that bow through the circle's center point. This is the classic chord-diagram ribbon shape — a band that appears to twist from one arc's edge to the other's, with its width at each end reflecting the actual flow size in that direction. The ribbon's fill color is taken from whichever of the two groups sent the larger amount, so at a glance the color hints at which direction dominates that pairwise relationship.

Hover-to-isolate interaction

Because a busy chord diagram can have many overlapping ribbons, hovering any arc or its matching legend entry calls setActive(idx), which checks every ribbon's stored data-a/data-b group indices and dims (opacity near zero) every ribbon not touching the hovered group while boosting the opacity of every ribbon that does — instantly isolating one category's full set of relationships out of an otherwise dense tangle of bands.