Which color scale to use when visualizing data | Hacker News Reader

Which color scale to use when visualizing data

blog.datawrapper.de

234 pointsingve44 comments

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 exampale, 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 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] https://www.research.ibm.com/people/l/lloydt/color/color.HTM

or as pdf:

https://github.com/frankMilde/interesting-reads/blob/master/...

For the pdf, did you mean to link to:

https://github.com/frankMilde/interesting-reads/raw/master/i...

Your second link is somehow broken, I think it was truncated during copy-paste. Here's the PDF link: https://github.com/frankMilde/interesting-reads/blob/master/...

The first link doesn't seem to have any content and the second link should be https://github.com/frankMilde/interesting-reads/blob/master/...

> (1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad.

Specifically the pdf claims that a naive rainbow color map is bad and references the work of S.S. Stevens for "hue was not a good dimension for encoding magnitude information"

Here's a gallery [1] of perceptually uniform colour maps, both lightness-varying and isoluminant (the latter are particularly useful in conjuction with hillshade filters). The maps are present in many libraries / languages.

===

[1] https://www.colorcet.com/gallery.html

I was just watching a seminar about color grading in portrait photography and it also talked about luminosity, how it's processed faster than color, and how to account for it while color grading.

For artistic affect, it may be preferred to have near equal luminosity throughout the image so that the luminance variance doesn't allow you to "make up your mind" about the image before processing the color.

Interesting to so soon come across related studies without searching.

I am interested in what you are saying. If I can ask for a favor, could you maybe link to examples of two different portraits: one with uniform luminosity and one without?

I don’t really know enough about color theory and the terminology to imagine what you are describing. I don’t even know enough to properly search for example images myself. Hence the request. :-)

Here's a link to the point in the video where this concept was discussed. It references two classical art paintings, and two photographs from the presenter.

https://youtu.be/mC8ol2-V7Ck?t=2116

That’s awesome. Thank you!

Nit: "luminosity" is an incorrect term to use here. https://en.wikipedia.org/wiki/Luminosity

You probably mean "lightness", but you might mean "luminance" or "brightness", depending on the details. https://en.wikipedia.org/wiki/Lightness https://en.wikipedia.org/wiki/Luminance

Thanks, yea meant "luminance" throughout.

There’s a great talk [1] on how SciPy chose their new default colormap viridis to replace the rainbow colored former default “jet”. Turns out that there have been good studies on how the wrong colormap can lead to bad decisions in medicine, and designing a replacement took a lot of careful work.

[1] https://m.youtube.com/watch?v=xAoljeRJ3lU

I ran into this once when I tried to replicate a virtualization with seaborn using the jet colormap: https://github.com/mwaskom/seaborn/blob/master/seaborn/palet...

Most of the advice on how to make a chart readable for the colourblind also helps keep it intelligible when converted to greyscale. Unless colour is vital to communicating something with a chart, I always check to make sure it's still understandable in greyscale. Old habit from the days of B&W laser printers and copy machines, but it hasn't done me wrong yet.

I'd suggest not using Google Maps' color scheme.

Try printing out one of their maps on a monochrome printer, and you'll see what I mean: The colour shades, grey boundaries for roads and natural features, and the road names all have virtually the same contrast. So they all print as nearly the same illegible light grey.

Probably not a consideration for the vast majority of use cases. Honestly, why would you ever want to print out a screenshot of Google Maps? I remember my parents doing it back in the days of MapQuest before smartphones, but I can't think of any reason to do something so wasteful today.

> Honestly, why would you ever want to print out a screenshot of Google Maps?

Agree, but stevesimmons's point still stands - Google's map colour scheme is not a good role model.

"Honestly, why would you ever want to print out a screenshot of Google Maps?"

Long traveling/hiking.

To save smartphone batterie

to have something on your table, your hiking group can easier talk about, than by watching it on someones screen

I want to do it suprisingly often.

* When running/cycling somewhere unfamiliar: My phone will be safe in my backpack. In my hands I want a map I can stuff in a pocket, not worry if it gets wet or rained on, that I can hold while gripping the handlebars, that I can use while wearing gloves, and write other notes on, etc. I could print in color on my inkjet printer, but the ink runs in the rain. A printout from my mono laser won't run, but Google Maps isn't legible then either.

* On occasions when you don't want to bring a phone: What actually prompted my original comment was yesterday I had a government language exam, in an unfamiliar location on the outskirts of town, with strict instructions that no phones or other personal possessions were allowed in... I wasn't sure what kind of lockers they would have, or whether they would need padlocks or coins (neither of which I had) or whatever. So I thought about printing out a map and leaving my phone at home. The weather forecast was for rain, and I planned on cycling, hence it made sense to laser-print rather than use my inkjet.

