How to pick more beautiful colors for your data visualizations (2020)
blog.datawrapper.de
blog.datawrapper.de
This mistake is repeated in several places. But there's an example of where it's done well just below the heading "Avoid bright, saturated colors", where the colors suggest a relationship that in fact does exist and is meaningful (Asia is in blue).
And note that this isn't about banning similar colors from use. It's about what goes wrong when they're used in proximity, and exclusively so. (By chance a couple times in a big graphic is fine, since there are many places they won't be together, so no real implied relationship exists.) Of course using similar colors exclusively distant from each other is a straight-up confusion risk, so it's still an issue.
There are quite good color maps for presenting scientific data which takes most of your points into account, I personally use the „scientific color maps” for representation: https://www.fabiocrameri.ch/colourmaps/
I think a simple piece of advice (stolen from Tuft) is to not use colors unless you really need to. If you can find a way to present the same information in black and white - it's generally going to be better. The next step up.. If you need to highlight somethings, maybe just use one color (ex: red). Don't bring out the whole pastel bile rainbow immediately. And try to stick to consistent colors to convey meaning
For color gradients I find these incredibly useful (though the license/attribution-requirement is kinda annoying)
https://blog.datawrapper.de/colorblindness-part1/ https://blog.datawrapper.de/colorblindness-part2/ https://blog.datawrapper.de/colorblindness-part3/
A milder symptom of the issue is that even for people with good enough screens setup reasonably well, there will be differences between them that compound the fact that we all perceive what is good in colour selections slightly differently to become an obvious example of the adage “you can't please everyone all the time”.
> the license/attribution-requirement is kinda annoying
There might be circumstances where it is a mild inconvenience, but I don't see the attribution clause of CC-BY to be at all arduous. Though I would suggest they change the text to explicitly mention v4 (the link does, but the text doesn't) – earlier versions of the BY licences had an accidental trap that could be used by unpleasantly by legal trolls in some jurisdictions (ref: https://creativecommons.org/2022/02/08/copyleft-trolls/)
Say I made a poster at a conference and a small graph uses his colors. Where am I to put this attribution? Can you imagine if every color you used required an attribution ? Thankgod Microsoft doesn't require it in every PowerPoint presentation
I find the whole thing sorta legalistic and inhuman. You attribute when it's relevant. If you're extending something then I think it's the decent thing to attribute who's work you're basing it on, when possible relevant and convenient. Having stuff like pasting in "OpenStreetMap" in the corner of every single map online just makes the world uglier and doesn't help anyone. (not to mention it doesn't even give exposure to the people who mapped the area you're showing)
Id gladly pay $10 to the guy so I never have to use an attribution
EDIT: Just to illustrate the horror. There is an R package with these colors: https://cran.r-project.org/web/packages/cetcolor/cetcolor.pd...
First time I've seen a library with "License CC BY-SA 4.0". A library that requires attribution in whatever it creates.. 0_0
My reading is that the attribution is not needed for the library, but for the output. It isn't “creating” that output as such, just regurgitating the original colour map data and the attribution needed if for that data.
But if the attribution requirement is for the library as well as the information it presents:
> Id gladly pay $10 to the guy so I never have to use an attribution
Maybe that is an option. Or if not, as with all licences we can't/won't agree to, there are other things you could use instead or even produce your own from first principles.
Licenses that require the output to have attribution? I've honestly never seen it before. Next we'll have fonts that require attributions.. The closest thing I've seen is some programs stipulating the output must not be used for profit. Maybe horrifying is hyperbolic, but it's honestly quite sneaky ... and I'd never notice something like that. CC BY-SA 4.0 isn't really a code license.. and if I saw that I'd not even be sure what that means. My initial impression was it'd mean you can copy, modify and redistribute the source code - as long as you attribute it?
"or even produce your own from first principles"
Not a bad idea though probably not so straightforward. Doing a quick websearch, I'm surprised nobody seems to have reproduced it
EDIT: Searching a bit more.. it seems people just use these colors without attribution :/
Shades of grey colorized would result in the same pastel colors you seem to dislike, because grey, by definition, isn't "full brightness".
That's a great description that goes with my (conspiracy?) theory: Popular media intended for general consumption (which are the exampes the author shows) uses these colours not because they're better for comprehension, but because a big segment of the general public is afraid of data and charts, and these colours let the data fade away into the background for those folks.
The point is to subtly say "it's okay if you don't get this data, this isn't really important" - a compromise between omitting the data altogether and giving it full importance and clarity.
Funny, read your comment as my copy of Tufte's VDoQI is open to page 154:
"Color often generates graphical puzzles. Despite our experiences with the spectrum in science textbooks and rainbows, the mind's eye doe not readily give a visual ordering to colors, except possibly for red to reflect higher levels than other levels [...] Attempts to give colors an order result in those verbal decoders and the mumbling of little mental phrases [...] Because they do have a natural visual hierarchy, varying shades of gray show varying quantities better than color."
(1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad.
(2) The mechanisms in human vision responsible for high spatial frequency information processing are luminance channels. If the data to be represented have high spatial frequency, use a color map which has a strong luminance variation across the data range.
(3) For interval and ratio data, both luminance- and saturation-varying color maps should produce the effect of having equal steps in data value correspond to equal perceptual steps, but the first will be most effective for high spatial frequency data variations and the second will be most effective for low spatial frequency variations.
===
[1] the original link got removed from IBMs website. Back in the day it was under
https://www.research.ibm.com/people/l/lloydt/color/color.HTM
A pdf copy is here:
https://github.com/frankMilde/interesting-reads/blob/master/...
This is very good advice. Generally, hue expresses difference in kind whilst lightness and saturation expresses difference in degree. This is beautifully demonstrated in Nault's study of how children read maps.
Nault, W.H.: Children’s Map Reading Abilities. Geographic Society of Chicago, Newsletter, III (1967)
the study sounds interesting though
I looked for one but could not find. This is unusual for me as I prefer to have the full text of anything I cite.
For me (someone who has an interest in computational aesthetics) the value of such studies is that they confirm what we already know. I explain the key difference between lightness and hue/saturation to my student in this way:
==> Lightness evolved as a matter of necessity. Any light-dwelling creature without it will quickly become food. This accounts for the co-evolution of so many eye-types (fly, mammal, octopus' etc... all structurally distinct).
==> In primates, Hue/lightness vision evolved in response to the rare treat of fruit-sourced carbohydrates.
In other words: lightness is a requisite of survival, hue/saturation is a pleasurable elaboration. It is likely for this reason that in a traditional art school education, you are taught lightness before colour.
> It's pretty weird you used the exact same reference with the exact same format as your own earlier comment in this 2021 submission https://news.ycombinator.com/item?id=26489887
I had completely forgotten that I had referenced this before. Likely the similarity in format is a result of my having copy/pasted from my co-authored book 'Computational Approaches in the Transfer of Aesthetic Values from Paintings to Photographs'. In this book I address similar subject to the ones raise by the OP.
It might be difficult for data to look good and be colour-blind accessible at the same time; but when your goal is to inform people then I think accessibility should take a little priority.
This is a good article, it gives a lot of good example of accessible design that (i presume) still looks really good.
That’s strange because I care a lot about color, datavis, and generally agree with these types of articles.
If you averaged the before and after examples (allowing that the "average" of colours is a complicated subject in itself), they would probably be pretty good.
It's wonderful that what used to be called a genteel amber & teal, is now known as blorange horror.
Maybe I’ve just adapted to the current zeitgeist and conventions of data vis I come across in e.g. Tableau or the Economist.
Case in point:
https://blog.datawrapper.de/wp-content/uploads/2021/01/full-...
Which slice of the pie represents Japan? Probably the leftmost, but they happen to be few and ordered, so it's easy to infer that.
Now imagine this is a map, not a pie chart and you don't know where Japan is. Pretty hard to tell those very similar blues apart.
One way out of this is to use two lightness levels per hue and sufficiently distant colours:
https://www.researchgate.net/profile/Md-Sariful-Islam-6/publ...
Like most visual asthetic efforts, when in doubt (and that's most of us), "under-designing" is better than over-designing. And there's certainly no shame in borrowing a color palette from a previous effort that just worked.
If you find yourself wanting to apply creativity to your data visualizations, put down the gun (i.e., mouse) and go for a walk.
p.s. Also, don't forget to pick the right type of chart for what's to be communicated. We've all seen too many instances of "Ooooh. *That's* what's wanting to be communicated??!!"
Taupe, salmon and sage may not be the best choices.
Just sayin….
> Just convert your colors to black & white
I agree that it's a good "generic, professional" set of colors, but that's usually not the ideal goal. Know your audience, and you can do much better. Even something simple like "use the company color set" is probably going to get much better reception. If your manager likes bright and colorful, you shouldn't go with pastels.