Sparkline refinements

Michael Buckley wrote to say that he was happy to see a sparkline used in the wild, but wished it hadn't been imprisoned in borders. Excellent observation. Here is Edward Tufte's side-by-side illustration showing what's wrong and right, for a set of small multiples:

And in fact, my first draft did omit borders. But when I included my word-sized graphic with running text, there was no indication of a baseline. This was the version I rejected:

Here, for example, is a sparkline showing monthly citations of LibraryLookup in del.icio.us since Jan 03: . I made this using Joe Gregorio's excellent sparkline service, by the way.

I wanted to show that while the data line flattens in places, it never touches the baseline. So I turned on a thin solid border, which as Michael rightly points out was overkill. This is the version I actually used:

Here, for example, is a sparkline showing monthly citations of LibraryLookup in del.icio.us since Jan 03: . I made this using Joe Gregorio's excellent sparkline service, by the way.

I should at least have muted the borders:

Here, for example, is a sparkline showing monthly citations of LibraryLookup in del.icio.us since Jan 03: . I made this using Joe Gregorio's excellent sparkline service, by the way.

But it's still overkill. Tufte is all about subtraction, and I'd forgotten (or never knew) that you can subtract individual borders with CSS. Here's a version with just two axes:

Here, for example, is a sparkline showing monthly citations of LibraryLookup in del.icio.us since Jan 03: . I made this using Joe Gregorio's excellent sparkline service, by the way.

More subtraction, the baseline only:

Here, for example, is a sparkline showing monthly citations of LibraryLookup in del.icio.us since Jan 03: . I made this using Joe Gregorio's excellent sparkline service, by the way.

Still more subtraction, a dotted baseline:

Here, for example, is a sparkline showing monthly citations of LibraryLookup in del.icio.us since Jan 03: . I made this using Joe Gregorio's excellent sparkline service, by the way.

That's better, I think.


Former URL: http://weblog.infoworld.com/udell/2006/03/18.html#a1408