That is the third article in my knowledge visualization collection. See Part 1: “Data Visualization Explained: What It Is and Why It Matters” and Part 2: “Data Visualization Explained: An Introduction to Visual Variables.”
do you see within the image under?
Most individuals see 4: white, inexperienced, and two completely different shades of pinkish-red. In actuality, these two shades are precisely the identical; there are solely three colours within the picture.
This standard optical phantasm illustrates an essential truth to contemplate when designing knowledge visualizations: Poorly chosen colour combos can trick the human eye. For a whole remedy of colour, I would wish to delve into physiological particulars of the human eye and learn the way we really “see” colour.
Nevertheless, seeing as this isn’t an optometry article, I’ll as a substitute give attention to the basics of colour utilization that you’ll want to construct clear knowledge visualizations.
The Distinction Between Colour Hue and Colour Worth
Once I launched visible encoding channels within the previous article, I offered two completely different channels associated to paint: hue and worth. Allow us to talk about these formally.
Colour hue is what you usually consider once you hear the phrase “colour.” Purple, inexperienced, blue, pink, yellow, and so forth. are all completely different hues. Colour worth, alternatively, refers back to the “lightness” of a person hue. The picture under illustrates completely different values of the rainbow colours, exhibiting how the identical hue can range drastically in lightness/saturation:
Whereas each of those could be efficient visible encodings (see my previous article in this series for a detailed discussion on visual encodings), colour worth has one notable benefit over hue: It will probably nonetheless be perceived if a visualization is printed in grayscale.
Forms of Colour Scales
If you wish to use colour as a visible encoding, it’s worthwhile to begin by selecting a colour scale. In doing so, there are just a few traits it’s worthwhile to contemplate:
- In case your knowledge is nominal, then you should utilize a categorical colour scale, which depends solely on colour hue.
- For quantitative knowledge, you’ll must make two extra choices: 1) whether or not your scale will probably be sequential or divergent (i.e., if it’s going to use one or two hues), and a couple of) whether or not your scale will probably be steady or divided into lessons.
Thus, there are 5 colour scales at our disposal, all of which we’ll talk about under: 1) sequential and unclassed, 2) sequential and classed, 3) divergent and unclassed, 4) divergent and classed, and 5) categorical [1].
Sequential scales (one hue) are helpful for visualizing numerical values that go from low to excessive. Divergent scales can show useful when values go from destructive to constructive or when the designer needs to emphasise some distinction between the colours on two ends of the size.
In fact, these are simply normal guidelines. Various kinds of scales are finest relying on the actual visualization, and generally multiple can work.
Sequential and unclassed
The next map makes use of a sequential, unclassed colour scale as an instance the fraction of Australians that recognized as Anglican on the time of the 2011 census. We are able to see {that a} single hue, inexperienced, will increase in worth from gentle to darkish. Since there is just one colour, there isn’t any divergence, and because the scale is steady, there aren’t any lessons.
Sequential and classed
In distinction to the visualization above, we will see that the map of america under has discrete lessons which range the colour worth. It’s nonetheless sequential, as solely a pink hue is used. The colour worth is elevated as the proportion of adults of their early 20s inside a county will increase.
Divergent, classed and unclassed
Divergent scales are a bit trickier to grasp, so let’s contemplate each varieties collectively in a comparative instance. In doing so, we’ll additionally see the completely different benefits of classed and unclassed scales.
The 2 charts under have been generated in Python utilizing mock knowledge. The info consists of the next visible representations (i.e., visible encoding channels):
- The x-axis consists of a quantity representing retailer location.
- The y-axis represents the months of the 12 months.
- The colour represents a “buyer satisfaction rating” collected by the fictional shops by way of month-to-month surveys.
The classed vs. unclassed side of those visualizations is very similar to within the sequential scales above. Within the left (unclassed) scale, the total totality of values is represented, whereas in the fitting (classed) one, colours signify grouped buckets of values. The left visualization supplies extra precision, however the fitting one is less complicated to interpret and apply.
The divergent side of those scales is extra convoluted. Let’s break it down:
- The divergent scale right here makes use of two colours: pink and inexperienced (not probably the most accessible colours on the planet, as we’ll see later within the article).
- The impartial, white colour (or the 2 gentle colours within the classed scale) represents a logical “center level” within the knowledge, which on this case is the worth 0.
- This center level is essential, because it makes for a scenario the place a divergent scale lends itself naturally to the information. It makes little sense to make use of multiple colour if values are simply transferring in a single route with out a significant middle.
Categorical
The ultimate, and arguably most simple, colour scale sort is a categorical one. The chart under, which reveals authorities funding breakdowns throughout numerous nations, supplies a transparent instance.
You probably have been being attentive to the rules mentioned on this chapter this far, you’ll seemingly discover that this isn’t a very well-designed knowledge visualization. It will get the final level throughout, however there are just a few too many various colours, leading to a complicated ultimate design.
That mentioned, it’s an efficient use of a categorical scale, appropriately making use of this scale sort to nominal knowledge (knowledge that has distinct, unordered classes). A typical mistake in knowledge visualization—and one it’s best to take care to keep away from—is utilizing a categorical scale with a number of completely different hues when your knowledge reveals a transparent numerical enhance or lower. In these conditions, check with one of many colour scales mentioned above, relying in your particular knowledge.
That sums up the fundamentals of colour scales that you will need to know to have interaction in efficient knowledge visualization. To conclude, let’s take a look at a pair extra suggestions for utilizing colour effectively.
(Don’t) Use Colour Redundantly
It may be tempting to make use of colour in a visualization when it’s not wanted. For instance, it’s fairly frequent to see bar graphs with clear x-axis labels to tell apart the bars that also have bars of various colours.
This isn’t unsuitable, however it could be unnecessary. If there are only some classes they usually’re linked with different visualizations, by all means use colour to offer an extra visible cue. Nevertheless, if the visualization features high-quality with out it, then don’t power it.
Normally, any and all redundant encodings (representations) must be prevented except they supply some extra ease of interpretation for the viewer. It’s both wasteful, as that encoding channel might be used for a unique variable, or complicated, because the viewer is left to find out if the extra encoding is depicting one thing that’s going over their head.
Make Colour Palettes Accessible
This final level it brief, however extremely essential. Don’t assume that just because you’ll be able to distinguish among the many colours in a visualization, so can everybody else. Information visualizations must be accessibly by everybody, together with individuals who have numerous forms of colorblindness [2].
For instance, contemplate the Python visualizations within the part on divergent colour scales above. Do you assume somebody with red-green colour blindness will be capable to interpret it appropriately? Unlikely.
Fortunately, we don’t must do an excessive amount of additional work to make sure our visualizations are accessible. There are numerous on-line instruments [3, 4, 5] which robotically verify the accessibility of your chosen colour palettes. Some will even show you how to generate them. Reap the benefits of them to make your visualizations as accessible as doable.
Remaining Ideas
Congratulations! With the third article on this collection, you could have discovered the important rules you’ll need to design compelling knowledge visualizations. Within the articles to come back, we’ll lastly begin designing and constructing our personal visualizations! Till then.
References
[1] https://blog.datawrapper.de/which-color-scale-to-use-in-data-vis/
[2] https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-vision-deficiency
[3] https://coolors.co/contrast-checker/112a46-acc8e5
[4] https://webaim.org/resources/contrastchecker/
[5] https://accessibleweb.com/color-contrast-checker/
