This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.

The chord diagram visualises relationships between categorical entities as arcs around a circle, connected by ribbons whose thickness encodes the strength of each relationship. The form is reflexive — it shows flows in both directions, often between members of the same set (countries, departments, characters). It is the chart used for migration matrices, network flow visualisations, character interaction graphs, and any "who relates to whom and by how much" question.

The form's reputation is for being striking. The colourful ribbons crossing the centre look like a Renaissance illuminated manuscript. The risk is that the beauty outpaces the readability: chord diagrams with too many categories or weak relationships become decorative noise.

What it is

A chord diagram maps a set of categorical entities to arcs around a circle and the directed (or undirected) relationships between them to ribbons connecting those arcs. Each entity's arc length is proportional to its total flow — the sum of incoming and outgoing relationships. Each ribbon's thickness is proportional to the strength of the relationship between its two entities, and where flows are directed, the ribbon is wider at the end that sends more.

The hero chart above is a quarter of task referrals between six departments. Sales and Support have the longest arcs because they touch the most referrals; the thick blue–green ribbon between them is the busiest relationship in the company. Look at its two ends and it is not symmetric: it is wider on the Sales side, because Sales refers more to Support than Support refers back. Randomise the flows and the arcs re-size to their new totals while the ribbons re-thicken in place.

When to use it

Chord diagrams are the right choice when:

  • You have flows between members of one categorical set — country-to-country migration, department-to-department referrals, character-to-character interactions.
  • You have few enough entities (5–12) for the form to remain readable.
  • The reader's question is "who connects to whom, and by how much?"
  • The flows are non-trivially imbalanced — symmetric or uniform flows make the form decorative.
  • The chart is editorial or visualisation-focused, not operational.

When not to use it

  • Many entities. More than a dozen arcs around the circle and the ribbons crisscross into illegibility. Use a Sankey or matrix view.
  • Flows in only one direction. If the relationships are not naturally between members of one set (suppliers → customers, say), use a Sankey.
  • Very imbalanced data. A chord diagram with one dominant arc (one entity sending and receiving nearly all the flow) wastes the circular layout.
  • Audiences unfamiliar with the form. The visual conventions need explanation. For business audiences, a heatmap or stacked bar may be safer.

Design principles

Keep the cast small

Every extra entity adds an arc and, in a dense matrix, a ribbon to every other arc. Five entities give ten possible ribbons; twelve give sixty-six. The two figures below show what that does to the form.

Five states: every ribbon has room
Interstate moves between the five mainland states, thousands of people in a year. Ten ribbons, each one traceable from end to end. The Queensland–New South Wales ribbon is the fattest and visibly wider at the NSW end: more people go north than come back.
Twelve offices: sixty-six ribbons and no story
Staff transfers between twelve offices. Every office trades with every other, so the centre is a knot of translucent ribbons in which no single relationship can be followed. This is the point at which a matrix or a Sankey takes over.

Sort entities by total flow

The arc lengths are not arbitrary — they encode each entity's total participation. Sort the arcs clockwise from the largest, or arrange by domain meaning (alphabetical, geographic, hierarchical), and say which in the subtitle. An arbitrary order makes the reader hunt for the big players and scatters related ribbons around the ring.

Departments in alphabetical order
The hero's referrals with the departments arranged A to Z. The two biggest arcs, Sales and Support, land next to each other by accident on the left, and the busiest ribbon becomes a short hop that hides the size of the relationship.
Departments sorted by total flow, largest first
The same matrix with the arcs ordered by their totals, clockwise from twelve o'clock. The reader now gets the ranking for free — Support, Sales, Engineering, then the three smaller departments — and the major ribbons cross the centre where their thickness can be compared.

Read direction from the two ends

A ribbon is not a bar. Its width at each arc is the flow in that direction, so a ribbon that is fat at one end and thin at the other is showing an imbalance — the single most useful thing a chord diagram can show. Where the flows are naturally one-way, the shape becomes a wedge.

Escalations between support tiers: ribbons as wedges
Tickets escalated between three support tiers and engineering in a month. Almost everything flows upward — tier 1 to tier 2, tier 2 to tier 3 — so every ribbon is wide where it leaves and narrow where it returns. The shape is the story: the arrows are implied by the taper.

Use a quiet palette

Each entity gets a colour; the ribbon between two entities takes the source colour at one end and blends toward the target. With six entities you have six hues and many ribbons crossing — saturated palettes turn the chart into a quilt. The house palette is muted for this reason; the multiply blend where ribbons cross keeps both legible.

Annotate the dominant flows

In a chord diagram, the eye picks the thickest ribbons easily. Add labels for them — Sales → Support: 88 referrals — so the dominant flows are quantified, not just visible. Smaller flows can remain unlabelled and live in the tooltip: hover any arc on this page and the ribbons that do not touch it fade away.

Avoid in dashboards

Chord diagrams demand attention. They are editorial and exploratory; they do not belong in operational dashboards where rapid scanning matters. For dashboard contexts, a matrix or stacked bar is faster to read.

Anatomy

The composition of a chord diagram
An anatomical guide

A chord diagram's anatomy is the circular arrangement of arcs (with lengths proportional to totals) and ribbons connecting them (with widths at each end proportional to the directional flows). The form's reading task is visual estimation of relationships; precision belongs in tooltips or paired tables.

  • Sankey diagram — for flows between two or more distinct sets, not all-to-all within one set.
  • Network graph (force-directed) — for relationships when entities have no natural order.
  • Heatmap — the same matrix as a colour-coded grid; less aesthetic, more precise.
  • Arc diagram — relationships between linearly-arranged entities with arcs overhead.
  • Edge bundle — hierarchical version that groups edges by source / target hierarchy.

Reading list

  • Krzywinski, M. et al. (2009). Circos: An Information Aesthetic for Comparative Genomics. The form's modern origin.
  • Bostock, M., Ogievetsky, V. & Heer, J. (2011). D³: Data-Driven Documents. The library whose chord layout made the form ubiquitous on the web.
  • Tufte, E. (1990). Envisioning Information. On dense information designs and the role of aesthetic order.
  • Munzner, T. (2014). Visualization Analysis and Design. On the limits of node–link forms for dense matrices.