Sparklines

“Sparklines: Intense, Simple, Word-Sized Graphics”

If you’ve been reading this blog for sometime, you will know I’ve got a certain penchant for sparklines, a term coined by Edward Tufte and referred to in his book titled “Beautiful Evidence”

True sparklines are meant to be word-like graphics, such that they fit inline with the body of the text, however I’ve had difficulty implementing this with tools such as Excel or custom chart libraries like JFreeChart. The Google Chart API makes this relatively simple.

To that end, my choice of implementation is to present inline with a paragraph. Say for example I wanted to display the amount of jobs advertised over 4 months, then my version of a sparkline would look like this:
sparkline jobs

Sure, it’s pixelated, the colours are a little hard to differentiate, and the vertical axis is lacking a scale or unit of measurement. However this simple column chart does convey quite succinctly, when jobs are advertised, whether it is the start, middle of end of a month, and how many jobs are available per month.

So what makes a perfect sparkline? To be honest, I don’t ever think sparklines should be used as a supplement for detail. I believe sparklines are best used in situations where you want to convey a lot of data in a small space. They really should be thought of as triggers, not from which you conduct a detailed analysis, but something which triggers the thought to pursue more information in the first place.

Here’s another example recently used to show size of allocation failures on an IBM JVM heap.
allocfailures

Cool? Go get em: http://en.wikipedia.org/wiki/Sparkline

1 comment to Sparklines

  • Tim,

    I think the way to represent the information could be the reason of decision, thanks for share this way to represent information!!!

    Regards,

    Jose

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">