A Design Problem

Recently, a reader sent me the following display, which was created by J.P. Morgan.

[Scroll down to see our solution to this graph's design problems.]

Poor Design Example
[Click graph to enlarge.]


This display compares the market capitalization (what it would cost to buy all of a company’s stock at the current price) of 15 major banks as of January 20th, 2009 to their market capitalization in Q2 2007, before the banking crisis hit. People are supposed to compare the small green circles to the larger blue circles to see how much the market capitalization of each bank declined. Visual perception in humans has not evolved to support the comparison of 2-D areas, except as rough approximations that are far from accurate. Perhaps the creators of this display realized that we don’t compare areas well, because if you look at the numbers that label the circles, you’ll see that the differences in the numbers obviously don’t reflect the differences in the areas. For instance, look at the two J.P. Morgan circles. Based on their areas, the blue circle is 3.75 times larger than the green circle. Now look at the two numbers, 165 and 85. We now see that the value of the blue circle isn’t even twice that of the green circle. The creators of this graph encoded the values using the diameter of the circles, but when the diameter of the circle changes, the area changes even more quickly, which causes us to dramatically over-estimate the difference in values if we do what comes naturally—attempt to compare their areas.

Instead of using circles, the creators of this graph could have used good old-fashioned bar graphs.

Here is my redesign:


Design Example Solution
[Click graph to enlarge.]

As you can see in the top graph, by using stacked bars I've made three comparisons easy: (1) Q2 2007 values among the banks, (2) remaining January 20, 2009 values among the banks, and (3) for each individual bank the difference between its Q2 2007 value and what remains on January 20, 2009. Additionally, I directly displayed losses as a percentage in the bottom half in order from the least to the greatest, which makes it easy to see that J.P. Morgan lost the second least amount, which was the primary objective of the original chart, and to compare the relative change in market capitalization among the banks, which makes some of the smaller banks that had the biggest percentage drops—such as RBS and Deutsche Bank—stand out a bit more.

Finally, in the original graph, I noticed that the label for the J.P. Morgan circles is bolded. Based on this, I’m assuming that they’re trying to draw people’s attention to the fact that they had the second lowest decline in market capitalization of any of the banks featured. If this is truly the message they want to convey, why not make it obvious? In my redesign, the lower graph makes this much more obvious than the original, but I also chose to annotate the bar that represents J. P. Morgan to draw attention to it. In many cases, the best way to help your graph emphasize a particular message is to include that message as a note near—or sometimes even within—your graph.