That is the third article in my knowledge visualization sequence. See Half 1: “Knowledge Visualization Defined: What It Is and Why It Issues” and Half 2: “Knowledge Visualization Defined: An Introduction to Visible Variables.”
do you see within the image under?
Most individuals see 4: white, inexperienced, and two totally different shades of pinkish-red. In actuality, these two shades are precisely the identical; there are solely three colours within the picture.
This widespread optical phantasm illustrates an essential truth to contemplate when designing knowledge visualizations: Poorly chosen colour combos can trick the human eye. For a whole therapy of colour, I would wish to delve into physiological particulars of the human eye and find out how we really “see” colour.
Nevertheless, seeing as this isn’t an optometry article, I’ll as a substitute deal with the basics of colour utilization that you’ll want to construct clear knowledge visualizations.
The Distinction Between Shade Hue and Shade Worth
After I launched visible encoding channels within the earlier article, I offered two totally different channels associated to paint: hue and worth. Allow us to talk about these formally.
Shade hue is what you usually consider if you hear the phrase “colour.” Crimson, inexperienced, blue, pink, yellow, and so on. are all totally different hues. Shade worth, then again, refers back to the “lightness” of a person hue. The picture under illustrates totally different values of the rainbow colours, exhibiting how the identical hue can differ tremendously in lightness/saturation:
Whereas each of those may be efficient visible encodings (see my earlier article on this sequence for an in depth dialogue on visible encodings), colour worth has one notable benefit over hue: It will probably nonetheless be perceived if a visualization is printed in grayscale.
Sorts of Shade Scales
If you wish to use colour as a visible encoding, it’s essential to begin by selecting a colour scale. In doing so, there are a couple of traits it’s essential to take into account:
- 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 selections: 1) whether or not your scale will likely be sequential or divergent (i.e., if it would use one or two hues), and a pair of) whether or not your scale will likely 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 adverse to optimistic or when the designer needs to emphasise some distinction between the colours on two ends of the size.
After all, these are simply basic guidelines. Several types of scales are greatest relying on the actual visualization, and typically multiple can work.
Sequential and unclassed
The next map makes use of a sequential, unclassed colour scale for example 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 mild to darkish. Since there is just one colour, there isn’t a 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 the US 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 share 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 take into account each varieties collectively in a comparative instance. In doing so, we’ll additionally see the totally different benefits of classed and unclassed scales.
The 2 charts under had 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 like within the sequential scales above. Within the left (unclassed) scale, the total totality of values is represented, whereas in the precise (classed) one, colours signify grouped buckets of values. The left visualization offers extra precision, however the precise 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: crimson and inexperienced (not essentially the most accessible colours on this planet, as we’ll see later within the article).
- The impartial, white colour (or the 2 mild 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 vital, 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 and not using a significant heart.
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, offers a transparent instance.
In case you have been being attentive to the ideas mentioned on this chapter this far, you’ll doubtless discover that this isn’t a very well-designed knowledge visualization. It will get the overall level throughout, however there are a couple of too many alternative colours, leading to a complicated last design.
That stated, 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 standard mistake in knowledge visualization—and one you need to take care to keep away from—is utilizing a categorical scale with a number of totally different hues when your knowledge reveals a transparent numerical improve 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 have to know to interact in efficient knowledge visualization. To conclude, let’s have a look at a pair extra ideas for utilizing colour properly.
(Don’t) Use Shade Redundantly
It may be tempting to make use of colour in a visualization when it isn’t wanted. For instance, it’s fairly widespread to see bar graphs with clear x-axis labels to tell apart the bars that also have bars of various colours.
This isn’t fallacious, however it might be pointless. If there are just a few classes and so they’re linked with different visualizations, by all means use colour to offer a further visible cue. Nevertheless, if the visualization features high quality with out it, then don’t drive it.
Generally, any and all redundant encodings (representations) must be averted except they supply some extra ease of interpretation for the viewer. It’s both wasteful, as that encoding channel may very well be used for a distinct 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 Shade Palettes Accessible
This final level it quick, however extremely essential. Don’t assume that just because you may distinguish among the many colours in a visualization, so can everybody else. Knowledge visualizations must be accessibly by everybody, together with individuals who have numerous sorts of colorblindness [2].
For instance, take into account the Python visualizations within the part on divergent colour scales above. Do you assume somebody with red-green colour blindness will have the ability to 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 robotically examine the accessibility of your chosen colour palettes. Some will even enable you generate them. Make the most of them to make your visualizations as accessible as attainable.
Ultimate Ideas
Congratulations! With the third article on this sequence, you might have discovered the important ideas you will want to design compelling knowledge visualizations. Within the articles to return, we’ll lastly begin designing and constructing our personal visualizations! Till then.
References
[1] https://weblog.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/assets/contrastchecker/
[5] https://accessibleweb.com/color-contrast-checker/
