That is the third article in my information visualization sequence. 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 well-liked optical phantasm illustrates an necessary reality to contemplate when designing information visualizations: Poorly chosen colour mixtures can trick the human eye. For a whole remedy of colour, I would wish to delve into physiological particulars of the human eye and find out how we truly “see” colour.
Nonetheless, seeing as this isn’t an optometry article, I’ll as an alternative deal with the basics of colour utilization that you will want to construct clear information visualizations.
The Distinction Between Coloration Hue and Coloration Worth
Once I launched visible encoding channels within the previous article, I introduced two completely different channels associated to paint: hue and worth. Allow us to focus on these formally.
Coloration hue is what you usually consider while you hear the phrase “colour.” Crimson, inexperienced, blue, pink, yellow, and many others. are all completely different hues. Coloration 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 differ enormously in lightness/saturation:
Whereas each of those might 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 might nonetheless be perceived if a visualization is printed in grayscale.
Kinds of Coloration Scales
If you wish to use colour as a visible encoding, it is advisable to begin by selecting a colour scale. In doing so, there are a couple of traits it is advisable to think about:
- In case your information is nominal, then you need to use a categorical colour scale, which depends solely on colour hue.
- For quantitative information, you’ll must make two further choices: 1) whether or not your scale will probably be sequential or divergent (i.e., if it is going to use one or two hues), and a pair 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 focus on 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 dimensions.
After all, these are simply common guidelines. Several types 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 for instance the fraction of Australians that recognized as Anglican on the time of the 2011 census. We will 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 are not any lessons.
Sequential and classed
In distinction to the visualization above, we are able to see that the map of america under has discrete lessons which differ 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 think about 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 information. The information 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 yr.
- The colour represents a “buyer satisfaction rating” collected by the fictional shops through month-to-month surveys.
The classed vs. unclassed facet of those visualizations is very like within the sequential scales above. Within the left (unclassed) scale, the complete totality of values is represented, whereas in the appropriate (classed) one, colours characterize grouped buckets of values. The left visualization offers extra precision, however the appropriate one is simpler to interpret and apply.
The divergent facet 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 this 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 information, 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 info. It makes little sense to make use of multiple colour if values are simply transferring in a single path with out a significant heart.
Categorical
The ultimate, and arguably most simple, colour scale kind is a categorical one. The chart under, which reveals authorities funding breakdowns throughout numerous international locations, offers a transparent instance.
When you’ve got been taking note of the rules mentioned on this chapter this far, you’ll doubtless discover that this isn’t a very well-designed information visualization. It will get the overall level throughout, however there are a couple of 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 kind to nominal information (information that has distinct, unordered classes). A standard mistake in information visualization—and one you must take care to keep away from—is utilizing a categorical scale with a number of completely different hues when your information reveals a transparent numerical enhance or lower. In these conditions, consult with one of many colour scales mentioned above, relying in your particular information.
That sums up the fundamentals of colour scales that you have to know to interact in efficient information visualization. To conclude, let’s have a look at a pair extra ideas for utilizing colour nicely.
(Don’t) Use Coloration Redundantly
It may be tempting to make use of colour in a visualization when it isn’t 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 mistaken, however it might be useless. If there are just a few classes and so they’re linked with different visualizations, by all means use colour to supply an extra visible cue. Nonetheless, if the visualization capabilities high quality with out it, then don’t pressure it.
Typically, any and all redundant encodings (representations) needs to be prevented except they supply some further 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 Coloration Palettes Accessible
This final level it brief, however extremely necessary. Don’t assume that just because you possibly can distinguish among the many colours in a visualization, so can everybody else. Information visualizations needs to be accessibly by everybody, together with individuals who have numerous forms of colorblindness [2].
For instance, think about the Python visualizations within the part on divergent colour scales above. Do you assume somebody with red-green colour blindness will be capable of interpret it appropriately? Unlikely.
Fortunately, we don’t must do an excessive amount of further work to make sure our visualizations are accessible. There are numerous on-line instruments [3, 4, 5] which routinely verify the accessibility of your chosen colour palettes. Some will even show you how to generate them. Make the most of them to make your visualizations as accessible as doable.
Closing Ideas
Congratulations! With the third article on this sequence, you could have realized the important rules you will want to design compelling information visualizations. Within the articles to return, 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/
