Data Visualization: Representing Information on Modern Web

Highlighting connections with chord

We've seen how many donations people have and when they got it, but there's another gem hiding in the data—connections. We can visualize who is donating to whom using the chord layout.

We're going to draw a chord diagram—a circular diagram of connections. Chord diagrams are often used in genetics and have even appeared on covers of magazines (http://circos.ca/intro/published_images/).

Ours is going to have an outer ring showing how much money is being donated and chords showing where that money is going.

First, we need a matrix of connections for the chord diagram, and then we'll go the familiar route of path generators and adding elements. The matrix code will be useful later, so let's put it in helpers.js:

export ...