Tambin disponible en Espaol


The digital magazine of InfoVis.net

by Juan C. Dürsteler [message n 156]

Sparklines are word-like graphics, like this one , that are integrated into text in a natural way, adding the insight than in many occasions the words themselves can not convey.

When we think about a graphic, like for example a bar or pie chart, we tend to consider them as auto consistent entities, separated from their environment be it textual or not. But this isn’t necessarily so or probably convenient either.

Edward Tufte calls Sparkline to “Intense, simple, word-sized graphics”. The reason for this name is the vivid and active role they play within text. Many names have been tried including bonsai graphics, but I prefer the term word-like graphics or just Sparklines to preserve Tufte’s word

Hence, a sparkline is a conventional graphic reduced to a size equivalent to that of one or a few words, integrated in the text as another word.

To understand its utility, let’s consider a sports example. Let’s suppose that we are talking about the soccer season of the Spanish league 2003-2004. We want to compare the results of the two most important (and on the other hand bitter rivals) teams. We can show the results of both teams as a set of positive bars of fixed length when they win, negative when they lose and with a dot in case they are level on points. This allows us to include in the text extensive information about the 37 weeks of the league that, would otherwise occupy a big table of considerable size.

The Spanish league last year began with a crisis in F.C. Barcelona that was over right after the election of a new president of the club, while Real Madrid began very well but ended losing match after match.

On the other hand we could create a table comparing both teams’ results by placing their respective sparklines, one on top of the other, to show which week one team won and the other lost.

FC Barcelona
Real Madrid

Another interesting example is the evolution of the market of several big players of the IT business like Apple, Cisco, Dell, IBM, Microsoft, Oracle, and Sun, whose compared evolution can be seen in the next table.

Sparklines of the evolution of the stocks of several IT companies.
Source: Modification of the author of an example elaborated by James Byers with his sparkline PHP library de sparklines. The green, red and blue dots show the maximum, minimum and current values respectively. The data is consulted on-line at Yahoo.com and incorporated to the sparkline. By Courtesy of James Byers.

The expressive power of these mini-graphics relies on their integration with the remaining text on one side and with their relative dequantification on the other.

  • The integration with the surrounding words allows you to acquire the context where the graphic is developed.

  • Dequantification means that, although the “word-like graphic“ represents its data with precision, due to the small size and the frequent lack of references like axis, labels, etc. the graphic is difficult to quantify. The important issue nevertheless is that the chart offers a clarification of the meaning of what’s being talked about, something that “traditional” words can’t offer.

In his website, Tufte discloses the draft of the chapter on sparklines he’s preparing within the framework of his new book “Beautiful Evidence”. In it we can find several examples of what these entities are, along with their applications and utility.

According to Tufte the practical production of sparklines requires taking into account some aspects regarding design and construction:

  • The aspect ratio (width / height) can greatly influence the display of a graphic. By its very nature a sparkline has to be wider than taller. In a statistical chart and especially in a time series, the aspect ratio that allows you to judge the speed of evolution of the variable under scrutiny more appropriately is the one where the average of uphill and downhill slopes is around 45º.

  • Dequantification. As we’ve already said sparklines often lack explicit reference grids and / or axis for clarity in order to avoid losing their semantic contents, like evolution with time. Sometimes it helps to include a particular figure or label to indicate the moment in time or the value the text is talking about. Sometimes including a shaded rectangle indicating the limits of normality or the applicable tolerance are useful to put the graphic into context.

  • Production methods. Beyond some very new libraries to produce sparklines (like the simple yet excellent implementation from James Byers written in PHP with which all the examples of this article have been made or some approaches in Flash), the graphics have to be produced with conventional tools, that aren’t designed to integrate text and graphics in a seamless way. To do this you normally require page layout software like QuarkExpress or Adobe InDesign a graphic design program like Adobe illustrator along with a statistical program to gather the data and treat it.

  • Unwanted optical clutter. The smallness of these graphics makes it easier than it seems to create confusion when you don’t take into account the relative sizes of several sparklines or when two of them are so close that their respective whiskers or bars are confused. Enclosing them with a rectangle of dark borders can create more confusion than clarity by attracting your gaze to the rectangle itself instead of on the chart in question. Remember that the goal of graphics is to show the data and reveal the difference, not show the decoration.

  • Resolution. These are intense graphics that yield best at higher than 1200 dpi resolution, i.e. paper or film. This doesn’t mean that a computer screen can’t be used, but when they really excel as a semantic expression media is in these high-resolution environments.

Sparklines aren’t new. Tufte shows several wonderful examples of Galileo’s documents where small graphics show, together with the adjacent words, how planets like Saturn can be seen through the telescope. Neither are they of an essentially different nature compared with the conventional ones except for their dimensions and the context they operate in.

Nevertheless, considering them as an entity with their own character opens up new doors to both graphical and written expression.

Another interesting sparkline made by James Byers shows the evolution of the US deficit from 1983 to 2003. During all that time only the last years of the Clinton era and first of Bush were in positive figures.

Many thanks to J. Byers for his help and for adding features to his library for this occasion.

Other interesting links:

Links of this issue:

http://www.infovis.net/printRec.php?rec=persona&lang=2#Tufte   Edward R. Tufte bio at InfoVis.net
http://sparkline.sourceforge.net   Sparklines PHP library
http://ichart.finance.yahoo.com   Yahoo.com's finance online web page.
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1   Draft of the chapter on Sparklines of Tufte's new book
http://jbyers.com/html/jbyers.php   Web site of James Byers
http://www.pixelplay.org/jeff/sparkline/   Sparklines in Flash
http://www.nathanschmidt.com/demo/stocksparkholder.cgi   Experiment with sparklines by Nathan Schmidt
http://www.interactiva.com.ar/mariano/?pname=sparklines   Mariano Belinky's web page about sparklines
© Copyright InfoVis.net 2000-2018