The clever coders over at the Simile Project (MIT) have released a new tool called “Exhibit” for visualizing and enabling dynamic interaction with data. And it’s easier to use! Like their Timeline widget, which I used to time plot the references in my dissertation, you only need basic HTML skills and some data to look at and it is relatively easy to code something up. Simple examples and the required files to roll-your-own data visualziations are provided on their Simile Widgets website. Nice.

I’ve been honing my houghts on this for a while, because many people have been asking me why pie charts are problematic. On the surface, they seem like a good way of presenting part-to-part and part-to-whole relationships. And hey, everybody uses them, so they must be good, right? Unfortunately, they make little use of our best capabilities for visual perception and rely on comparing angles and areas - two of our weaker visual tasks, according to many perceptual studies.

Their principle faults are:

1. They force us to compare either 2-D areas or lots of angles,
2. They take a lot of time to interpret using a legend, and
3. They miss the point!

For example, take the pie chart below. Imagine that you had to determine the quantities represented by the slices or even easier, to simply rank order them from biggest to smallest. Think about how long it would take to make your best guesses and how much you’d have to rely on rough estimates by either: 1) evaluating the relative sizes of the slices or 2) comparing the angles of the slices where they converge at the centre of the pie:

It’s pretty tough going. Just how much bigger is the red slice than the orange slice, expressed as a percentage? Furthermore, adding labels actually complicates matters because your eyes have to bounce back and forth in order to know what you are making comparisons about. In this case, perhaps the number of animals adopted from a pet shelter:

It’s visual ping-pong folks, and it’s not fun. What, you say? Just add the percentages into the slices and that will help you to solve the estimation problem. Let’s take a look:

It does indeed make it easier to see that there were almost twice as many Rabbits adopted as Hamsters. It might even be easier if my version of Excel allowed me to put the labels in the slices (though it doesn’t!). However, this misses the final point: that if we have to rely on displayed numerical values to get the answers, it would be better (and easier) to just show them without all of the visual nonsense:

There is is. Simple, straightforward, and easy to read. It might not make for pretty pictures in the boardroom. But ask yourself if you are really just trying to entertain your audience or whether you are trying to communicate something effectively, precisely, and meaningfully. And in that case, it doesn’t matter if that last line is a Platypus or a Profit Margin.

I have just got my copy of Stephen Few’s new book “Now You See it”, which I had bought from Amazon without even cracking the cover for a preview and I have to say it’s a very impressive effort. Following on from Few’s previous excellent books Designing Information Dashboards and Show Me the Numbers, this new book carries on his excellent work on data representation and quantitative presentation. Even better, the new book makes specific recommendations regarding user interaction with interfaces. Best of all, it provides a practical methodology for grappling with data representation problems, something which has been sorely lacking in the literature (e.g., the work of Tufte). Go. Buy. Now.

Last week at Tinker.it!, we installed the “Centograph” at St. Paul’s School for Boys (London). This project is a real-life histogram, that moves its bars according to data values retrieved from Google. When you enter a search term into the computer, Centograph queries the Google News Archive for a list of related news articles over the past 100 years. The archive returns a timeline of articles sorted according to date. The bars on the graph then change height to display a histogram of the relative number of news articles for each decade. Details and video are on the Tinker.it! website.

In the thick soup of information in everyday life, I’m often swimming in the flotsam of crap graphics and misleading diagrams. A recent edition of the Times of London (22 Apr 09, p. 3) provides not one, but two classic examples in a single graphic sidebar. In discussing the recent £3B profits of the biggest UK supermarket Tesco, the graphic uses a histogram to illustrate the number of Tesco stores worldwide. Normally, a straightforward info graphic, but in this case, one of the values is substantially larger than all of the others. The result is the histogram contains several similarly-sized bars and one outlier that exceeds the available space. To solve this layout problem, some clever designer has slashed the end of the bar as a visual indication that some of it has been snipped out. This technique works fine in situations such as circuit diagrams, where the main task of the reader is to understand connections, and not the area or proximity of components. However, the main function of bars in a histogram is to provide a visual aid for comparison of the relative sizes of the values encoded (number of Tesco stores). The differences among the values can be perceived pre-attentively - they are apprehended all-at-once, without having to make a calculation or even to compare the bars. This “built-in” capability of our visual perception and as such, are extremely powerful for organising and presenting information. By snipping out the missing portion of the top bar, a false perception is created about the true relative sizes of the quantities that have been encoded. A better solution would have been to avoid this entirely, to choose adifferent layout such as a landscape orientation for the callout graphic, or to simply list the numbers as a table.

The second faux pas in this graphical car crash is an illustration of Tesco’s regional sales, using four adjacent circles. These circles are extremely problematic. Several studies have shown that we are very poor at accurately discriminating the relative areas of circles, often falling victim to quite a large error.

These two examples illustrate a common mistake in diagrammatic representation: poor graphical encoding.