Don't Dismiss the GIF

You may associate animated GIFs with questionable website design from the mid-nineties or modern internet meme culture. In terms of data visualization, when comparing to an interactive JavaScript application it's easy to think of an animated GIF as being a vestigial organ of the world wide web. Beyond, perhaps, allowing the user to (re)start the animation (using a little JavaScript) the animated GIF is, essentially, inflexible. But in spite of the rise of a number of great JavaScript-based tools, I still think GIFs have a role to play in dataviz. Why? Primarily because you can use whatever build tools you like to create them (you can, of course, create animated GIFs from snapshots of your interactive visualizations) and they're easy to share.

Neither of these positives would be much use if GIFs couldn't display the desired information effectively. They are a poor choice for showcasing photographs due to using a limited palette of just 256 colors. But for most common visualizations - such as bar charts and line charts - this should be plenty. (Hopefully you don't use gradient backgrounds on such charts.)

The "animated" part of "animated GIF" presents an obvious opportunity for use in data visualization - showing changes over time. Obviously if we just wanted to show how a single variable changed with time we could use a time-series line chart. In other cases a connected scatter plot might be an appropriate static solution (as I discussed recently). But what about, say, bar charts and histograms? Below is one example, using population data from the World Bank.

For the most part we see the countries grow as we move through time. However, the Mexican population grows noticeably faster than the countries around it (in the chart) while the German population seems to increase and decrease in an unusual manner in the 70's and 80's and the Russian population starts to fall just before it reaches 150 million.

If you're been reading my previous articles this may all sound somewhat familiar. It's the exact same data as featured in An Introduction to Slopegraphs - Part 1. Here's one way that data was presented in that article:

I wouldn't say either graphic is necessarily better than the other. The latter option can obviously be printed fairly easily and you can browse it at your leisure. But the animated GIF has a much simpler, cleaner structure. There's also a direct link between temporal changes in the graphic and temporal changes in the data – we don't have to convert time into space. As is frequently the case, the most appropriate graphic depends on where the data is being published, who you expect to read it, and which aspects of the dataset you would like to emphasize.

While temporal changes are on obvious choice for GIF animation, it's not the only option. We could encode time in a spatial direction and change a categorical variable frame by frame. The example below essentially deconstructs the line chart above in to thirteen individual frames, one for each country.

This alternative doesn't really offer much. While the charts are less cluttered, it's no longer easy to compare curves for different countries. If there was more than one time series for each country or a lot more countries then cramming each curve into asingle graphic would no longer be an effective option. However, a small multiple layout (which I'll discuss in my next article) would probably be a more effective design.

But there are other possibilities. On several occasions I've used GIFs to show how sample size effects the shape of a distribution. (While increasing sample size is not strictly a temporal change it seems quite natural to think of a sample getting bigger with time.) For instance, the blue bars in the GIF below show what you might get (it's a randomly generated sample from the appropriate binomial distribution) from repeatedly tossing a coin ten times and counting the number of heads. The red points indicate the "true distribution" the data tends towards as the number of repeats or "trials" tends towards infinity. (The "true" mean for this distribution is 5 and the standard deviation 1.58.)

The visual change in the sample size is much greater when the sample size is small, so a linear increase in sample size from frame to frame is probably not the best option here. The example below uses the same data but with a quadratic change.

GIFs can even be used to highlight the limitations of a chart type. The GIF below illustrates the problem of overplotting.

You may think our inability to arbitrarily pause, rewind and fast-forward a GIF on a web page is something of a limitation. In some cases this is probably true. But this excellent talk from ProPublica journalist Lena Groeger (and the accompanying article) may help convince you that the endless unstoppable loop can be of great benefit in communication as well.

It's worth making clear here that I love the whole concept of native (i.e. JavaScript) interactive visualizations in the browser. Users of our content are no longer confined to reading our explanatory analysis of data, they can do their own exploratory analysis. But sometimes this can be a distraction from the flow of an article. Animated GIFs can add a third dimension to a data visualization without risking upsetting the narrative of the article in which it is embedded.

Download our JQuery/ HTML5 controls now and easily create your own high-performance data visualization dashboards!