05

Sparklines

"A sparkline is a small, intense, word-sized graphic with typographic • resolution. Sparklines mean that graphics are no longer cartoonish special • occasions with captions and boxes, but rather sparkline graphics can be • everywhere a word or number can be." — Edward Tufte

What I see and like

A medical chart where each vital sign is a tiny line riding right inside the sentence — heart rate, then a flick of a curve, then the latest number in bold. The graphic lives in the text, at the speed of reading.

Word-sized graphics

A sparkline has no axes, no legend, no box. It sits in the line of type like a word, giving shape to a number that would otherwise be lonely.

   revenue  /\__/\/\___/\__  142   (last value labeled)
   latency  __/\____/\/\__/  ^ spike marked in red
   signups  ___..---''''''   trend reads as a single gesture

Intense, simple, word-sized

The design constraints are the point. Resolution comes from being small and dense, not large and loud.

ConstraintWhy
Word-sizedEmbeds in text, tables, dashboards
No chromeNo axes/box to steal attention
One seriesA single gesture the eye grasps at once
Mark the nowEndpoint value and extremes get a dot

Distributions, too

A close cousin shows spread instead of time — a strip of tick marks, the median called out. Same idea: a picture the width of a word.

   scores   | || ||||| |||| || |   .  (median marked with a dot)
            low <------------> high

Key takeaways

  • Sparklines put data wherever a word or number can go.
  • Strip all chrome; let smallness create resolution.
  • Always label the latest value and the extremes.

Checklist

  • [ ] The graphic fits on a line of text without a caption
  • [ ] No axes, box, or legend
  • [ ] Endpoint and extreme values are marked