Your turn: What makes this graphic good, and bad?

BoM 😢

Viridis 😄

Jet?

How do we describe what is better/worse about them?

Describing why and how one is better

We're going in for a deep dive here, folks

Goals of this talk

• What is colour?
• How do we perceive colour?
• What is colourblindness?
• What is a vocabulary around colour?
• How do I use colour in my plot?
• How do I assess colour?
• How do I create new colour palettes?

This next section is inspired by Calder Hansen's The Science of Color Perception

Colour: Waves of light, perceived.

Just as there are soundwaves that you can hear 🔉 👂

There are lightwaves that we see 🚥 👀

Physics of Colour

These lightwaves come in different shapes - different wavelengths:

The visible spectrum

Physics of Colour (More than we can see)

From https://commons.wikimedia.org/wiki/File:EM_spectrum.svg

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Physics of Colour

Biology of colour: cones

Biology of colour: cone sensitivty to light

Image inspired by figure of responsivity of human eye from Wikipedia, data extracted from Colour & Vision Research laboratory at UCL's section on cones.

How do we see colour? Blue?

But I don't just see red and green and blue?

Well, kinda?

But I don't just see red and green and blue?

Well, kinda?

Colourblindness

• What happens if someone doesn't have some of these cones?

• Or one of the cones isn't as responsive?

• This is what we call colourblindness and colourweakness

• Depending on which cones are missing, this means some sets of colours are indistinguishable from one another.

• It affects up to 10% of males of European descent, and 1 in 200 women.

Full colour vision

No L cone = Protonopia (Less "red")

No M cone = Deutanopia (Less "green")

No S cone = Tritanopia (Less "Blue")

Colourblindness impacts everyday design

Without those cones, some colours look the same

This is why traffic lights have position markings, instead of just the same position changing colour.

Normal Traffic Light

Traffic Light (Protan)

Traffic Light (Deutan)

Traffic Light (Tritan)

Some of these colours look very similar!

Colourblindness key points

• We perceive colour using the cones in our eyes
• Some people don't have certain cones, or reduced capacity in those
• This means some colours cannot be distinguished by those with colourblindness
• We need to be careful how we present colour, and what colours we present.

Tools for testing how well your plot stands up to colourblindness?

• We can transform colours into approximations of colourblindness
• Many tools exist for exploring colourblindness
• We'll mostly be exploring the R package, colorspace

Tools for testing how well your plot stands up to colourblindness?

• colorspace: protan(), deutan(), tritan() transform colours.

# Just rainbow
rainbow(5)

## [1] "#FF0000" "#CCFF00" "#00FF66" "#0066FF" "#CC00FF"

# Rainbow into protan
rainbow(5) %>% protan()

## [1] "#261D00" "#FFDF00" "#F7D25F" "#3769FF" "#0030FF"

How to test how well your plot stands up to colourblindness?

rainbow(19) %>% protan() %>% swatchplot()

How to test how well your plot stands up to colourblindness?

rainbow(19) %>% 
  check_color_blindness()

What if your plot is an image already?

• colorspace provides a "Colour Vision Deficiency (CVD) Emulator" - cvd_emulator.
• This takes in a JPG / PNG
• Let's explore what this original image from BoM looks like:

cvd_emulator("imgs/bom-heat-map.png")

Original image

Protan image (No Red Cone)

Deutan image (No Green Cone)

Tritan image (No Blue Cone)

Greyscale image

• What is a vocabulary around colour?
• How do I assess colour?
• How do I create new colour palettes?

Describing colour in graphics

Describing colour in graphics

• There is a wide vocab that we can use to discuss colour.
• We can describe any colour using the different values of red, green, and blue.
• Remember the red, green, and blue cones?

Describing colour in graphics

Describing colour in graphics

Yes: Hue, Chroma, Luminance

Colorspace

Describing our previous maps in terms of hue, chroma, luminance

• Using colorspace to explore colour palettes
• We can explore some colour palettes using HCL, with the specplot function from colorspace.
• We can take our palette and plot it along these dimensions

HCL of BoM plot palette

Design decisions when choosing colour

Types of palettes

• Qualitative: For coding categorical information, i.e., where no particular ordering of categories is available and every color should receive the same perceptual weight.

• Sequential: For coding ordered/numeric information, i.e., where colors go from high to low (or vice versa).

