That is the third article in my information visualization collection. 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 beneath?
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 in style optical phantasm illustrates an necessary reality to think about when designing information visualizations: Poorly chosen coloration mixtures can trick the human eye. For a whole therapy of coloration, I would wish to delve into physiological particulars of the human eye and learn the way we really “see” coloration.
Nonetheless, seeing as this isn’t an optometry article, I’ll as an alternative give attention to the basics of coloration utilization that you will want to construct clear information visualizations.
The Distinction Between Colour Hue and Colour Worth
After I launched visible encoding channels within the earlier article, I offered two completely different channels associated to paint: hue and worth. Allow us to focus on these formally.
Colour hue is what you typically consider whenever you hear the phrase “coloration.” Pink, inexperienced, blue, pink, yellow, and so forth. are all completely different hues. Colour worth, however, refers back to the “lightness” of a person hue. The picture beneath illustrates completely different values of the rainbow colours, displaying how the identical hue can fluctuate vastly in lightness/saturation:
Whereas each of those could 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 might probably nonetheless be perceived if a visualization is printed in grayscale.
Kinds 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 couple of traits it’s essential to contemplate:
- 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 can use one or two hues), and a couple of) whether or not your scale might be steady or divided into lessons.
Thus, there are 5 coloration scales at our disposal, all of which we are going to focus on beneath: 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 dimensions.
In fact, these are simply common guidelines. Several types of scales are greatest relying on the actual visualization, and typically a couple of can work.
Sequential and unclassed
The next map makes use of a sequential, unclassed coloration scale as an 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 coloration, 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 will see that the map of america beneath has discrete lessons which fluctuate 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 sorts collectively in a comparative instance. In doing so, we’ll additionally see the completely different benefits of classed and unclassed scales.
The 2 charts beneath 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 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 fitting (classed) one, colours characterize 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: 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 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 state of affairs the place a divergent scale lends itself naturally to the info. It makes little sense to make use of a couple of coloration if values are simply shifting in a single course with out a significant middle.
Categorical
The ultimate, and arguably most simple, coloration scale sort is a categorical one. The chart beneath, which exhibits authorities funding breakdowns throughout numerous nations, supplies a transparent instance.
If in case you have been being attentive to the rules mentioned on this chapter this far, you’ll possible discover that this isn’t a very well-designed information visualization. It will get the final level throughout, however there are a couple of too many various colours, leading to a complicated remaining 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 completely different hues when your information exhibits a transparent numerical enhance or lower. In these conditions, seek advice from one of many coloration scales mentioned above, relying in your particular information.
That sums up the fundamentals of coloration scales that you have to know to have interaction in efficient information visualization. To conclude, let’s take 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 isn’t wanted. For instance, it’s fairly frequent to see bar graphs with clear x-axis labels to differentiate the bars that also have bars of various colours.
This isn’t fallacious, however it could be pointless. If there are just a few classes they usually’re linked with different visualizations, by all means use coloration to supply an extra visible cue. Nonetheless, if the visualization features superb with out it, then don’t pressure it.
Typically, any and all redundant encodings (representations) must 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 quick, however extremely necessary. Don’t assume that just because you’ll be able to 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 kinds of colorblindness [2].
For instance, contemplate the Python visualizations within the part on divergent coloration scales above. Do you assume somebody with red-green coloration blindness will have the ability to interpret it accurately? Unlikely.
Fortunately, we don’t have to do an excessive amount of additional work to make sure our visualizations are accessible. There are numerous on-line instruments [3, 4, 5] which mechanically test the accessibility of your chosen coloration palettes. Some will even enable you generate them. Benefit from them to make your visualizations as accessible as doable.
Ultimate Ideas
Congratulations! With the third article on this collection, you will have realized the important rules you have to 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/sources/contrastchecker/
[5] https://accessibleweb.com/color-contrast-checker/
