You are here

Packing lots of stuff into a tiny chart

The more observant among you may have noticed that some of the stories on our website now feature interactive charts. Like in our stories on the GDP flash estimatesOsim's recent share movements and the penny collapse of 2013.

Just a few years ago, stuff like these would have been prohibitively complicated to produce. What happened? First of all, data became a lot more accessible. Getting years of historical stock price data is ridiculously easy nowadays, for example. Web technology has also improved tremendously, and the past couple of years have really opened up a lot of new trails for data visualisation.

Thanks to some very talented colleagues, we can now produce these interactive line charts in very little time. From a design perspective, we've tried to keep the charts compact so that they don't get in the way of the story, but also packed whatever nifty features we could into that little box. You can see individual values when you hover over the chart, highlight individual lines to compare them, and see key events over the observation period. From a storytelling perspective, it's highly liberating to be able to share all of that information in such a small space.

This bit here is going to get a little technical, but I thought some people might appreciate it. A lot of the interactive charts on our website are now being created using a Javascript library called D3, which stands for data-driven documents. It's a clever engine that loads and works fast and is highly versatile when it comes to working with data. For example, to create a new line chart, we simply switch out a data file, tweak a little bit of code and we have a new graph to show (OK, it's a little more involved than that, but not by that much, honestly). Conceptually, it makes sense. Personally, it's just really nice to have a tool out there that gets data.