We recently responded to Cambridge Intelligence customer requests and included the ability to add donuts to nodes. Donuts are circular node borders divided into segments that add up to 360 degrees. They work just like pie charts and allow you to show nodes values as numeric proportions.
To help make sure your visualizations are as clear and effective as possible, here’s a list of ‘Dos’ and ‘Don’ts’ when using donuts.
Donuts, like pie charts, work best when there are five segments or fewer. Crowding a single donut with more than 10 or 12 segments is likely to make your chart confusing. Identify the 3 or 4 largest segments, and then group the remaining values together into a generic category. This helps your users focus on what’s important.
If you want to display details or a breakdown of what’s in each category, add tooltips to the hover event on each segment.
Color plays a big part in how humans interpret data. Donuts come with a default set of colors, but you can choose your own. If you do, follow these simple tips:
How to select colors for data visualization.
Will users be able to understand your color scheme? A legend next to the chart may help users grasp what you’re trying to communicate.
The first segment always starts at the 12 o’clock position. When viewing a single donut, it’s best to represent the largest amount of data in the first segment, then display the other segments from second largest to smallest clockwise around the node.
However, if you are using donuts to make comparisons between different nodes, it may be better to keep the colour order consistent. Whichever option you choose, make it consistent across your graph.
Showing a donut on every node in your chart might make it difficult to interpret. Instead, you could display an animated donut when you hover or select a node.
Donuts are designed to display proportional data only. If you want to communicate other types of data, use a different feature, such as tooltips. Similarly, donuts aren’t good at comparing absolute quantities between nodes. Consider using glyphs for this instead.
We hope you found these tips useful. Now you’re ready to start using donuts to create some beautiful and informative visualizations.
Read more blog posts about Best Practice.