The joys and sorrows of concentric circle graphics

There are not many good examples of concentric circle graphics out there. La Nacion produced one last year about subway strikes, and The Guardian produced an interactive graphic on gay rights in the U.S. Both of these intrigued me because, in my day job, I produce endless variations of graphics dealing with 50-state data. And most of the time, when we look at 50-state data, we draw… you guessed it: maps. Or bar graphs showing quantity or line graphs showing changes and trends over time but no matter what we do, it involves data for the 50 states, most often over time. 50 states multiplied by several years is a lot of lines to draw, bars to fill and state maps to create. So I’ve been thinking about ways to tell the story in different formats–going beyond the map, so to speak. Last Wednesday, we created this concentric circle interactive. Here’s how we did it, and the process we took to decide on the format.

Stateline PCS jobs screenshot

One of the most onerous dimensions to 50-state data is the sheer physical size and length of the data. Our website used to allow for a content well of 500 pixels. Try shoving 50 state labels across 500 pixels and you’ll quickly see why it’s a challenge.

But even with all the real estate in the world, long, horizontal displays are also taxing on the user if there is a comparative aspect to the data. There is simply too much bouncing back and forth from the left to the right. Go long and you lose the comparative advantages of a horizontal layout because users with small screens must scroll vertically and can’t see the entire landscape at once. Of course, layering the data into different views as an interactive can solve that. But sometimes you want to show the data all at once. And for that, a static graphic can work well.

Understandably, a map is often the solution. But maps have their limitations too. There’s only so much that you can infer from a map. If your data consist of more than 4-5 gradations it can be tough to create the at-a-glance, concise overview for which a map is best suited.

And if there are no regional patterns discernible in your map, readers wind up staring at a jumble of color with only a legend to tie it all together.

Which brings me to concentric charts. They’re not pie charts (if you look up pie charts on wikipedia, you will see that there is a distant cousin to the pie chart called a “ring chart,” also known as a multi-level pie or a radial tree). These appear to be somewhat visually similar to concentric circle graphs but have a different use–they tend to show hierarchy in data–you might see these when your computer shows you how much disc space you have, for example.

Filelight disk usage graphic

This ring chart shows computer hard drive disk space

A concentric chart, on the other hand, can tell a different story altogether. In a recent post on La Nacion’s subway strike graphic, I mentioned how designer Florencia Abd manages to plot out a time across four nodes (year, month, day and time) as well as another variable–type of incident/strike. That’s a lot of ground to cover in a static graphic. Imagine doing it in other ways and I’m sure you’ll agree.

La Nacion Conflictos Bajo Tierra

Because a circle is, well, round, its shape lends itself quite well to a relationship-based approach. Not so much a pie-chart (where the user sees the parts in their physical relationship to the whole), but rather using the organic form of a circle to help the user more easily compare complex data. And if you add concentric circles, you take advantage of the hierarchy inherent to those circles to create layers–an intuitive way to order your data–perfect for showing levels or ratings where you use the inner and outer rings to denote the endpoints in a scale (e.g., one thing is stronger, larger or more intense on the outside than it is on the inside) or time, as the subway graphic above shows (the outer ring shows 5 a.m. and the inner ring shows 11 p.m.).

So, what does all this have to do with the U.S. map? As I mentioned, the strength of a map is to show geographic relationships in data. For example, southern states vote “red” (or conservative) in the U.S.; whereas a swath northeastern states might vote “blue” (progressive). For this, a map is helpful because regional differences tell the story and are easy to spot.

But the nice thing about concentric charts is that they, too, can show geography, or any groupings, for that matter. As the Guardian’s example shows, each “slice” of the concentric chart belongs to a state and groups of slices are regions. In the Guardian example, each ring (or level) of the chart denotes a particular right afforded to gay couples.

The Guardian gay rights in the US

My team took this in a different direction. We wanted to show states and regions as well. But we also wanted to show change over time, as well as intensity on a scale. So when the Bureau of Labor Statistics released its employment figures, we had a few choices. We needed to show how changes in employment have affected each state since the recession (from April, 2007 to April, 2012). Because the recession started in December, 2007, we wanted to show how employment looked in each state before the recession, during the recession and how (and which) states were pulling themselves out of the recession.

We could have created an interactive that showed how the same views above changed over time (presumably you’d see a pre-recession view showing states doing well, a recession view showing most states doing poorly, and post-recession years showing mixed results). The most valuable piece of this would be, of course, geographical patterns in the data, if they existed (how did the Rust Belt fare, or the East Coast, for example). You could overlay this with population or any other demographic data to tell an interesting story.

When we looked at the data, we saw that there were not very strong geographic patterns to show. So we decided to create a concentric chart. Why? Because we didn’t have geographic patterns, but we did have temporal patterns (most states did poorly during a particular period of time, which contrasted well with the mixed results that states showed as they were attempting to pull themselves out of the recession, at least in terms of their employment figures). And the fact that we used a circle meant that we didn’t have to create a very long or wide table or chart, and we could stray from the map approach.

We decided to make this a light interactive–by rolling your cursor over each state’s cell you can see a small bar graph showing change in employment over time. This worked for us because our goal wasn’t to show specific numbers (how much employment rose and fell in a particular state), but rather intensity and patterns over time.

The debate continues (check out the comments on Nathan Yau’s post on the Guardian graphic) on whether or not these concentric graphs are merely eye candy when a simple bar or line chart would do just as well. I would opine that, if used correctly, they work well. Let me know if you agree. Here’s a screenshot of our interactive, and you can view the live version here.

Stateline PCS jobs interactive