Chord diagram in d3.js

A few notes on chord

Chord diagram is probably one of the most difficult graph to build with d3. Here are a few reminders:

Everything relies on the d3.chord() function. This function takes as input a square matrix of flow. The output is an array of chords.
Each chord as a source and a target. For each group it gives info like the angle of start and end, the flow value, the node index,
It's important to understand that a chord diagram is composed by 2 elements: the links, and the nodes. Nodes are like a donut plot
The nodes are drawn using the arc() function. The links with the ribbon function().

Step by step

Most basic

The most basic chord diagram you can do in d3.js. Keeping only the core code.

Add ticks and tick labels

Same graphic as before, just adding tick and ticks labels

Control colors

You probably want to set a color for each group, and colors links according to their source / target. Here is how.

Best Blocks

Storytelling with Chord Diagram

Nadieh Bremer tells us about the switching behavior between phone brands through a chord diagram. A must see example of data story telling.