Monday, September 19, 2011

Charting for Understanding

Do You Think Most People Try to Take Advantage of You?
An interesting chart at ChartBin showing relative mistrust per country.  I don't know what the deal is with India (only two options, only two respondents?).  Anyways, it relies an awfully lot on color but uses a troublesome color combination.  Below is a set of suggestions for increased readability...

Chris Abraham showed me a pretty cool infographic from ChartsBin the other day showing the relative mistrustfulness of folks in various countries.  I sent it to the eminent Irfan Ali (who I'd forgotten was red/green colorblind) and he thought I was playing a trick on him because the colors were the same -to the extent that India, with only the two extreme colors in its row, 'looked like one single bar of all the same color.'

Uh oh.

I'm sure I am frequently guilty of *inaccessible* color schemes, but I got to thinking that this already cool chart was a particularly good example for illustrating the use of additional visual dimensions to utilize more of an infographic reader's cognitive horsepower.  Here are the tinkerings...

In the original version, color is doing all of the work.  The rectangular alignment, while compact, makes comparison very difficult because color processing along a diagonal is pretty much your only cognitive tool.

By aligning the countries at their midpoint, you get a meaningful baseline that highlights comparative magnitude, as well as color.  Relative proportion, I would argue, is probably the most important message for this chart.  Also, oddly, when I realigned the countries, I got a different ranking than the original.

Aligning the bars along the response mid-point establishes
baseline, and puts us one step closer to facilitating a
comparison that leverages proportionality in addition to color.

The left/right orientation of the data in the original doesn't leverage the visual sense of more and less that the vertical dimension does.  No matter your culture, a tall stack of something means more -by rotating the axis, the chart becomes more naturally mapped to volume or proportion.
In the revised chart I've made mistrust the positive orientation because of the way the question is framed ('do you think people take advantage of you').  If the question were 'do you think people will treat you fairly' then I'd reverse it.

The height dimension is a more natural fit for showing quantity. 

Make sure to orient 'more and less' to match the phrasing of the data's question.

A quote from Irfan regarding the color scheme of the original, which he thought was a joke: "Stop making fun of me, John.  I can't tell the difference between the colors for 1 and 10."

Original: The Vischeck color empathy tool predicts trouble for colorblind readers.

Running the chart through Vischeck, a supercool resource that approximates the color perceptions of the colorblind, supported Irfan's claim.  The red and green (which are intended to illustrate opposites) are virtually indistinguishable. Pushing the hues of the two bookend colors around so they are more variable from each other made a big difference for Irfan ('I got it instantly').

Revised: Tweaking the colors away from straight-shot red/green makes it noticeably more
discernible for the red/green colorblind.  It didn't require much pushing, and it still looks attractive.

The end result is a chart that communicates the message of the survey in a way that uses additional, and more naturally mapped, visual dimensions in an effort to, hopefully, take advantage of the ways that your eyes and brain want to process images.

A revised version of the chart with varied hues, a baseline at the positive-negative intersection, and a vertical orientation.

  • Go to VisCheck and try on the goggles.
  • More reading here for some resources for colorblind-friendly mapping.
  • Make your own charts at ChartsBin.
  • Learn more about IDV Solutions.


  1. Centering the data on zero, with positive responses accumulating in one direction from the axis and negative to the other, is actually a substantial improvement over the original layout, where the extremes of the chart are aligned.

    I disagree about the horizontal vs vertical alignment. We can judge left/right as well as up/down, and in a Euro-centric context, left-to-right means bad-to-good. So the vertical aspect provides no improvement to judging the values in the chart.

    By switching to the vertical, however, you are handicapping the readers, who now must try to interpret text which is not oriented for easy reading (i.e., it is not horizontal). So the overall effect of switching to vertical reduces the effectiveness of the chart.

  2. Much appreciated for the information and share!