Sparklines

Monday, December 6th, 2004

Am quite inspired by some of [renowned design guru] Edward Tufte’s latest writings, namely a beautifully illustrated [preview] chapter called Sparklines: Intense, Simple, Word-Sized Graphics. The basic idea is that information is sometimes easier to absorb when it is compressed into a scale and density comparable with text, rather than spread out over a page with unnecessary borders, shadows etc. PHP has image handling extensions which make it fairly easy to generate such images on the fly, so I have started tinkering a bit [as have others].

The tiny graph charts the sizes of my last 100 posts, and is about as simple a sparkline as you can get. Although it doesn’t provide much in the way of quantitative information, it may be sufficient for certain types of data where patterns or general trends are more significant than the actual values.

Compare with the more traditional graphical presentation:

which dominates visually, taking up more than 35 times as much space on the page. Obviously those numbered axes are useful, but Tufte shows that with a few extra details a sparkline can often be quite a powerful conveyor of information.

In another home-made example, the following visually demonstrates [I hope] the strong correlation between post size and the interval between posts:

I like this one because it looks like a reflection, which seems appropriate in this case since it implies that the one data series is reflected in the other. Causation is not so easy to discern, but I suspect that it goes both ways, ie a long post is often left at the top of the page for a while, allowing it to be read properly before being bumped, whereas a long interval enables excessive rumination, which in turn may result in an extra long post.

__________

UPDATE - March 31, 2005: Click here for source code and a simple PHP demo allowing you to build your own sparklines. It’s nothing too fancy, but may be enough to get you tinkering…

feed

Leave a Comment