Sparklines: Word-Sized Graphics

According to Edward Tufte, professor, artist, and information designer, sparklines are intense, simple, word-sized graphics. Because Mr. Tufte invented sparklines, I won't argue the definition. I will, however, make an argument for more people, myself included, to implement these tiny information graphics.

Incorporating inline graphics in content allows readers to seamlessly gather information. Many financial sites link a company's name to another page for it's stock quote. Showing that information as a sparkline hardly takes up any space and save the user a click. For example...

Cisco (5-yr, Close: 19.55, High: 80.06, Low: 8.60) isn't doing too well this year.

This tiny graphic and text shows Cisco's performance over the past five years, while marking the five-year high, low, and last close. Even though, it's not explicitly stated, I can figure out that the red dot, corresponds to the red, low number. Since the entire sparkline's range represents five years, I also surmise, that this low point probably happened about two years ago.

I'm a huge NFL football fan, and the 2003 New England Patriots Season was a joy to watch. In this spark line we see the Pats won 17 games (lines pointing up), and only lost two (lines pointing down). Red lines are shutouts, when one of the teams didn't score any points. The first game of the year was a 31-0 loss at Buffalo, while the 16th game happened to be a 31-0 win to Buffalo. Home games are designated with a small horizontal line in the middle. That's how I knew that the first game was at Buffalo.

Though Tufte is credited with "inventing" the term, word-sized, in-line graphics are hardly a new idea.

Galileo Galilei was using them back in 1610, when he discovered Jupiter's moons:
And when Galileo published his findings on the rings of Saturn, did he write three pages of text, then references visuals in Appendix 2.05.C, on page 774? No, he simply drew little pictures inside his sentence:
Unfortunately, sometime between 1610 and 2005, it became standard to layout informational documents with the text and visuals separated. We tend to place all pictures, graphs, and informational tables at the end of documents, in the dreaded appendix, but it's much more usable to have inline supporting data.

As much as I enjoy the Patriots, the 2004 Red Sox playoff run was also pretty good. As you can see, they swept the the first three-game series. Then, after losing the next three games to the Yankees, they won eight in a row, including a shutout in the final game to win the world series.

Related Links

• Sparklines chapter from Edward Tufte's new book, Beautiful Evidence
• http://particletree.com/notebook/sparklines-roundup/
• http://intepid.com/2004-12-06/23.32/
• Implementing Sparklines
  • PHP Sparkline Library (requires GD extension)
  • Ultra-simple library for Ruby
  • Very interesting CSS implementation

There you have it. Now get to work, and start making more little pictures inside sentences :)