Evolution of a graph
Recently I have wanted to chart some cost data I collected on various foods. As a baseline for discussion, here is a very vanilla excel type graph, reminiscent of ones I am certain you have seen in powerpoint presentations:
This is not a good graph for several reasons
- Only provides a general overview of the data – some foods are cheaper, some more expensive, so what?
- Labels feel cramped and ugly.
- The grid is too prominent and distracting, without being very helpful – you can’t read accurate values from it.
The biggest problem is that it doesn’t “invite the eye to compare”. It doesn’t leave an impact. The first step to addressing this is to revisit the data – it’s quite possible you just have boring data. In this case, I improved the data by coding it according to whether it is vegetarian or not.
Version 2
For the next iteration of this graph, I colored the graph to highlight the vegetarian aspect of the food. To address the other issues, I moved the labels into the legend, and completely removed the grid, instead displaying the values directly on the graph. This technique works due to the low number of data points. You can think of it has “enhancing” the table rather than displaying a high level overview of it. Also, a serif font (georgia) was used.
This is certainly an improvement, but it still has its flaws
- 8 different colors, which distracts from the data, and the vegetarian data is muted.
- It is much harder to identify the food with the data point, now that the labels have been moved into the legend.
Final
I iterated again, moving the labels back down to the x-axis, which in addition to solving the identification problem, allowed me to drop back down to 2 colours. In our initial graph this felt cramped, so I added some more whitespace and also kept the serif font from the last iteration.
This version of the graph speaks much louder. It’s easier on the eye, and the conclusion I want to draw from the data is clearly expressed. I am using this graph (with proper references and notes) on a new information site I’m working on – it’s far from complete but you can follow along on github if you’re interested.
Tools
The first graph was made with OpenOffice spreadsheet, the second with a hacked version of flot for jQuery. The final graph was made with a new jQuery plugin I wrote called tufte-graph. There is a meta-lesson here – I spent hours hacking different JS libraries to try and get them working exactly how I wanted, in the end the quickest solution was to just write what I needed.
I use Colour Lovers to find color nice colour palettes. Works much better than trying random RGB codes.
Final word
Spend time on your graphs. A picture is worth a thousand words. They are too often neglected, and it doesn’t take much effort to make them really shine.
December 30, 2008 at 10:08 AM
This looks awesome. Thanks!
January 19, 2009 at 8:31 PM
Nice.
In some cases, I reckon comparison is made easier by putting the values at the same distance along the axis (preferably close to the name of the item).
Also the unit ($) can be de-emphasised.
Dig:
http://dl.getdropbox.com/u/182350/gfx/graph.png
January 20, 2009 at 3:07 AM
Nice. I will definitely de-emphasise the $.
Moving the labels is nice also, I will have to mull on that.
January 22, 2009 at 7:43 AM
I'd suggest a horizontal graph, where labels are right-aligned, followed by the number, followed by the graphical bar. I beleive that maximises legibility, and as a bonus it's extremely easy to hack together.
For the full scientific detail, I'd recommend the mailing list of Stephen Few (PerceptualEdge.com). Also regarding colours, there's a scientific way to do this. To some extent colours here are distracting, but it can be worth it for the aesthetic reasons. Then you need colours that appear different, since you're showing different products. There should be some site where you pick "different colours", fill in how many, and out comes your hex codes for color values (and it's taking some note of effects of common colour-blindness). If someone digs it up (by asking Stephen or google), please it'd be great to get a link in a comment :-)
January 22, 2009 at 7:47 AM
www.ColorBrewer.org it is. Found it in Stephens "Graph Design I.Q. test" :-)
April 05, 2009 at 2:28 PM
Xavier, Certainly graphs are vital to making points.... but I actually think this isn't telling the real story b/c per Kg is a poor measure. Per serve, or by nutritional value is a far better measure.
Another a really good way to a point across is by simple dual comparisons. Which may not be possible in this example as there is m,any data points to compare..... but... For example; two actual pictures / plates of food with the cost underneath each, or resources needed, or water used... you get the picture. Especially if we are trying to motivate a shift in behaviour.
let me know if you want to chat more about this, as I love this stuff from a 'marketing perspective' and marketing can be used for good!
Steve.
April 08, 2009 at 9:27 PM
Simon B: Interesting about the horizontal bars, I will investigate
Steve: Good points. I had the same conversation with a friend. This particular graph is shown here in isolation since the article is more about the process. It is intended to appear with a bit more supporting context.
That said, personally I prefer per kg as it's a much more familiar measure than say calories or protein. I can visualize this. It also avoids focussing on specific nutrients, which isn't beneficial unless you are optimizing, and is even more selective than this measure (meat is higher in protein, higher in fat, for example). Roughly speaking, where I would have bought/used 500g of mince, I now use 500g of tofu, which is why for me the per/kg measure makes sense. The lentils are perhaps a bit out of place in that I don't use them as the focus of a meal, but nutritionally they are pretty much on par which is why they're included.
I like the idea of comparing similar meals. Hard for me since my meals aren't really typically portioned ;) I have some research lying around somewhere that did exactly that, I'll try and dig it up.
I am curious, do the suggested number of servings on food labels work for people? Like if it says 3-4 serves do you actually get 3-4 serves out of it? Does this help you in meal planning?
April 08, 2009 at 10:30 PM
Xavier,
Good points.... I spent some years marketing in food industry. People are far more savvy with labels than people think and read them a lot. But they are misleading.... The ANZFA is now pushing for %RDI (recommended daily intake) and energy intake rather than serves... as serves only relevant with specific meal / not ingredient. Anyway.... also to remove low fat / fat free parlance from market as misleading....
Obesity crisis is related to fundamental problem with society more related to the maxim that 'more is better'. Society says More = success. Growth is good. Economic growth, more money.... ... Companies selling more, bigger share price, higher yield in factory or on farm.... net result is bigger servings of food....
World problems will only be solved if we can convince the world that 'steady state economy' is valid and we can remove the link we currently have that only by physically making more & selling more we create more value. This is why I think 'premium products' can save the world. As we'll end up increasing the value of things, but without further strain on limited resources. Quality versus quantity....
Sorry I'm ranting. I'll stop now.
November 19, 2009 at 10:53 AM
I love the name of the code - tufte. Classic.