O'Reilly logo

Data Visualization: Representing Information on Modern Web by Swizec Teller, Ændrew Rininsland, Simon Timms, Andy Kirk

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required