THE PIECHART IS NO CAKEWALK…
Pie charts and bar/column charts are perhaps the most popular chart types for visualizing non-time-series data.
The bar/column chart excels at showing discrete data while comparing one data-point vs. another, while the pie chart is the classic way to show how various parts makes up a whole.
Both make it easy to for readers compare values relative to each other. Or so I thought.
You can “easily” fit other kinds of data into each of these chart types, with mixed results. For example, the bar chart is also great for showing time series data. For example, 12 bars listed in chronological order may visualize a city’s rainfall month to month. The same layout can also be used to show rainfall on a specific month, across 12 different cities.
The pie chart, on the other hand, is only useful to show relative values.
For example, one could have 12 slices representing the relative amount of rain for each city as a fraction of the cities’ combined rainfall. It could also be used to show the relative amount of rain per month as a fraction of the cumulative rainfall for the year.
However, the achilles’ heel of the pie chart is that it is hard to compare values of adjacent points, especially with percentages in the single digits. In a column chart, you’ll see the differences right away. For that reason many would claim that a column (or bar) chart is, most often, the better choice.
A REAL EXAMPLE OF A PIE CHART #FAIL, THAT BLEW UP ON TWITTER
Picking the right chart type may be harder than it seems: As I was putting together the results of a survey on the popularity of different web development frameworks (among developers who use Highcharts), I erroneously used a pie chart. Or did I? (Yes, I did).
The chart in question is what you see below. It’s not pretty. In fact, it’s so bad that the Internet blew up. (Well, sort of. Three people were mocking it on Twitter).
HOW CAN WE MAKE IT BETTER?
A knee-jerk reaction may be to change chart type. The only viable candidate seems to be the aforementioned column or bar chart. Here we go:
Frankly, this is just as bad. I tried making each bar a different color. Nope. Still bad.
It is clear that with this many data-points, neither the bar graph nor the pie chart are useful in visualizing this data. Unless, perhaps, we can prepare our data in a different way. Let’s try organizing in order of magnitude.
Here are the results for both the bar chart and the pie chart.
Much better, but still not great. Too much granular data takes away from the overall story.
Let’s revisit to our source data and aggregate the smaller values into an “other” category. For the chart, let’s clean up various labels that were automatically added (as they were present in our data source, but shouldn’t be displayed it to the chart itself):
- Change the series name to “Users”
- Hide the legend as all it says is “Percentage” as this is just the unit, not the data
- Add percentage signs to the axis and tooltip.
Here we go (and now with colors for the bars as well). You’ll also notice that we have enabled sharing and exporting and editing of the chart, indicated by the three-line icon in the upper right corner of each chart. Now, people can export the chart as an image, or, since we created the chart with Highcharts Cloud, even edit the chart themselves.
That’s the best so far. But which one is better?
At first, I thought the pie chart may be the best option since we’re trying to show the relative distribution of each framework and language. Then again, in our survey (you can take it yourself when you sign up for our newsletter) the data represents responses to multiple choice questions. In other words, what we’re really measuring is how many developers use each framework. Since a developer can pick more than one, the pie chart is misleading. So, a bar or column it is.
STOP THE PRESS!
Is this then the best we can do? According to the master himself, Torstein Hønsi, the creator of Highcharts, I’ve been barking up the wrong tree all the time. The most appropriate chart for visualizing hierarchical data would be the Treemap. So let’s back up that one.
Here is how that looks. I exposed the code via JSFiddle so that you may see yourself how we, for this version, chose to use Highcharts’ data module for pulling live data directly from a Google Sheet. Does the fun ever stop! 🙂
What do you think? What would you choose? What would you do?