Communicating changes in rank over time: bumps charts and slopegraphs

The demonstration discussed in this post can be found here.


In my previous blog post I wrote about how anybody can manipulate carbon dioxide emissions data in order to find a way of saying somebody else is more to blame and should act first. The data was presented in the form of a table graphic ranking countries of the G-20 according to three different emissions measurements. “Bonus material” included an R Shiny app (mobile version) that allows the user to see the table at different points in time. However, this doesn’t really provide a clear picture of how rankings changed with time for any particular ranking scheme. Displaying this information more effectively is the subject of this post.

The solutions: bumps charts and slopegraphs

Not for the first time, inspiration for the final design came from reading Edward Tufte and an explanation of what slopegraphs and bumps charts are can be found on his website. I’ve used a slopegraph before when discussing alternatives to pairs of pie charts while the table graphic featured in my previous blog post could be considered a cross between a slopegraph and a parallel coordinates plot.

Bumps chart

Bumps charts are designed for exploring changes in rank over time. So how do the emissions per capita ranking look?

Base bumps chart

The above was created in R using the grid graphics system. The main issue is that the data covers nineteen countries over the course of half a century. To make matters more complex, the changes in rank are up to twelve places. I think there’s too much for any one person’s brain to disentangle. We could try using a distinct line type for every country but the results aren’t much better:

Bumps chart with unique line styles

However, with web pages we can add some simple interactions: clicking on labels to add (and remove) highlighting. Using the JavaScript library d3 this is fairly straightforward (full example code). After that we’re free to highlight and de-emphasise lines as wished. (Up to the full 19 lines can be highlighted but this effectively means no lines are highlighted.) With this addition changes for specific countries of interest can be made much clearer:

Bumps chart with the UK highlighted

Comparisons between pairs of countries are also easier:

Bumps chart with China and South Korea highlighted


I was fairly happy with the above solution and I think it does what it’s meant to do. However, shortly before I planned to upload this demonstration I had another idea for a little extra touch that would take advantage of the way SVG attributes work; specifically, it is straightforward to include some code that draws elements and then hide or reveal those elements. So in R I added slopegraphs as an overlay which gives you this mess:

Mess from combined bumps chart and slopegraph

Then I used d3 to hide the slopegraph (bringing the view back to that of the top image) and add a function to the chart. This function – which executes when the title is clicked – toggles which of the bumps chart and slopegraph is displayed. Here’s the latter:

Slope graph alternative to the original bumps chart

It should be noted that this additional feature is something of a bonus. Each bumps chart/slopegraph instance is designed primarily for use as a bumps chart. There is, for example, no particular need for the slopegraph to be quite so wide. The labelling of intermediate years is also unnecessary.

A final thought

The two figures below compare bumps chart and slopegraph with two countries – France and Saudi Arabia – highlighted.

Bumps chart with France and Saudi Arabia highlighted Slopegraph with France and Saudi Arabia highlighted

Both show reasonably clearly the ascent of Saudi Arabia as an emitter of carbon dioxide and the relative descent of France. What’s missing in the slopegraph is any sense of how this happened. By contrast the bumps chart shows us that the two nations swapped places as early as 1971 despite the fact that France’s descent through the rankings didn’t really kick in till 1980 (presumably in part due to the Messmer Plan). This highlights a limitation with a (two-point) slopegraph – it only shows the beginning and end points when, sometimes, the journey can be more interesting than the destination.


Fossil Fuel Emissions
CDIAC: Boden, TA, G Marland, and RJ Andres. 2013. Global, Regional, and National Fossil-Fuel CO2 Emissions. Carbon Dioxide Information Analysis Center (CDIAC), Oak Ridge National Laboratory, US Department of Energy, Oak Ridge, Tenn., USA doi:10.3334/CDIAC/00001_V2013

UN: United Nations Population Division – World Population Prospects: The 2012 Revision, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *