Distinguish Items in a Treemap by Color (And Alternatives)

Visual Design
#1

Guideline: Don’t use more than 6 colours together*
Source: http://blog.visme.co/dos-and-donts-chart-making/

Question:
I’m trying to differentiate different file types in a tree map and a color mapping seems to be the most popular way in doing so. However, with about 10-12 file types in my tree map, the use of color is problematic, as according to the guideline I shouldn’t use more than 6 (and also have to avoid using color combinations that are difficult to distinguish for the color blind). Is color therefore completely discouraged and what would be appropriate visual mappings for categorical data in tree maps instead? Is combining colors with other methods, like textures a possiblity?

#2

Hi, David, thanks for your question. The maximum of six colors for nominal data sounds too much restrictive. It depends on the color schema you want to use and the distribution of the data. There is vast research in the area of color theory and visualization design about the use of the color channel and other visual variables to represent categorical data.
Two good starting points are the book of (1) Theresa-Marie Rhyne, 2017: “Applying Color Theory to Digital Media and Visualization,” and (2) the book of Colin Ware, 2013: “Information Visualization: Perception for Design.”

Chapter 5 of (1) provides you with different tools that assist you to create a color schema for online and mobile apps, for example, Colorbrewer 2.0
Chapter 2 of (2) provides you with an application of color for labeling of nominal data and its perceptual properties.

I hope this answer helps!

1 Like
#3

I agree with Alexandra that it possible to distinguish between more than 6 colors: the ColorBrewer site that she mentioned can produce a color scheme for qualitative data with up to 12 classes (example).

To allow more categories to be distinguished, colour can be combined with a texture or fill pattern (see the Pattern Chart from the FGDC Digital Cartographic Standard for Geologic Map Symbolization for an example).

However, when you find yourself with more classes than you are able to distinguish, you should consider whether you really need to simultaneously depict them all in a single static image.

There are many possible alternatives: how well each works in any particular case will depend on both the data and the tasks that the user needs to perform.

  • It may be appropriate to aggregate different classes. For example, if the user does not need to distinguish between different video formats, then AVI/FLV/WMV/MOV/MP4 could all be represented by the same colour.

  • Interactivity could be used to allow the user to highlight all nodes corresponding to a particular file type, or reveal the file extension of a selected node using a tool-tip. Similar file extensions could then be assigned similar colours, with interactivity helping to disambiguate them.

  • You could draw multiple static images. For example, you could draw multiple copies of the complete treemap, and in each one highlight the nodes corresponding to a specific file extension. Alternatively, if different file extensions occupy different regions of the treemap (for example, video files might be confined to /Movies, audio files to /Music, etc.), you could provide a complete treemap as an overview, and then draw zoomed-in detail views of parts of treemaps using independent color scales.

1 Like
#4

Thank you both for your very helpful answers!

I think that aggregating different classes together and then revealing the individual ones after highlighting such a group would definetly help in reducing the number of different colors. I also like the idea of multiple copies if interactivity is not a feasible option.

I’m glad that i’m not too much restricted in the number of colors and that I can make use of several good methods to overcome the original problem!

#5

We are currently working on research in just this area. The results and documentation are still in the works but you might find our site to be a bit of help - SciVisColor.org.

#6

This looks very useful, thank you!