The Chord Diagram
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
This chapter is from the book
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 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.