D3 in Depth covers version 6 of D3
Home About
Build a real-world, custom, interactive and beautiful data visualization from scratch using D3.
Over 50 online text-based lessons on D3, interaction, code architecture, state management, styling and more.
Visit course page

Chords

Chord diagrams visualise links (or flows) between a group of nodes, where each flow has a numeric value. For example, they can show migration flows between countries. (Personally I find them difficult to interpret!)

The data needs to be in the form of an n x n matrix (where n is the number of items):

var data = [
  [10, 20, 30],
  [40, 60, 80],
  [100, 200, 300]
];

The first row represents flows from the 1st item to the 1st, 2nd and 3rd items etc.

You create the layout using:

var chordGenerator = d3.chord();

and you configure it using .padAngle() (to set the angle between adjacent groups in radians), .sortGroups() (to specify the order of the groups), .sortSubgroups() (to sort within each group) and .sortChords() to determine the z order of the chords.

Apply the layout using:

var chords = chordGenerator(data);

which returns an array of chords. Each element of the array is an object with source and target properties. Each source and target has startAngle and endAngle properties which will define the shape of each chord.

We use the ribbon shape generator which converts the chord properties into path data (see the Shapes chapter for more information on shape generators).

var ribbonGenerator = d3.ribbon().radius(200);

d3.select('g')
  .selectAll('path')
  .data(chords)
  .join('path')
  .attr('d', ribbonGenerator)

Stay up to date with D3 related articles, tutorials and courses