Using donut nodes: Some best practice advice

11th April, 2017 Estimated reading time 3–4 minutes

In KeyLines 3.4, we responded to 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 KeyLines 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 KeyLines 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 KeyLines 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 in KeyLines 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 KeyLines 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.

How to select colors for data visualization.

Do think about adding a legend

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

Do consider the order of your data in a donut

KeyLines always starts the first segment 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. Which ever 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 that these tips are useful and that you can use the donuts feature to create some beautiful and informative KeyLines visualizations!

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email