IBM did research back in the 90s on perceptually-based colormaps and how to best represent various types of data within the color dimensions of luminescence, saturation and hue [1]. For exmpale, they found that,
(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 colormap which has a strong luminance variation across the data range.
(3) For interval and ratio data, both luminance- and saturation-varying colormaps 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.
As a result, we have the colormap Viridis [0] [1], which is universally one of the best options available. Odd to see a data viz article about color choice in 2018 that doesn't mention Viridis.
And yesterday a paper explaining the process of creating Cividis, an even more CVD friendly iteration, was published on plos.org[0]. It's already in Matplotlib, and available for R[1].
(I submitted it yesterday but it didn't get much traction[2], which makes sense given how specific it is)
I looked at the paper, and wouldn't really call cividis an iteration of viridis. It's more of a conversion of viridis to "CVD colorspace" (can you say that?), with a few tweaks applied.
Well, from my CVD point of view it looks like one ;). It's largely the same except with better color contrast and ability to distinguish detail. But I understand it actually is missing a significant chunk of green hues for the non-colorblind.
Odd indeed, especially since it has all the other useful tools one could use to create palettes. Maybe the target audience is creative people, not us just reusing ad nauseum the same effective palette.
This is true. But, unfortunately, it is the current standard for many applications.
For example: although a luminance-varying colormap is theoretically better, if my doctor has been analyzing MRI scans using the jet palette for 30 years, I want him to use that color palette when he analyzes mine, instead of using a new one.
I have similar problems in my work, when representing crystallographic textures. The standard way of representing them has multiple problems (not only color choices, but also the use of Euler angles to represent orientations is a huge headache). However, if I publish a paper using a different (objectively better) method, nobody will understand my figures. I have tried including both, but I think almost everybody just ignores the new ones.
We have been fighting that fight for a while in viz. Spreading the word already in 2012 in "Rainbow colormaps - What are they good for? Absolutely nothing!" [0]
That article/post reached some audience and was referenced quite well at the time. Keep spreading the word I guess.
I agree with all of this.
I encountered one problem when using luminance (either alone or in combination with color) to encode categorical data though:
Luminance inevitably conveys a certain ordering.
A dark black line will be automatically identified as more as important than a light grey line.
This can be desired (and abused), but often I want to present my categories as neutral as possible. I experimented with balancing lightness with other features (like line width) but not with much success.
Just to make this even more tricky - please be aware of the small but significant segment of your readers who are likely colourblind to some extent! I have quite severe red/green difficulties and it renders many visualisations useless.
"Viz Palette also makes it easy to check if your colors can be distinguished by colorblind people. A browser extension like Spectrum, an online tool like Coblis or an app like Sim Daltonism can simulate the colors as seen by people with different types of colorblindness, too. In Datawrapper, we integrated a color blindness simulator, so no external tool is necessary."
There's a free tool called Color Oracle that makes it very easy to apply color filters to your computer's display in order to simulate the different kinds of dichromatic colorblindness.
This is a great article with a lot of useful resources. One thing I like in theory, but feel pain doing in practice, is generating color palettes for each new web project. There doesn't seem to be a good tool to just spit out a full blown palette for an app much the way bootstrap or other UI kits give you where you have not only primary and accent colors, but shades for hover, disabled states, a "rainbow" of colors for info, warning, success, etc. I really enjoyed seeing the WWDC presentations[1][2] on dark mode. I think their work does a good job of moving this idea forward for Apple devs, but for the web it would be awesome to see something that generates palettes for CSS (and pre-processors) and JS so you can standardize colors in a similar way.
Also, these two are from the "point of significance" column of the said journal which is very informative and good quality. And the column basically covers how to make good figures and present data
I produce graphical reporting occasionally at my job (manufacturing plant).
Around here a lot of People still like to print physical copies of the morning reports. One thing I've found is that although colors may be distinguishable from each other when viewed on a screen on a print out similar colors all blur together for this reason I like to make sure there is a high contrast between neighboring regions (especially on things like stacked bar charts).
Other big issue is Overhead projectors. It's pretty common for people to review graphs in morning meetings and similar. A lot of projectors are low resolution and also get used in places like control rooms with poor ambient lighting so you can have similar problem with distinguishing color hues.
Using patterns (cross hatching etc) as well as colors also helps distinguish regions from each other.
If you look at industrial control software how dials gauges and the like are represented you can get some good tips on best practices and how to make high contrast easily distinguishable graphics. These things are designed for maximum readability.
Love this idea. The white glow around the white box is pretty jarring and your subtitles don't have any different formatting ("newest ads" should be bold or bigger). Spacing is inconsistent as well.
For the viz, at least on chipotle, the colors don't actually show anything? All of calories is green and all of protein is red? I'd just toss it in excel and use their default "high is green, low is red" on each. Then default sort by the most efficient foods. Then maybe test out "high is green, low is white" for price, so we can easily see efficient foods that are cheap, without making expensive foods look explicitly bad.
Chiptole logo needs to be resized. You could try a bar chart also.
Indeed. Kudos to the author for stressing the point that there are colour blind (well, chromatically challenged) people out there.
If I'd had a dime every time I stared blankly at a data visualisation where accessibility hadn't been a consideration, I'd be sipping margaritas on my own private beach by now...
To me color knowledge is akin to other cultural backgrounds one (who works in any slightly artistic environment such as UI/UX) must have a priori, not a posteriori of the work. It doesn't add up to your TODO list, that's what I am saying.
PS: image optimization should be done automatically IMHO
To expand beyond color, Christopher Healey has an extensive report on perceptions of visualizations and the different elements you can use to identify things [1].
(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 colormap which has a strong luminance variation across the data range.
(3) For interval and ratio data, both luminance- and saturation-varying colormaps 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] https://www.research.ibm.com/people/l/lloydt/color/color.HTM
or as pdf:
https://github.com/frankMilde/interesting-reads/blob/master/...