Home > Articles

The Chord Diagram

  • Print
  • + Share This

A chord diagram, also known as a radial network diagram, is a circular diagram with arcs (chords) that connect related points around a circle to show relationships among a group of entities. Barrett Clark demonstrates how to build a chord diagram through the process of creating a new app for flight departures.

This chapter is from the book

A chord diagram, also known as a radial network diagram, is a circular diagram with arcs (chords) that connect related points around a circle to show relationships among a group of entities. A chord diagram can be very visually appealing. It is one of my favorite data visualizations. I am very excited to walk through the creation of one with you. You can see an example of a chord diagram in Figure 6.1.

Figure 6.1

Figure 6.1 Example chord diagram.

The Matrix Is the Truth

In order to define the relations between all the points, the chord diagram requires the input data be in a special format called a square matrix. An example square matrix is provided in the D3 documentation (https://github.com/d3/d3/wiki/Chord-Layout):

[[11975,  5871, 8916, 2868],
 [ 1951, 10048, 2060, 6171],
 [ 8010, 16145, 8090, 8045],
 [ 1013,   990,  940, 6907]]

Each category (group) gets a row in the matrix. Each column index corresponds to a category in that index’s row. Each row shows the relationship of an entity to each entity in the list. Cell [0][3] gives us the relationship of the first entity to the fourth entity. If this data represented flight departures, then there are 2868 flights that departed from Airport 0 and arrived at Airport 3.

I will talk more about generating the matrix a little later in this chapter. First let’s have a look at the data and set up a new Rails app.

  • + Share This
  • 🔖 Save To Your Account