Justin SJ Lee

Show Flows With The Chord Diagram

Screenshot

One interesting method of visualizing data I learned about during my co-op term is with the chord diagram. I found this graph to be very useful in displaying flows between multiple groups in a concise manner. You can view the interactive graph here.

Note: The numbers from the examples are made up for the sake of the example.

Interperting the diagram

Screenshot

The chords in the graph show the inter-relationships between the groups. In our case, the data is based on the movement of customers accross Canadian telecommunications companies at the time of a device upgrade.

Screenshot

Hovering over the arc of a brand gives information about the share of the customer base before the upgrade. Rogers’ arc shows that 33% of customers had Roger’s as their service provider at the time of the upgrade.

Screenshot

Hovering over an arc gives information about the relationship between the two brands. The width of the arc corresponds to the magnitude of the flow.

Screenshot

The color of the chord is determined by the net positive brand in the relationship. You can see how Rogers has a 3% gain in its chord with Bell, thus the chord is red.

Screenshot

The internal flow shows the percentage of customers staying at the same brand when upgrading their device.

How to & the data

The data is in a matrix as seen below. The row names represent the names of the brands pre-upgrade and the column names represent the brands post-upgrade. Naturally, the diagonal shows the customers upgrading without switching providers and the sum of the matrix is 100%.

From\To Rogers Bell Telus Other
Rogers 24% 2% 2% 5%
Bell 5% 23% 2% 2%
Telus 3% 3% 18% 3%
Other 2% 3% 1% 2%

You can read the table as shown below.

Rogers → Rogers: 24%, Rogers → Bell: 2%, Rogers → Telus: 2%, Rogers → Other: 5%

The diagram is made with the chorddiag package in R. The package uses the Javascript visualization library D3.js and the htmlwidgets package. Here is the R script for creating the sample dataset and rendering the chord diagram.

# Install chorddiag package from github
devtools::install_github("mattflor/chorddiag")

# Load package
require(chorddiag)

# Create an example dataset 
telco_ex <- c(24, 2, 2, 5,
              5, 23, 2, 2,
              3, 3, 18, 3,
              2, 3, 1, 2) 

# Store the data as a matrix
telco_ex <- matrix(telco_ex,
            byrow = TRUE,
            nrow = 4, ncol = 4)

# Label rows and columns of matrix
arcs <- c("Rogers", "Bell", "Telus", "Other")
dimnames(telco_ex) <- list(from = arcs, to = arcs)

# Create a list of colors with HEX codes to match the brands.
# Bell: #0066a4, Rogers: #e1292f, Telus: #6cbf44, Other: #a6a6a6
groupColors <- c("#e1292f", "#0066a4", "#6cbf44", "#a6a6a6")

# Render chord diagram. 
chorddiag(telco_ex, 
          groupColors = groupColors, 
          groupnamePadding = 20, 
          showTicks = F,
          tooltipFontsize = 16,
          tooltipUnit = "%")

To export the diagram as a web page I’m using the Export function built into the Viewer tab in RStudio. Opening the resulting web page should give you this.

Notes & credits

Like the many other types of graphs, the chord diagram is just one tool for displaying the given data. There are various methods of visualizing 2-way flow, but I think the radial nature of this graph visualizes multiple relationships in a concise manner. Check out the sankey diagram for visualizing 1-way flow, specficially for multi-level flow.

Read more about the chorddiag R package by Matt Flor.

This article was inspired by Visual Cinnamon’s article on the chord diagram.

Special thanks to the folks at Clickinsight for encouraging me to try new things.