Restoring romance to the sports page
By Chris Gemignani
January 31, 2006
Find more about:
design
python
sparklines
visualization
Why do our sports pages look like this?

Instead of this?
| Eastern Conference | |
| Atlantic | |
| Nets | ![]() |
| 76ers | ![]() |
| Celtics | ![]() |
| Raptors | ![]() |
| Knicks | ![]() |
| Central | |
| Pistons | ![]() |
| Cavaliers | ![]() |
| Bucks | ![]() |
| Pacers | ![]() |
| Bulls | ![]() |
| Southeast | |
| Heat | ![]() |
| Wizards | ![]() |
| Magic | ![]() |
| Hawks | ![]() |
| Bobcats | ![]() |
| Western Conference | |
| Pacific | |
| Suns | ![]() |
| Clippers | ![]() |
| Lakers | ![]() |
| Warriors | ![]() |
| Kings | ![]() |
| Southwest | |
| Spurs | ![]() |
| Mavericks | ![]() |
| Grizzlies | ![]() |
| Hornets | ![]() |
| Rockets | ![]() |
| Northwest | |
| Nuggets | ![]() |
| Timberwolves | ![]() |
| Jazz | ![]() |
| SuperSonics | ![]() |
| Trail Blazers | ![]() |
Those green and red lines are "sparklines"--a term invented, I believe, by Edward Tufte. They are little, word-size graphics that show a trend more quickly and clearly than one could describe it. In this case, each sparkline shows an NBA's team record throughout the season; a green up bar is a win, and a red down bar is a loss.
In less space than a standard standings listing, we see the sustained excellence of the Pistons, the steadiness of the Spurs and Mavericks, the Raptors recovering from their awful start, the wheels falling off the Pacers, the mystery that is the Nets. These large multiples of small graphics recover some of the romance and drama that is a season.
For a really beautiful example of sparklines applied to sports, look to Tufte's professional example here. If you know Python, Grig Gheorghiu has written a simple tool for generating sparklines.



































10 comments | Show all comments only the last 5 are shown
Brian Cantoni said:
You might also check out Joe Gregorio's Sparklines work (<a href="http://bitworking.org/projects/sparklines/" rel="nofollow">http://bitworking.org/projects/sparklines/</a>). He created (also in Python) a CGI script / web service, including an interactive demo page where you can create your own.
Ben Finney said:
> Why do our sports pages look like this? [numbers in a table]
> Instead of this? [graphics in a table]
Perhaps because the former is text that is accessible to those without graphical capability, and the latter is restricted to a smaller audience.
Chris said:
Ben,
I just don't believe that some people don't have the capability to understand and appreciate simple infographics. Our brains are specialized pattern recognizers, text is the aberation!
The biggest problem with infographics in the sports page is developing a shared visual language, so that someone who reads USA Today doesn't have to learn something new to browse the sports page in the NY Times.
Ben Finney said:
> I just don’t believe that some people don’t have the capability to understand
> and appreciate simple infographics.
I take it you don't believe visually impaired people exist either?
There are many people who are unable to use the internet in a way that makes graphics meaningful. Some of those people are unable to use *any* graphical information in a meaningful way. Eschewing textual information leaves all those people with no information.
Chris said:
I'll concede that point: visually impaired people do exist!
Given their text-integrated word-like capability, sparklines could potentially be a lot more accessible to the visually impaired than traditional charts (imagine if a sparkline were replaced with a one second audio tone.) I wonder if anyone is working on this?
JimJJewett said:
If they can read the table in a newspaper, they can read the graphic.
Some disadvantages that I notice.
(1) It is harder for someone else to read it to you (or OCR it, or index it, or ...).
(2) The sparkline relies on heavily on color, and color newspaper ink costs more.
(3) You don't have a magical number (like .524) to throw around.
(4) It is harder to display multiple types of information. For example, the sparklines above do not display which games were home/road or in-division, so those percentages are lost.
Chris said:
Thanks Jim.
Jeremiah McNichols raised a lot of similar points in this post: http://thinkingpictures.blogspot.com/2006/07/sparklines-handle-with-care.html.
I don't want people to take the exact sparkline I'm showing too literally: the sparkline could be redesigned to show the home/road data, for instance. Personally, I think disadvantage #3 matters most.
Wayne Frazer said:
As a former sports editor and newspaper publisher, I can almost guarantee that system would never fly mainly for the second reason given by Jim above.
To be able to use spot color without running up astronomical prices, you have to have color running on another page adjacent in the printing process, i.e. 1/8/9/16 in the web printing process. Putting color willy nilly throughout the paper would drive cost through the roof.
Also, space is at a huge premium. While I like the sparkline's ability to convey the momentum of the team, the amount of space it would take to be clearly visible on low-quality newsprint paper would be tremendous, and it doesn't tell any other story than trend.
Pete Jelliffe said:
YOu don't need color to show win/loss, you can simply show up down. But while I like the graphic, it's easier to compare relative records and streaks, you can't quote it. You can't rattle off these stats to friends during a conversation.
I would definitely include summry stats at the end like total win/loss, games back and win %.
Tom Snider-Lotz said:
I love sparklines, and use them at work. But for the sports page, as a fan, I want to know how many games behind my team is, especially as the end of the season approaches. I want to compare numbers across divisions if wild card slots are at stake.
Sparklines would make a great supplement to the table, but not a replacement. Tufte himself makes a case for using tables when the data warrant it.
said:
Add a comment