Continuing the theme of introducing the JET data visualizations, this post describes several options for displaying percentage data sets, along with best practices for each. We'll be using a data set from https://analytics.usa.gov/ describing browser usage by visitors to US executive branch government domains on November 9th, 2015. If you haven't visited that site, I strongly recommend it as it successfully shows visitor data across several dimensions (time of day, location, browser, top pages visited) without being overwhelming or confusing.
The Basics: Pie, Donut, and Treemap
For non-hierarchical data, any of these components can be a good choice. Some guidelines for choosing which to use:
- Most Familiar: Pie chart
- Modern UI: A matter of preference, but donut charts are especially common nowadays.
- Best for Larger Data Sets: Treemap. The default layout makes nodes as square as possible, making it easier to identify the colors than on the thin slices of pie or donut.
- Best for Small Values: If small values are important, then there's a good chance that none of the visualizations in this post are best, since each focuses attention to the largest values. Consider using a bar chart or list of values instead, since they would assign equal space to small values.
Note: Sunburst can also be also be used in place of donut or pie, but it is optimized for hierarchical data.
Hierarchical Data Sets: Treemap and Sunburst
Treemap and sunburst are designed to display hierarchical data sets. If viewing the data at each level of the hierarchy is important, then sunbursts are preferred. If focusing on the leaf nodes, then treemaps are preferred since they minimize the space used to display information for the hierarchy (the group headers).
Specializations: Funnel Chart
If the data represents stages in a process, and especially if the population decreases for subsequent stages, then funnel charts are a popular choice. In the example below, I've used different colors so that it's obvious that the funnel is showing different data than the rest of the page.
Note: It's important to be aware that understanding relative or even absolute size is much harder on a funnel than on other visualizations. Consider using a bar chart instead.
Small Multiples and Small Form Factor
Treemaps, pies, and donuts can also be used effectively in small form factors, such as in table cells or as mashups on other data visualizations:
- Totals Vary Between Instances: Varying the component size, such as treemap width, can be used to visualize the difference in total counts. In table cells, this works best for treemaps since the row heights would not increase.
- Labeling: The donut chart is especially effective for small multiples, as it doesn't require an exterior label. The browser usage stats didn't vary enough by day for it to make sense with this data set, but one option would have been to show a donut representing the distribution for each day of data.
- Donut vs Pie: If neither of the above apply, then pies are probably better as it's easier to read their values. Compare the pie and donut below to see this.
How To: For treemap, make sure to set layout to sliceAndDiceHorizontal and the div style to border: none to get the above. For the charts, simply set the size in the div style.