• Diverging: Designed for coding numeric information around a central neutral value, i.e., where colors diverge from neutral to two extremes.

(From the R help file on colour palettes)

Qualitative: Every colour has same weight

Sequential: Colours go low - high

Sequential: Multiple hues

Diverging: Neutral value to two extremes

Improving the BoM plot

Exploring colourblindness in BoM palettes

Improving the BoM plot

Improving the BoM plot

Creating your own colour palette with colorspace

1. Decide what type of palette you want (Sequential, Diverging, etc)
2. Decide what colours you want to go through

sequential_hcl(n = 20, h = 300)

Aside: the hue is a colour wheel

sequential_hcl(n = 20, h = c(360, 120))

Preview colours with demoplot(type = "map")

Preview colours with demoplot(type = "heatmap")

Check colourblindness protan and use demoplot

Check colourblindness protan and use demoplot (compare to rainbow)

Exploring palettes: demo

hcl_palettes("qualitative", plot = TRUE)
hcl_palettes("sequential", plot = TRUE)
hcl_palettes("diverging", plot = TRUE)

Tools for exploring colourblindness:

• Using the hex/colour codes
  • Colorspace: protan/deutan/tritan
  • prismatic: check_color_blindness
• For a ggplot object
  • colorblindr: cvd_grid
• For an image
  • colorspace: cvd_emulator

Tools for creating good colours

• Colorspace:
  • qualitative_hcl
  • sequential_hcl
  • diverging_hcl
• Pick the hue/chroma/luminance you want to travel through

A workflow for choosing a colour palette

1. What type of data is it?
2. Decide the colour palette type:
   • Qualitative: Are the categories equal?
   • Sequential: Does the value go from low to high?
   • Diverging: Does it have a natural balance/zero point?
3. Check colourblindness: check_color_blindness
4. Explore colour with specplot (combine with protan and friends)
5. Explore how it looks with demoplot (combine with protan and friends)

Take homes

• Colour choice matters
• Choosing colours is hard
• We can use Hue / Chroma / Luminance to describe colour
• See established palettes: colorspace / viridis / scico
• Assess colours with colorspace::specplot()
• Assess colourblindness with colorspace::cvd_emulator()
• Evaluate your own colour palettes at hclwizard.com
• Choose colour palettes with
  • colorspace::choose_palette()
  • colorspace::choose_color()
  • colorspace::hcl_color_picker()
  • colorspace::hcl_wizard()

Thanks

Resources

Resources

Colophon

Learning more

Workflows

Explore rainbow palette with specplot: Rainbow + specplot

rainbow(n = 20) %>% specplot()

Explore rainbow palette with colorblindness specplot: Rainbow + hclplot

rainbow(n = 20) %>% hclplot()

Explore rainbow palette with colorblindness specplot: Rainbow + protan + specplot

rainbow(n = 20) %>% protan() %>% specplot()

Explore rainbow palette with colorblindness specplot: Rainbow + protan + hclplot

rainbow(n = 20) %>% protan() %>% hclplot()

Explore palettes with specplot: Rainbow + demoplot

rainbow(n = 20) %>% demoplot()

Explore palettes with specplot: Rainbow + protan + demoplot

rainbow(n = 20) %>% protan() %>% demoplot()

Compare Rainbow to Viridis: specplot

rainbow(n = 20) %>% 
  specplot()

pals::viridis(n = 20) %>% 
  specplot()

Compare Rainbow to Viridis: specplot + protan

rainbow(n = 20) %>% 
  protan() %>% 
  specplot()

pals::viridis(n = 20) %>% 
  protan() %>% 
  specplot()

Compare Rainbow to Viridis: hclplot

rainbow(n = 20) %>% 
  hclplot()

pals::viridis(n = 20) %>% 
  hclplot()

Compare Rainbow to Viridis: hclplot + protan

rainbow(n = 20) %>% 
  protan() %>% 
  hclplot()

pals::viridis(n = 20) %>% 
  protan() %>% 
  hclplot()

Compare Rainbow to Viridis: demoplot

rainbow(n = 20) %>% 
  demoplot()

pals::viridis(n = 20) %>% 
  demoplot()

Compare Rainbow to Viridis: demoplot + protan

rainbow(n = 20) %>% 
  protan() %>% 
  demoplot()

pals::viridis(n = 20) %>% 
  protan() %>% 
  demoplot()