A friendly guide to colours in data visualisation(blog.datawrapper.de)
blog.datawrapper.de
A friendly guide to colours in data visualisation
https://blog.datawrapper.de/colorguide/
30 comments
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.
[0]: https://www.youtube.com/watch?v=xAoljeRJ3lU
[1]: https://www.youtube.com/watch?v=TojFwkglCKs
[0]: https://www.youtube.com/watch?v=xAoljeRJ3lU
[1]: https://www.youtube.com/watch?v=TojFwkglCKs
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)
[0] http://journals.plos.org/plosone/article?id=10.1371%2Fjourna...
[1] https://github.com/marcosci/cividis
[2] https://news.ycombinator.com/item?id=17667572
(I submitted it yesterday but it didn't get much traction[2], which makes sense given how specific it is)
[0] http://journals.plos.org/plosone/article?id=10.1371%2Fjourna...
[1] https://github.com/marcosci/cividis
[2] https://news.ycombinator.com/item?id=17667572
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.
> rainbow color maps are bad
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.
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.
[0] http://medvis.org/2012/08/21/rainbow-colormaps-what-are-they...
That article/post reached some audience and was referenced quite well at the time. Keep spreading the word I guess.
[0] http://medvis.org/2012/08/21/rainbow-colormaps-what-are-they...
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.
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.
Neither links work.
Indeed the original IBM link was taken down:
https://web.archive.org/web/20180225102505/https://www.resea...
GitHub displays the PDF just fine on desktop but fails on mobile.
https://web.archive.org/web/20180225102505/https://www.resea...
GitHub displays the PDF just fine on desktop but fails on mobile.
I've started using the Natural Color System, https://en.wikipedia.org/wiki/Natural_Color_System, for my matplotlib visualisations. Snippet of code I use on categorical data:
good_patch = matplotlib.patches.Patch(color='#009F6B', label='good')
marginal_patch = matplotlib.patches.Patch(color='#FFD300', label='marginal')
warning_patch = matplotlib.patches.Patch(color='#FF751F', label='warnings')
bad_patch = matplotlib.patches.Patch(color='#C40233', label='bad')
flag_patch = matplotlib.patches.Patch(color='#0087BD', label='flag')
unknown_patch = matplotlib.patches.Patch(color='#808080', label='unknown')This immediately reminded me of color choices of the Google's "material design".
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.
I wrote about my experience here -> https://mcconnellsoftware.github.io/colourblind-in-software-...
I wrote about my experience here -> https://mcconnellsoftware.github.io/colourblind-in-software-...
They did mention it just for anyone curious
"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."
"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.
https://colororacle.org
I'm sure it's not perfect, but it at least helps make things a bit less tricky to get right.
https://colororacle.org
I'm sure it's not perfect, but it at least helps make things a bit less tricky to get right.
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.
[1]https://developer.apple.com/videos/play/wwdc2018/210/ [2]https://developer.apple.com/videos/play/wwdc2018/218/
[1]https://developer.apple.com/videos/play/wwdc2018/210/ [2]https://developer.apple.com/videos/play/wwdc2018/218/
For color and data visualization, I suggest reading the following from Nature Methods published almost 8 years ago:
https://www.nature.com/articles/nmeth0810-573 https://www.nature.com/articles/nmeth.2134
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
https://www.nature.com/articles/nmeth0810-573 https://www.nature.com/articles/nmeth.2134
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.
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.
Can someone give me feedback on what would make the presentation of this data better?
https://efficiencyiseverything.com/food/
There are lots of Calories Per Dollar, Protein Per Dollar, etc... data for specific food items.
The pages were recently updated so the tables are sort-able, but there might be too much data, and reducing the data is bad for the user.
Any suggestions?
https://efficiencyiseverything.com/food/
There are lots of Calories Per Dollar, Protein Per Dollar, etc... data for specific food items.
The pages were recently updated so the tables are sort-able, but there might be too much data, and reducing the data is bad for the user.
Any suggestions?
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.
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.
If you want a quick at a glance visualization a bar chart of your calories per dollar amount would help users directly compare two items.
Nature Blog had a recent article about scientific figures:
http://blogs.nature.com/onyourwavelength/2018/07/18/heuristi...
http://blogs.nature.com/onyourwavelength/2018/07/18/heuristi...
Very useful guide. Colour is such an integral part of good UX.
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...
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...
I have so many to-dos, compress pictures, add javascript to add features, and now color...
Oh, and the actual product, that too.
Oh, and the actual product, that too.
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
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] https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
[1] https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
(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/...