In the last post we defined the LCh color space and explained why this is, at the moment, the best color space you can use to construct a color map. In this post we will explain how to build a color map with it.

Categorical color maps

The easiest way to construct a categorical color map is to keep the chroma and the luminance constant, and to vary the hue.

Varying the hue has the advantage that your audience will be able to refer to a particular category by simply using the color name. This is of course true unless you have too many colours, in this case naming the color could be ambiguous. Moreover, by keeping the luminance constant, there will be no category which stands out more than the other categories, so your classes will be all be perceived in the same way.

Naively, you may be tempted to choose the highest luminance as well as the highest chroma as possible in order to accommodate the highest number of classes as possible. From a perceptual point of view, however, this is not a good idea: your audience will be likely distracted by the bright colors, so using less brilliant colors will reduce the cognitive load of your audience. In order to do this, you can either decrease the chroma or the luminance of your color, or both.

Keeping a high chroma and a high luminance has another issue, related to the structure of the LCh color space: given a chroma and a luminance, not all the hues are displayable, and the more you increase the chroma, the more the available hue range becomes smaller.

Keeping the luminance constant can moreover be problematic for people affected by a quite common inability, namely color blindness. Some people have a reduced or either completely absent capacity to perceive color hue, so keeping the luminance constant will imply that this part of your audience will experience problems into a correct interpretation of your visualization.

There are also design issues to take into account: spanning the entire hue circle will likely make your visualization look like an harlequin, and this will also contribute distracting your audience. A possible strategy to avoid this could be to restrict your hue variation within warm colors or cold colors. Additionally, you may need to consider that color may convey an implicit message, and this message may depend on the cultural background of your audience. This may be a positive fact or a negative one for you: red and blue meanings are universally recognized when talking about temperature, so you may consider using red to refer to a high volatility (which is often referred to high temperature in statistics) period in a market analysis and use blue to depict low volatility periods. On the other hand, in finance, red is associated with loss, so by using the above convention you may implicitly transmit the idea that high volatility implies loss, which is simply false (you may have a period where an index is always negative, and this is low volatility loss).

There may be finally some task-specific issue to take into account. Companies often require that their visualizations fulfill specific requirements, like using the company’s palette.

When you choose a color map, you must consider many factors, and finding a good balance can be a tricky task.

In order to reduce some of these issue, one should keep in mind that color is an appropriate channel for categorical attributes for a limited number of classes, possibly no more than four and never more than, say, eight 1.



Quantitative color maps

The simplest possible way to construct a quantitative color map is to keep the hue and the chroma as constant, and to let the value vary within the largest possible range. Many color scales have been built in this way, but this is not the only possible way to proceed. A very popular and valid alternative is to vary hue too. This has the main advantage that one may span a larger region of the color space, and this would increase the smaller possible perceived variation of your attribute.



Diverging color maps

Building a diverging color map will now be very easy, as it simply requires to attach two color maps. Those color maps should:

  • Have the same chroma
  • Start from a common point
  • Move in different hue directions
  • Span the same distance in the luminance direction



Cyclic color maps

Sometimes you may also want to encode the fact that your attribute is cyclic, as an example when you are dealing with months, seasons or other periodic quantities. In this case you can simply put a difference between the minimum and maximum hue equal to 360.

In case you are dealing with categorical attributes, keep in mind than you should increase by one the number of categories and drop the last one in order to have distinct colors for distinct categories.



Conclusions

Choosing the correct color map may be a complicated issue. We have seen which are the main choices one must address in this task, together with some recipes to proceed. Sometimes the easiest choice is to simply go for a pre-build color map, as most dataviz libraries comes with their palettes, and they are usually done very well. This is the case of matplotlib for Python or ggplot2 for R, as well as for other tools like Tableau and of course d3js (which has been used almost everywhere in this blog, included this post).

Another great resource is to take a palette from colorbrewer, which is a collection of hand made color maps.

Sometimes, however, this is not possible, since you may have requirements which are not implemented into the most popular palettes.

In any case, you should keep in mind the following truth about color:

Above all, do not harm - Edward Tufte

Practice it

Now that we highlighted some of the choices you should consider when building a color map, let us use the above mentioned strategy to construct a color map. This is a very simple app that allows you to implement the above methods to construct a color map. You can choose the chroma and select a segment in the Hue-Luminance plane. One you are satisfied, you can generate your palette. Notice that, by varying the parameters, you may get out from the displayable region, so in order to avoid perceptual distortion the app will return black for the points which are not displayable.



Categories:
  • Chroma: 45
  • Hue 1: -70
  • Hue 2: 100
  • Luminance 1: 15
  • Luminance 2: 95




Here you may also import your palette to visualize it.





  1. There is no agreement on the exact number of maximum categories one can easily distinguish by using color. A recent article, however, suggested that we use two different areas of the brain to count up to four and to count more objects, so without other experimental evidences I would suggest four as possible maximum value. ↩