Using donut nodes: best practice tips & tricks

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.

Do consider how much data you need to display

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.

A donut with a tooltip
You could display additional information using the hover event for each segment

Do choose colors carefully

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:

  • Keep colors consistent across nodes. The same category should be the same color throughout your chart.
  • Use brand colors if your data shows brands. Users are familiar with certain colors for brands (Facebook, Twitter, etc.) so use them to speed up the user’s understanding.
  • Consider accessibility. Some users find it hard to differentiate between certain colors, so consider an alternative color scheme that these users can choose. It’s a good idea to choose distinct colors that are not too similar for donut charts. Using a color palette tool can help.

Learn how to select colors for data visualization.

Do think about adding a legend

Are users able to understand your color scheme? A legend next to the chart may help users grasp what you’re trying to communicate.

Do consider the order of your data in a donut

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 color order consistent. Whichever option you choose, make it consistent across your graph.

Don’t bombard users with donuts

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.

display donut on hover
To avoid clutter, you could display donuts on hover or select

Don’t use donuts for absolute comparisons or non-relative data

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.

How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers


Looking for success stories?

Browse our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2024.
Read our Privacy Policy.