Let’s make the top two of ways people love to organize information. First, for sure, is throwing all data in trash can and forgetting about it. The second is tables. People love tables! They love tables so much that Apple was nothing without spreadsheets software. Apple hired Bill Gates and his Microsoft to make that soft and he was happy to get inspired by Mac OS.
Anyway, let’s get back to the tables. I know a lot of office workers who even write texts in Excel — they find that way of information organization quite comfortable. So once again people love tables. It’s a pity that love doesn’t mean “can do good”. I met too much tables in my life but fell in love with only two of them. Other tables look like informational prison where data has to sit in it’s personal cell jailed.
Why so serious introduction?
When we started making Invest Gazeta design the one who was in charge told that the main goal is to make site feel like you’re reading magazine but not making it look like magazine. We had to use different infographics elements in articles to make them look more magazine-like. Besides histograms, graphs and that awful pie charts I had to decorate tables and make them look joli. We discussed several ways and stopped on the most simple yet elegant way. That’s how I met sparklines.
To get the most exact definition head to Wikipedia (I read it writing the post for the first time). My definition is sparklines — little charts right in table or in-line text that expand information presented by data but they are not as informative, as detailed charts. E.g. if we decided to show unicorn meat price then we can put graph next to the numbers to show that it raised during last couple of month:
How can I make usable sparklines?
To make sparklines usable and useful first decide if you need any and what data you want to decorate. Then decide what type of graph you want to use. Examples are shown in illustrations below. But first I want to discuss visualization of graphs as sparklines. A lot of useful advises are given by Edward Tufte (he is the author of the term sparkline) in his Sparklines: theory and practice. I like this article because I read it when I was finishing making sparklines for Invest Gazeta and found out that almost all solutions I came up with equal to Edward’s.
How do sparklines look anyway?
Illustrations, finally. Below are several examples I made for Invest Gazeta. As I had to show different samples of sparklines I decorated two columns in every table but if these three tables were made not as illustration of sparklines but as illustration of information in article, I would decorate less.
There are two columns with sparklines in this table: Last known temperature and How likely air smells. I used progress bar to illustrate how likely air smells because people are used to progress bar and percentage nowadays.
The temperature dynamics and adorable temperature range are shown in temperature column. Thanks to sparklines we not just present the last temperature but also show how it changed and how likely the season was for people. Marvelous! Units are show next to data because it’s easier to read not big tables that way.
I want to set your eyes on Term column. Instead of using two columns for first and last month in season I combined them into one thus improving readability of the table.
Sparklines in this table were used to show homeworks missed thanks to each of the games and to show overall result.
Homeworks missed are represented quite good thanks to sparklines. If we compare the shown sparkline with others we can conclude that it’s not intelligence boost but just switching to another games.
Overall results column represent fails and wins so viewer can see the progress. As we can see, player learned nothing — if he was unskilled in one game, he remained unskilled and won from time to time ;)
And once again I minimized the number of columns showing game publisher next to game title.
I had most fun with this table asking friends and trying to remember things you usually forget.
Let’s start with the last column Music volume after 21 average doses. Data is in decibels and each bar represents volume after certain average dose. It’s the same graph as in first example but it’s made more like equalizer bars and divided on 21 parts. If we could make roll over on that, that would give us even more information on volume on every dose.
The amount of bottles friends drank during 2005-2009 is represented in corresponding column. We use red dots to indicate and make more readable start and end of the sparkline and also color code numbers to see if the ending number is bigger, less or the same as starting. To make sparkline look more appealing I added background gradients that I couldn’t use in the first table because background there is used to represent range of temperatures.
Sparklines are often can be replacement of big and detailed graphs and charts. Sometimes sparklines are even more informative then miserable pie charts. E.g. Google Analytics and Flickr use sparklines to represent visitors statistics and even as sign of statistics (on Flickr).