# The Chord Diagram

• Print

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 

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.

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