Color scales, color spaces, color-vision deficiency

class: center, middle, title-slide

.title[
# Color scales, color spaces,<br>color-vision deficiency
]
.author[
### Claus O. Wilke
]
.date[
### last updated: 2024-08-08
]

---

# Uses of color in data visualization

<table style = "border: none; line-height: 2.5;">
<tr style = "background: white;">
<td style = "text-align: left; width: 50%;">
1. Distinguish categories (qualitative)
</td>
<td>
<img src = "color-scales_files/qualitative.png" width = 100% style = "text-align: right; vertical-align: middle"></img>
</td>
</tr>
</table>

---

# Qualitative scale example

.center.nogap[
<img src="positconf2024-slides-colors_files/figure-html/popgrowth-vs-popsize-colored-1.svg" width="65%" />
]

Palette name: Okabe-Ito

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Qualitative scale example

.center.nogap[
<img src="positconf2024-slides-colors_files/figure-html/popgrowth-vs-popsize-colored2-1.svg" width="65%" />
]

Palette name: ColorBrewer Set1

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Qualitative scale example

.center.nogap[
<img src="positconf2024-slides-colors_files/figure-html/popgrowth-vs-popsize-colored3-1.svg" width="65%" />
]

Palette name: ColorBrewer Set3

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Uses of color in data visualization

<tr style = "background: white;">
<td style = "text-align: left;">
2. Represent numeric values (sequential)
</td>
<td>
<img src = "color-scales_files/sequential.png" width = 100% style = "text-align: right; vertical-align: middle"></img>
</td>
</tr>
</table>

---

# Sequential scale example

<br>

.center[
<img src="positconf2024-slides-colors_files/figure-html/four-locations-temps-by-month-1.svg" width="90%" />
]

Palette name: Viridis

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Sequential scale example

<br>

.center[
<img src="positconf2024-slides-colors_files/figure-html/four-locations-temps-by-month2-1.svg" width="90%" />
]

Palette name: Inferno

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Sequential scale example

<br>

.center[
<img src="positconf2024-slides-colors_files/figure-html/four-locations-temps-by-month3-1.svg" width="90%" />
]

Palette name: Cividis

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Uses of color in data visualization

<tr style = "background: white;">
<td style = "text-align: left;">
3. Represent numeric values (diverging)
</td>
<td>
<img src = "color-scales_files/diverging.png" width = 100% style = "text-align: right; vertical-align: middle"></img>
</td>
</tr>
</table>

---

# Diverging scale example

.center.nogap[
<img src="positconf2024-slides-colors_files/figure-html/forensic-correlations1-1.svg" width="35%" />
]

Palette name: ColorBrewer PiYG

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Diverging scale example

.center.nogap[
<img src="positconf2024-slides-colors_files/figure-html/forensic-correlations2-1.svg" width="35%" />
]

Palette name: Carto Earth

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Diverging scale example

.center.nogap[
<img src="positconf2024-slides-colors_files/figure-html/forensic-correlations3-1.svg" width="35%" />
]

Palette name: Blue-Red

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Uses of color in data visualization

<tr style = "background: white;">
<td style = "text-align: left;">
4. Highlight
</td>
<td>
<img src = "color-scales_files/highlight.png" width = 100% style = "text-align: right; vertical-align: middle"></img>
</td>
</tr>
</table>

---

# Highlight example

.center[
<img src="positconf2024-slides-colors_files/figure-html/Aus-athletes-track-1.svg" width="60%" />
]

Palette name: Grays with accents

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Highlight example

.center[
<img src="positconf2024-slides-colors_files/figure-html/Aus-athletes-track2-1.svg" width="60%" />
]

Palette name: Okabe-Ito accent

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Highlight example

.center[
<img src="positconf2024-slides-colors_files/figure-html/Aus-athletes-track3-1.svg" width="60%" />
]

Palette name: ColorBrewer accent

???

Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

# Uses of color in data visualization

---

class: center middle

## How does a computer represent color?

---

## The RGB color space

.pull-left.width-50[
- red R (0-255): amount of red light

- green G (0-255): amount of green light

- blue B (0-255): amount of blue light
]

.pull-right.move-down-1em[

R | G | B | hex code | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
---| --- | --- | --- | ---
0  | 0 | 0 | #000000 | <div style = "background-color: #000000;">&nbsp;</div>
255  | 0 | 0 | #FF0000 | <div style = "background-color: #FF0000;">&nbsp;</div>
0  | 255 | 255 | #00FFFF | <div style = "background-color: #00FFFF;">&nbsp;</div>
128  | 128 | 128 | #808080 | <div style = "background-color: #808080;">&nbsp;</div>
0 | 158 | 115 | #009E73 | <div style = "background-color: #009E73;">&nbsp;</div>
255 | 255 | 255 | #FFFFFF | <div style = "background-color: #FFFFFF;">&nbsp;</div>
]

---

## The RGB color space

.center[
<img src="positconf2024-slides-colors_files/figure-html/rgb-viz-1.svg" width="85%" />
]

.tiny[
People cannot reason well about the RGB color space
]

---

## The HSV color space