1. I’m driving to [anywhere in the vast majority of the country where I don’t have cell signal on my LTE phone subscribed to T-Mobile, or Sprint, or more importantly more low end pay as you go plans.

2. I have some kind of color blindness and it doesn’t matter whether I use a printer, I’m depending on contrast.

It has very low contrast so it's really hard to use for anything.

You can't tell river from forest from residential area. It's all basically some light almost-grey.

Regular street maps and topographical maps are way better.

Man, if all advertisements were this level of quality and usefulness the world would be such a nice place. Not only are all of the example visualisations very illustrative and pretty, but they actually use real (and interesting!) data instead of tiny contrived examples. Being able to click through almost every example and play with a real full chart to see exactly what it's like at scale is a fantastic demonstration of the principles being covered.

Covering the "why" instead of just the "what" (e.g., with the history behind unclassed scales) is also very engaging content. It makes sense in retrospect but it had never occurred to me that it wouldn't have been plausible to create an unclassed scale for data points of arbitrary value until the 1970s.

Slightly off-topic: I'm completely amazed by the whole blog. It's structured well, fast, and they pay attention to details.

In the figure caption of the charts/maps the author and sources are mentioned. The data is directly embedded and downloadable via octed-stream.

The figure annotations in the margins are nice. There are different sizes of figures: some with the width of the text content, some with full screen width.

There are different blog post categories which are listed in the blog header.

All blog authors are listed on a page. In each blog post the author briefly introduces himself/herself.

That’s a great checklist for any blog. Thank you.

Great article exploring specific colormaps and applications, incl discussion of pros/cons of popular maps [ e.g. Cividis better for color-blind viewing than Viridis, but is a more simplistic blue--yellow scale than others which utilize higher number of colors ]: https://www.kennethmoreland.com/color-advice/

Great, widely-referenced site for quickly generating color scales, w color-blind safe options, and large amount of research behind it: https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

Great resource in colorbrewer2 - thank you!

I have several color blind colleagues and am regularly concerned I'm not displaying visuals in a way that is easy for them to digest.

At Mapsense we would always refer to Color Brewer https://colorbrewer2.org/. Basically takes the thinking out of the equation.

Another good resource is the tutorial "Choosing Color Palettes" from Seaborn, a Python plotting library that extends Matplotlib:

https://seaborn.pydata.org/tutorial/color_palettes.html

For content likely to be printed, photocopied, or viewed on an e-Ink device (colour exists in each case, but B&W/greyscale is far more prevalent), a palette or design which translates well to monochrome may be well worth considering.

Muti-generation photocopies tend toward black and white only.

Yes.

And not just for printers and e-ink. In most parts of the world, 6-10% of population have some degree of color blindness: https://en.wikipedia.org/wiki/Color_blindness#Epidemiology

I’m not one of them but that’s huge count of people. Ideally, interfaces/visualizations need to be designed accordingly.

Also worth mentioning projectors as well.

I've seen graphics and charts that looked fine on monitor become almost unreadable when projected, projectors tend to be lower resolution then monitors and color scale is not always the same.

Dave Green's CubeHelix scheme is excellent for this: http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/

There are lots of parameters which can be varied to choose which colour range to cover.

For people interested in this kind of stuff there's a good book on visualizations from WSJ: https://www.amazon.com/Street-Journal-Guide-Information-Grap...

It's pretty concise and full of helpful rules like that

Every time I see data with a sequential color scheme, I hate it. It's useless. I spend time trying to figure out if the area I'm looking at is is 8% or 10% or 12% or whatever. This is especially true for what the article calls "sequential classed color scales." If you use this scale, you MUST provide another chart, or another way to get accurate information. At worst, you let me mouse over the area and you show me the data.

I'm sure someone who works with this on a daily basis is going to come in here with why I am wrong. No. I promise you, there are many more people like me who absolutely hate this way of visualizing data. It's frustrating, and every time I see it, I hate it, and I'm more dismissive about the data. Maybe that's irrational, but I'm not the one trying to effectively communicate with people using satan's color scheme.

But what's the alternative you would like?

This is explained in my comment.

Please also consider readers with color vision deficiency: no information should ideally be conveyed via color alone.

"NOT JET", and then according to your taste, data need, and accessibility concerns as required.

If you know someone who insists on using Jet, try to trick them into using Turbo. After all, they probably won't be able to tell the difference

There are some more colour-scales to investigate at cpt-city: http://soliton.vm.bytemark.co.uk/pub/cpt-city/

In UI design education we tell the students:

- differences in hue are best for differences in kind

- differences in lightness or saturation are best for differences in amount

Ref.... Nault, W.H.: Children’s Map Reading Abilities. Geographic Society of Chicago, Newsletter, III (1967)

Relating to op’s question It might be said that we perceive a rainbow ramp as a continuous thing. Hence it might work to visual a graduation in intensity. But from experience I can say that such maps are difficult to read. One problem is that a hue ramp has no terminals (such as black and white in the case of a lightness ramp).

Keynote (and the other Apple apps that make graphs using the same engine) used to magically choose great color schemes. But sometimes after Jobs died, they got worse.

I don't know if it is coincidence or Jobs just had an eye for good color schemes and would tell them to change it, but it was noticeable to me. I usually pull up my old presentations and then copy/paste the graphs and change the data so I can get the old color schemes.

Related, Claus Wilke's Data Visualization book has a fantastic section on common pitfalls of color use:

https://clauswilke.com/dataviz/color-basics.html https://clauswilke.com/dataviz/color-pitfalls.html

In UI design education we tell the students:

- differences in hue are best for differences in kind

- differences in lightness or saturation are best for differences in amount

Ref.... Nault, W.H.: Children’s Map Reading Abilities. Geographic Society of Chicago, Newsletter, III (1967)

Reply on news.ycombinator.com