That is the third article in my information visualization collection. See Half 1: “Information Visualization Defined: What It Is and Why It Issues” and Half 2: “Information 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 standard optical phantasm illustrates an essential truth to think about when designing information visualizations: Poorly chosen coloration combos can trick the human eye. For a whole therapy of coloration, I would want to delve into physiological particulars of the human eye and find out how we truly “see” coloration.
Nevertheless, seeing as this isn’t an optometry article, I’ll as an alternative give attention to the basics of coloration utilization that you’ll want to construct clear information visualizations.
The Distinction Between Colour Hue and Colour Worth
Once I launched visible encoding channels within the earlier article, I offered two totally different channels associated to paint: hue and worth. Allow us to focus on these formally.
Colour hue is what you typically consider while you hear the phrase “coloration.” Pink, inexperienced, blue, pink, yellow, and so forth. are all totally different hues. Colour worth, however, refers back to the “lightness” of a person hue. The picture under illustrates totally different values of the rainbow colours, displaying how the identical hue can fluctuate significantly in lightness/saturation:
Whereas each of those will be efficient visible encodings (see my earlier article on this collection for an in depth dialogue on visible encodings), coloration worth has one notable benefit over hue: It may nonetheless be perceived if a visualization is printed in grayscale.
Sorts of Colour Scales
If you wish to use coloration as a visible encoding, it’s essential to begin by selecting a coloration scale. In doing so, there are a number of traits it’s essential to think about:
- In case your information is nominal, then you should utilize a categorical coloration scale, which depends solely on coloration hue.
- For quantitative information, you’ll have to make two extra selections: 1) whether or not your scale might be sequential or divergent (i.e., if it’ll use one or two hues), and a couple of) whether or not your scale might be steady or divided into courses.
Thus, there are 5 coloration scales at our disposal, all of which we are going to 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 damaging to constructive or when the designer needs to emphasise some distinction between the colours on two ends of the size.
After all, these are simply normal guidelines. Various kinds 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 coloration scale as an 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 coloration, there isn’t a divergence, and for the reason that scale is steady, there are not any courses.
Sequential and classed
In distinction to the visualization above, we are able to see that the map of the USA under has discrete courses which fluctuate 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 think about each sorts 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 have been generated in Python utilizing mock information. 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 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 similar to within the sequential scales above. Within the left (unclassed) scale, the total totality of values is represented, whereas in the proper (classed) one, colours symbolize grouped buckets of values. The left visualization supplies extra precision, however the proper one is less complicated 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: purple and inexperienced (not probably the most accessible colours on the planet, as we are going to see later within the article).
- The impartial, white coloration (or the 2 mild 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 vital, because it makes for a state of affairs the place a divergent scale lends itself naturally to the info. It makes little sense to make use of multiple coloration if values are simply shifting in a single path with out a significant middle.
Categorical
The ultimate, and arguably most simple, coloration scale sort is a categorical one. The chart under, which reveals authorities funding breakdowns throughout numerous international locations, supplies a transparent instance.
In case you have been being attentive to the ideas mentioned on this chapter this far, you’ll seemingly discover that this isn’t a very well-designed information visualization. It will get the overall level throughout, however there are a number of too many alternative colours, leading to a complicated closing design.
That mentioned, it’s an efficient use of a categorical scale, accurately making use of this scale sort to nominal information (information that has distinct, unordered classes). A standard mistake in information visualization—and one it’s best to take care to keep away from—is utilizing a categorical scale with a number of totally different hues when your information reveals a transparent numerical enhance or lower. In these conditions, discuss with one of many coloration scales mentioned above, relying in your particular information.
That sums up the fundamentals of coloration scales that you could know to have interaction in efficient information visualization. To conclude, let’s have a look at a pair extra suggestions for utilizing coloration nicely.
(Don’t) Use Colour Redundantly
It may be tempting to make use of coloration 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 fallacious, however it could be pointless. If there are only some classes they usually’re linked with different visualizations, by all means use coloration to offer a further visible cue. Nevertheless, if the visualization capabilities high quality with out it, then don’t pressure it.
Usually, any and all redundant encodings (representations) needs to be prevented until they supply some extra ease of interpretation for the viewer. It’s both wasteful, as that encoding channel could possibly be used for a special 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 may 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 kinds of colorblindness [2].
For instance, think about the Python visualizations within the part on divergent coloration scales above. Do you suppose somebody with red-green coloration blindness will be capable of interpret it accurately? Unlikely.
Fortunately, we don’t have to 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 test the accessibility of your chosen coloration palettes. Some will even enable you to generate them. Benefit from them to make your visualizations as accessible as doable.
Remaining Ideas
Congratulations! With the third article on this collection, you’ve discovered the important ideas you will have to design compelling information visualizations. Within the articles to come back, we are going to 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/