.pull-left[

- hue H (0-360):  
  hue of the color

- saturation S (0-1):  
  colorfulness relative to the brightness of the color

- value V (0-1):  
  subjective perception of amount of light emitted
]

.pull-right.move-up-1em[
<img src="positconf2024-slides-colors_files/figure-html/hsv-viz-single-1.svg" width="100%" />
]

---

## The HSV color space

.center[
<img src="positconf2024-slides-colors_files/figure-html/hsv-viz-1.svg" width="85%" />
]

---

## The HLS color space

.pull-left[
- hue H (0-360):  
  hue of the color

- lightness L (0-1):  
  brightness relative to the brightness of a similarly illuminated white

- saturation S (0-1):  
  colorfulness relative to the brightness of the color
]

.pull-right.move-up-1em[
<img src="positconf2024-slides-colors_files/figure-html/hls-viz-single-1.svg" width="100%" />

]

---

## The HLS color space

.center[
<img src="positconf2024-slides-colors_files/figure-html/hls-viz-1.svg" width="85%" />
]

.tiny[
Reasoning about HSV or HLS can still be difficult
]

---

## The Luv color space

.pull-left.width-50[

- luminance L (0-100):  
  amount of light emitted

- green/red axis u (approx. -100 to 100):  
  amount of green vs. red

- blue/yellow axis v (approx. -100 to 100):  
  amount of blue vs. yellow
]

.pull-right.move-up-2em[
<img src="positconf2024-slides-colors_files/figure-html/luv-viz-single-1.svg" width="100%" />
]

---

## The Luv color space

.center[
<img src="positconf2024-slides-colors_files/figure-html/luv-viz-1.svg" width="85%" />
]

---

## The HCL color space: polar Luv

.center.move-up-1em[
<img src="positconf2024-slides-colors_files/figure-html/hcl-viz-single-1.svg" width="50%" />
]

---

## The HCL color space: polar Luv

.move-up-1em.center[
<img src="positconf2024-slides-colors_files/figure-html/cl-planes-1.svg" width="80%" />
]

[//]: # "segment ends here"

---
class: center middle

## Explore HCL colors interactively in R

---

## We can explore HCL colors in R

```r
colorspace::choose_color()
```

[//]: # "segment ends here"

---
class: center middle

## A few considerations when choosing colors

---

## 1. Avoid high chroma

.pull-left.width-45[
High chroma: Toys

<img src = "color-spaces_files/toys-image.jpg", width = 100%, style = "box-shadow: 3px 5px 3px 1px #00000080;"></img>
]

???

[Photo by Pixabay from Pexels](https://www.pexels.com/photo/super-mario-and-yoshi-plastic-figure-163077/)

.pull-right.width-45[
Low chroma: Elegance

<img src = "color-spaces_files/home-interior.jpg", width = 95%, style = "box-shadow: 3px 5px 3px 1px #00000080;"></img>
]

???

[Photo by Saviesa Home from Pexels](https://www.pexels.com/photo/kitchen-island-2089698/)

---

## 2. Be aware of color-vision deficiency

5%–8% of men are color blind!

Red-green color-vision deficiency is the most common

---

## 2. Be aware of color-vision deficiency

5%–8% of men are color blind!

Blue-green color-vision deficiency is rare but does occur

---

## 2. Be aware of color-vision deficiency

Choose colors that can be distinguished with CVD

---

## Consider using the Okabe-Ito scale for categorical data

.center[
<img src = "dataviz/pitfalls_of_color_use_files/figure-html/palette-Okabe-Ito-1.png", width = 100%></img>
]

.tiny-font[
Name           | Hex code &nbsp;&nbsp; | R, G, B (0-255)
:----------    | :-------  | :--------
orange         | #E69F00   | 230, 159, 0
sky blue	     | #56B4E9   | 86, 180, 233
bluish green   | #009E73   | 0, 158, 115
yellow	       | #F0E442   | 240, 228, 66
blue	         | #0072B2   | 0, 114, 178
vermilion	     | #D55E00   | 213, 94, 0
reddish purple | #CC79A7   | 204, 121, 167
black	         | #000000   | 0, 0, 0
]

???

Figure from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

## CVD is worse for thin lines and tiny dots

.move-up-1em.center[
<img src = "dataviz/pitfalls_of_color_use_files/figure-html/colors-thin-lines-1.png", width = 65%></img>
]

---

## When in doubt, run CVD simulations

<div class = "move-up-1em" style = "width: 50%; box-shadow: 3px 5px 3px 1px #00000080; padding: 8px;">
.small-font[Original]<br>
<img src = "dataviz/redundant_coding_files/figure-html/iris-scatter-three-shapes-1.png", width = 100%></img>
</div>

???

Figure from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

## When in doubt, run CVD simulations

???

Figures from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

[//]: # "segment ends here"

---

## Further reading

- Fundamentals of Data Visualization: [Chapter 19: Common pitfalls of color use](https://clauswilke.com/dataviz/color-pitfalls.html)
- Wikipedia: [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV)
- **colorspace** package documentation: [Color Spaces](https://colorspace.r-forge.r-project.org/articles/color_spaces.html)
- **colorspace** package documentation: [Apps for Choosing Colors and Palettes Interactively](https://colorspace.r-forge.r-project.org/articles/hclwizard.html)