Getting percentage graphics right

A friend forwarded me a link to an interactive on water (http://www.texastribune.org/library/data/cheap-water-in-texas/). It is one of the best I’ve seen. I really like the way you can click on a column and see the data resorted in the table and redrawn on the map. However, one thing caught my eye. When you click on the drought column, for example, the percentages represented by the circular areas are not proportional.

There is no way that the circle size representing 5% should be that large in relation the circle representing 83%. Here they are enlarged for clarity:

In order to see what the correct size for the smaller circle should be I first had to extrapolate from the larger circle to find out the area of a circle that would represent 100%. To do this, I calculated the area of the 83% circle. Then I multiplied that amount by 1.205 (1 / .83) to get the area of the larger circle. Dividing the area by pi, then getting the square root of the result yielded the radius of the 100% circle.

Multiplying the area of the 100% circle by .05 to get area of the 5% circle, I performed a similar calculation to get its radius as well. That allowed me to draw this graphic:

As you can see, the 5% area would be quite a bit smaller it done proportionally. One might argue that it doesn’t really matter, but try visualizing these same percentages in some other ways. For instance, on a linear graph:

You wouldn’t expect to see 5% to be shifted to the right on this line. Likewise, why would anyone expect to see it shifted in an areal graph? The principle is the same:

The second part of that example shows the data being taken back into a non-linear form. And that leads to another visual proof that is closer to the circular area. In this case, there are 400 grid squares approximating a circle. Twenty of those squares have been colored orange to represent 5%. The area in blue + orange is 328 squares or 82%, which is as close as I could come to 83% and maintain a roughly circular shape. If we went to 1600 squares the circles would be, well, more circular. But for purposes of this demonstration, this will do:

Now, compare it with the true circular areas juxtaposed over it and you can see why it’s important to get proportions right when using areas to depict percentages:

I’d be remiss if I didn’t include the math to calculate graphics like these. If you want to use circles to depict percentages, then:

  1. Calculate the area of the 100% circle, e.g. if the circle is 100px in diameter, then the area is 50^2 * pi or 7853.98
  2. Multiply the 100% area by the percentage desired, e.g. 7853.98 * .83 = 6518.8
  3. Divide this number by pi, then get its square root, e.g. SQRT(6518.8/pi) = 45.55, to get the radius
  4. Multiply times 2 to get the diameter, e.g. 91.1 pixels.