Small Multiples : Part 1 : Chord Multiples

In the spirit of small multiples; I thought I would do a multiple series of small blog articles covering the topic while enabling this capability within DexCharts and Dex.

A quick search in Google images on small multiples returns multiple images of small multiples in the wild.  The vast majority of small multiples are pie, line, area and horizon charts with occasional small map multiples.  I captured this screen shot from my browser; I’m poor so please don’t sue me!


The Value of Small Multiples

Small multiples are excellent for adding another dimension to a data view.  It does so in a way that does not typically overwhelm the human brain.  Our minds can easily isolate a single chart within an array of similar charts and spot trends which would be difficult to see in an animation or overlaid plot.

Put simply; small multiples provide insight, scale well and translate well onto paper and PowerPoint.

They also make for good eye-candy.

Chord Multiples

So I thought I’d start with something interesting.  A Chord Multiple.  Personally, I haven’t seen one elsewhere; much less a live d3js enabled version (thank you again and again Mike Bostock!).

I love the Chord diagram for depicting inter-connections.  They are pretty and pretty interesting.  So I thought, why not try this visual out as a small multiple and wire the basic capability into Dex?

Football and Politics


Let’s analyze the familiar presidential dataset we’ve become familiar with in previous blog entries.

The Dex Workflow


Basically, the Dex workflow:

  1. Reads in our CSV containing our presidential data.
  2. Trims whitespace from the beginning and end of each cell.
  3. Selects the columns we care about through the TMI (Too Much Information) script.
  4. Displays the data as a grid (see the image below to get an idea what the data looks like).
  5. Injects the data into a template and renders it within the cobrowser.

A peek at the data reveals our same old and tired presidential dataset that I have written about so many times before.  I do this on purpose, I want to focus on the aspects of the visualization rather than aspects of the data.  This is kind of the opposite of how you will normally approach visualizations.

The below grid visualization allows you to explore the data in tabular format.  It will be a new feature in Dex 0.7 and allows you to easily search, filter, sort and generally explore tabular data.

Click on this image to view a live version.


When rendered we see:

Click on this image to view a live version.


Each historical political party is depicted in it’s own chord diagram with a label at the center.  All of this stuff can be controlled; from font size, color, rotation to opacity of chords and ticks.

At a glance I can see a few things.

  1. There have been 9 political parties in American history according to our dataset.
  2. Four parties seem to dominate; Democratic, Republican followed by Democratic-Republican and the Whig party.
  3. A large proportion of republicans are from Ohio.
  4. The democratic party is spread out a bit more across states.

Overall, I was pleasantly surprised to see that this was a successful visualization.


I love American Football.  My team is the Florida Gators.  I wish the best for Dominque Easley and Jeff Driskel who suffered season ending injuries.  That has nothing to do with small multiples.  It just had to be said.

Now lets look at another dataset which covers football for the 2012 season.

Click on this image to view a live version.


Of this data, let’s focus on who a college played and whether the game was played at home, away or at a neutral site.

After having filtered only the fields we want to see in the order we want to see them, we have:

Click on this image to view a live version.


The data for our analysis consists of 1,572 rows of 3 columns.  This is just over 4,500 items of data.  This isn’t huge, but is still a hefty chunk for our minds to digest at a glance.

Here is the result:

Click on this image to view a live version.


Here is a zoomed in image:


Wrapping Up…

There are so many things we can do from here such as wire them up to interact with one another.  Make them prettier, fancier, overlaid, etc…  My mind literally races.  But, that’s it for today…

On deck in part 2 I will be creating and covering dendrogram multiples:


Until later…


About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s