Using Color

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Using Color

**Rei Sanchez-Arias, Ph.D.**

]

---

layout: false
name: colors
class: center middle section-title section-title-2 animated fadeIn
background-image: url("https://github.com/reisanar/figs/raw/master/colors.gif")
background-position: right

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Using Color

???

https://giphy.com/gifs/rainbow-color-crayon-3vnHhhpVXP8lBrOQhH

---

---

# Using Color

Color is an important tool in designing visualizations. It allows you to **encode another variable** or split the data into **groups**.

However, there are a lot of issues you need to consider when choosing which colors to use and how to apply them.

.box-inv-2[Color is an important tool in visualizations and it is important to use it appropriately to have the largest impact.]

---

# Power of Color

.small[
GDP per capita vs life expectancy across countries in 2010. <br>You see a **general upward trend**.
]

---

# Power of Color (2)

GDP vs life expectancy, now colored **by region**. You can easily see where countries in different regions group together.

---

# Power of Color (3)

Much more information was provided by adding color provided:

- By coloring the region the countries belong to, we can see how the countries are distributed in the world on this plot.

- The low GDP countries are almost all in [sub-Saharan Africa](https://en.wikipedia.org/wiki/Sub-Saharan_Africa), and on the high end you see Europe and North America.

- The orange in between is the [Commonwealth of Independent States](https://en.wikipedia.org/wiki/Commonwealth_of_Independent_States), former Soviet states

---

layout: false
name: palettes
class: center middle section-title section-title-2 animated fadeIn
background-image: url("https://github.com/reisanar/figs/raw/master/palette.gif")
background-position: right

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Color Palettes

???

https://giphy.com/gifs/paint-knife-palette-PH8gHFw2YJPaM

---

---

# Color Palettes

A color palette is the **range of colors** used to encode the data values.

You will have different sorts of palettes for quantitative and qualitative data.

Choosing the correct palette is **extremely important**.

???

A refreshed color palette for charts in R 4.0.0

https://blog.revolutionanalytics.com/2020/04/r-400-is-released.html

---

# Jet

.pull-left[
.small[
The default color palette in visualization software such as `MATLAB` and `Python`'s `matplotlib` library used to be **jet**  _(fortunately, both have updated to new palettes)_.

You might also know this as the **rainbow** palette. The jet palette goes from a dark <span style="color:blue">blue</span> to a dark <span style="color:red">red</span>, shifting to green and yellow along the way. 
]
]

.tiny[A Better Default Colormap for Matplotlib | SciPy 2015 | Nathaniel Smith and Stéfan van der Walt introducing **`viridis`**]
]

.small[
We show the palette below both in color and converted to gray-scale to show the [**luminance**](https://en.wikipedia.org/wiki/Luminance) along the spectrum.
]

???

Check also: https://www.youtube.com/watch?v=XjHzLUnHeM0

---

# Jet (2)

The jet/rainbow palette is flawed because the luminance _does not transition smoothly from one end to the other_. The yellow is much brighter than the rest of the colors which can make some data seem more important than it really is.

???

Reddit post from 7 years ago

https://www.reddit.com/r/matlab/comments/1jqk8t/you_should_never_use_the_default_colors_in_matlab/

---

# Jet (3)

You can see that the short cyan and yellow regions are much stronger perceptually than the other regions. Data that falls into these regions will be **overemphasized**.

Looking at the gray-scale versions, it's apparent that the cyan and yellow regions pop out due to their **greater luminance** compared to the rest of the palette. This happens due to the way our brains perceive color.

[Our eyes](https://www.nde-ed.org/EducationResources/CommunityCollege/PenetrantTest/Introduction/lightresponse.htm) are more sensitive to green than red, and more sensitive to red than blue.

---

# Perceptual Importance

]

.pull-right[
.small[
The yellow and cyan regions are much brighter and eye catching than the red and blue regions which are actually the interesting (extreme) parts.

Our brains are interpreting higher luminance as more important. You can see this in the gray-scale versions where there are luminance spikes at the edges where it's colored yellow and cyan.
 ]
]

---

# Diverging Palette

We could use a palette that is **linear in intensity with extremes** while providing a smooth transition between them. Here we use a diverging palette going from red to light yellow to green.

---

# Diverging Palette (2)

With this color palette, the transitions between the bands are **smooth** and the red and green regions have _equal luminance_. 
]

---

# Sequential Palettes

.pull-left[
.small[
Sequential palettes have a _smooth transition_ from light to dark or dark to light. These are great for continuous data that is all positive so low values are light and high values are dark (or the other way around if you prefer).

Here's an example of a sequential palette going from light to dark red
]

]

.pull-right[
.small[
You can also use palettes that shift [hues](https://en.wikipedia.org/wiki/Hue) as well as luminance:
]

]
---

# Diverging Palettes

.small[
When you work with data that has some **breakpoint**, values that go from negative to positive for example, it is typically best to use a diverging palette.

Diverging palettes transition from one color to another, passing through a light (or dark) color with the luminance shifting linearly through the palette. 
]

---

# Diverging Palettes (2)

.small[
Here is what it looks like applied to the same Gaussians as before, but one is negative. The jet palette is also included so you can see how the cyan and yellow make rings around the blobs, while in the other palettes it is a smooth transition between them.

]
<br>
<img src="figs/div_blob.png" width="80%" style="display: block; margin: auto;" />

---

# Palettes for Qualitative Data

.small[
For qualitative data, you are often comparing data from _different groups or categories_. For this you need to choose colors that are as visually separate as possible.
]

.box-inv-2[
.small[
[**`I want hue`**](http://tools.medialab.sciences-po.fr/iwanthue/) is a great tool for building optimally distinct palettes 
]
]

.pull-left[
.small[
<br>
We show a scatter plot of the sepal lengths and petal widths of a sample of [irises](https://en.wikipedia.org/wiki/Iris_flower_data_set).
<br>
By **coloring the species different**, you can easily see the data falls into three fairly distinct clusters.
]
]

---

# Color Contrast

Check: [color.adobe.com](https://color.adobe.com)

.pull-left[
<figure>
  <img src="figs/triad.png" alt="Triad" title="Triad" width="100%">
  <figcaption>Triad</figcaption>
</figure>

<figure>
  <img src="figs/monochromatic.png" alt="Monochromatic" title="Monochromatic" width="100%">
  <figcaption>Monochromatic</figcaption>
</figure>
]

.pull-right[
<figure>
  <img src="figs/complementary.png" alt="Complementary" title="Complementary" width="100%">
  <figcaption>Complementary</figcaption>
</figure>

<figure>
  <img src="figs/complementary-split.png" alt="Split complementary" title="Split complementary" width="100%">
  <figcaption>Split complementary</figcaption>
</figure>
]

???

From [Andrew Heiss](https://www.andrewheiss.com/)

---

# Perceptually uniform colors

.pull-left[
<figure>
  <img src="figs/palettes-typical.png" alt="Typical palettes" title="Typical palettes" width="100%">
  <figcaption>Traditional palettes vs. viridis</figcaption>
</figure>
]

.pull-right[
<figure>
  <img src="figs/palettes-deuteranopic.png" alt="Deuteranopic palettes" title="Deuteranopic palettes" width="100%">
  <figcaption>Traditional palettes vs. viridis as seen with deuteranopia</figcaption>
</figure>
]

???

From [Andrew Heiss](https://www.andrewheiss.com/)

---

# Perceptually uniform colors example

<figcaption>Florida counties filled by area, jet (rainbow) palette (not good)</figcaption>
</figure>
]

<figcaption>Florida counties filled by area, viridis::viridis palette</figcaption>
</figure>
]

<figcaption>Florida counties filled by area, viridis::inferno palette</figcaption>
</figure>
]

???

https://github.com/hrbrmstr/albersusa

https://github.com/walkerke/tidycensus

https://cran.r-project.org/web/packages/sf/vignettes/sf5.html

---

# Color Blindness

Humans perceive color through signals produced by cells in the retina called [cones](https://en.wikipedia.org/wiki/Cone_cell).

Light comes into the eye, hits the cones, and the cones send off electrical signals to the brain. There are (typically) three types of cones: short (S), medium (M), and long (L). They are _sensitive to different frequencies_ (colors) of light.

---

# Color Blindness (2)

Short cones prefer blue, medium prefer green, and long prefer red.

- Around 10% of men and 1% of women have mutations that affect these cones and produce what is known as _color blindness_.

- The most common form is red-green [color blindness](http://www.allaboutvision.com/conditions/colordeficiency.htm), typically caused by the medium cones shifting sensitivity towards red light, a mutation called [deuteranomaly](http://www.color-blindness.com/deuteranopia-red-green-color-blindness/).

---

# Color Blindness (3)

.pull-left[
People with deuteranomaly cannot distinguish between red and green, as shown in this image of a red and a green apple.

The bottom row is how you would see these two apples if you had red-green color blindness
]

]

---

layout: false
name: scales
class: center middle section-title section-title-2 animated fadeIn
background-image: url("https://github.com/reisanar/figs/raw/master/bobross.gif")
background-position: right

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Color Scales

???

Materials from: [_"Fundamentals of Data Visualization"_](https://clauswilke.com/dataviz/color-basics.html) by Claus O. Wilke

https://giphy.com/gifs/netflix-d31vTpVi1LAcDvdm

---

---

# Color as a Tool to Distinguish

.right[
.tiny[
From: [_"Fundamentals of Data Visualization"_](https://clauswilke.com/dataviz/color-basics.html) by Claus O. Wilke
]
]

.small[
- We use color to distinguish discrete items or groups that _do not have an intrinsic order_, such as different countries on a map or different manufacturers of a certain product.

- In this case, we use a **qualitative color scale**. Such a scale contains a finite set of specific colors that are chosen to look **clearly distinct** from each other while also being equivalent to each other. The second condition requires that _no one color should stand out relative to the others_.

- The colors should not create the impression of an order, as would be the case with a sequence of colors that get successively lighter.

]

---

# Color as a Tool to Distinguish (2)

.right[
.tiny[
From: [_"Fundamentals of Data Visualization"_](https://clauswilke.com/dataviz/color-basics.html) by Claus O. Wilke
]
]

---

# Color to Represent Data Values

.small[
Color can also be used to **represent data values**, such as income, temperature, or speed. In this case, we use a **sequential color scale**.

Such a scale contains a sequence of colors that clearly indicate

- which values are _larger or smaller_ than which other ones

- how _distant_ two specific values are from each other (the color scale needs to vary uniformly across its entire range).

Sequential scales can be based on a single hue (e.g., from dark blue to light blue) or on multiple hues (e.g., from dark red to light yellow). 
]

---

# Color to Represent Data Values (2)

.small[
The `ColorBrewer Blues` scale is a monochromatic scale that varies from dark to light blue. The `Heat` and `Viridis` scales are multi-hue scales that vary from dark red to light yellow and from dark blue via green to light yellow, respectively.
]

???

Visit

https://www.color-hex.com/color-palettes/

---

# Color to Represent Data Values (3)

.pull-left[
<img src="figs/map-Texas-income-1.png" width="110%" style="display: block; margin: auto;" />
]

Representing data values as colors is particularly useful when we want to show how the data values _vary across geographic regions_. We can draw a map of the geographic regions and color them by the data values. Such maps are called [**choropleths**](https://en.wikipedia.org/wiki/Choropleth_map).

]

---

# Diverging Scales

.small[
Diverging scales can be thought of as two sequential scales stitched together at a common midpoint color. Common color choices for diverging scales include brown to greenish blue, pink to yellow-green, and blue to red.
]

---

# Color as a Tool to Highlight

.small[
- Color can also be an effective tool to **highlight** specific elements in the data. There may be specific categories or values in the dataset that carry key information about the story we want to tell, and we can strengthen the story by emphasizing the relevant figure elements to the reader.

- An easy way to achieve this emphasis is to color these figure elements in a color or set of colors that vividly stand out against the rest of the figure.

- This effect can be achieved with **accent color scales**, which are color scales that contain both a set of subdued colors and a matching set of stronger, darker, and/or more saturated colors

]

---

# Color as a Tool to Highlight

.small[
When working with accent colors, it is critical that the baseline colors do not compete for attention. 
]

---

layout: false
name: guidelines
class: center middle section-title section-title-2 animated fadeIn
background-image: url("https://github.com/reisanar/figs/raw/master/hiddenFigures.gif")
background-position: right

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Practical Rules<br>and Guidelines

???

https://giphy.com/gifs/foxhomeent-black-history-month-hidden-figures-3ohs4qxmDXm5RvWtnW

---

---

# Some Guidelines

Stephen Few has a good article, [_"Practical Rules for Using Color in Charts"_,](http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf) outlining practical rules for using color correctly

* If you want **different objects** of the same color in a table or graph to look the same, make sure that the background is consistent.

* If you want objects in a table or graph to be easily seen, use a background color that **contrasts sufficiently** with the object.
]

* Use different colors only when they correspond to **differences of meaning** in the data.

]

---

# Some Guidelines (2)

.small[
* Use soft, natural colors to display most information and bright and/or dark colors to **highlight** information that requires greater **attention**.

* When using color to encode a **sequential range** of quantitative values, stick with a single hue (or a small set of closely related hues) and vary intensity from pale colors for low values to increasingly darker and brighter colors for high values.
<br>
<br>
]

.small[
* Non-data components of tables and graphs should be displayed just visibly enough to perform their role, but no more so, for **excessive** salience could cause them to distract attention from the data.

* To guarantee that most people who are colorblind can distinguish groups of data that are color coded, avoid using a combination of **red and green** in the same display.

]

---

layout: false
name: colorsggplot
class: center middle section-title section-title-2 animated fadeIn
background-image: url("https://github.com/reisanar/figs/raw/master/animatedIris.gif")
background-position: right

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Colors in `ggplot2`

???

https://socviz.co/refineplots.html

---

---

# Use Color to Your Advantage

.right[
.tiny[
From: [_"Data Visualization"_](https://socviz.co/refineplots.html) by Kieran Healy
]
]
<br>
.small[
Choose a **color palette** based on its ability to express the data you are plotting.

- An **unordered categorical** variable like `Country` or `Sex`, requires distinct colors that will not be easily confused with one another.

- An **ordered categorical** variable like `Level of Education` requires a graded color scheme of some kind running from less to more or earlier to later.

- If your variable is ordered, is your scale centered on a neutral midpoint with departures to extremes in each direction, as in a Likert scale?

]

---

# Use Color to Your Advantage (2)

In general, the default color palettes that `ggplot` makes available are well-chosen for their perceptual properties and aesthetic qualities. We can also use color and color layers as device for emphasis, to highlight particular data points or parts of the plot, perhaps in conjunction with other features.

We choose color palettes for mappings through one of the `scale_` functions for `color` or `fill`.

You can use the `RColorBrewer` package to make a wide range of named color palettes available to you, and choose from those. When used in conjunction with `ggplot`, you access these colors by specifying the `scale_color_brewer()` or `scale_fill_brewer()` functions, depending on the aesthetic you are mapping. 
]

---

# `RColorBrewer`

</div>

</div>

---

# `RColorBrewer` Example

```r
library(tidyverse)
p <- ggplot(data = iris, 
       mapping = aes(x = Sepal.Length, y = Sepal.Width, 
                     color = Species)) 
```

---

# `RColorBrewer` Example (2)

```r
p + 
  geom_point(size = 2) + 
  scale_color_brewer(palette = "Set2") +
  theme(legend.position = "top")
```
<br>
<br>
.small[
Available qualitative palettes:

Accent, Dark2, Paired, Pastel1, Pastel2, Set1, Set2, Set3
]

]

---

# `RColorBrewer` Example (3)

```r
p + 
  geom_point(size = 2) + 
  scale_color_brewer(palette = "Pastel2") +
  theme(legend.position = "top")
```
]

---

# `RColorBrewer` Example (4)

```r
p + 
  geom_point(size = 2) + 
  scale_color_brewer(palette = "Dark2") +
  theme(legend.position = "top")
```
]

---

# Setting Colors Manually

You can also specify colors manually, via `scale_color_manual()` or `scale_fill_manual()`. These functions take a value argument that can be specified as vector of _color names_ or _color values_ that R knows about.

R knows many color names (like `red`, and `green`, and `cornflowerblue`). Try running `demo('colors')` in the console for an overview.

Alternatively, color values can be specified via their [**hexadecimal RGB value**](https://www.rapidtables.com/convert/color/hex-to-rgb.html).

---

# Hexadecimal RGB value

.pull-left[
.small[
A way of encoding color values in the RGB color-space, where each channel can take a value from 0 to 255 like this. A color hex value begins with a hash or pound character, `#`, followed by **three pairs** of hexadecimal or "hex" numbers.

Hex values are in Base 16, with the first six letters of the alphabet standing for the numbers 10 to 15. This allows a two-character hex number to range from 0 to 255.

]
]

.pull-right[
.small[
You read them as `#rrggbb`, where `rr` is the two-digit hex code for the <span style="color:red">red</span> channel, `gg` for the <span style="color:green">green</span> channel, and `bb` for the <span style="color:blue">blue</span> channel. 
So `#CC55DD` translates in decimal to `CC = 204` (red), `55 = 85` (green), and `DD = 221` (blue). 
]
<img src="figs/pink_strong.png" width="90%" style="display: block; margin: auto;" />
]

---

# Custom Palette

.small[
Introduce a palette that is [friendly to color-blind viewers](https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40):
]

```r
cb_palette <- c("#999999", "#E69F00", 
                "#56B4E9", "#009E73",
                "#F0E442", "#0072B2", 
                "#D55E00", "#CC79A7")
```
<br>

```r
p + 
  geom_point(size = 2) + 
  scale_color_manual(values = cb_palette) +
  theme(legend.position = "top")
```
]

]

![](colors_files/figure-html/flowers4-1.png)

]

???

5 tips on designing colorblind-friendly visualizations

https://www.tableau.com/about/blog/2016/4/examining-data-viz-rules-dont-use-red-green-together-53463

R Graphics Cookbook, 2nd edition
Winston Chang

https://r-graphics.org/

---

layout: false
name: references
class: center middle section-title section-title-2 animated fadeIn

<div class="my-footer"><a href="https://www.reisanar.com/" target="_blank" rel="noopener"><span>@reisanar</span></a></div>

# Other Good<br>References

---

---

# Resources

.small[
- Robert Simmon has a great series of blog posts on [Subleties of Color](https://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/)

- [Paletton's Colorpedia](http://paletton.com/) is an encyclopedia of colors.

- [Adobe color wheel](https://color.adobe.com/create/color-wheel/)

- [I want hue](http://tools.medialab.sciences-po.fr/iwanthue/) to generate and refine palettes of optimally distinct colors.

- [viridis](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html): Perceptually uniform color scales.

- [ColorBrewer](http://colorbrewer2.org/): Sequential, diverging, and qualitative color palettes that take accessibility into account.

- [Colorgorical](http://vrl.cs.brown.edu/color): Create color palettes based on mathematical rules for perceptual distance.

- [Photochrome](https://photochrome.io/): Word-based color palettes.
]

---

# Resources (2)

- [Colours Cafe](https://www.instagram.com/colours.cafe/): Instagram account for colours inspiration

- [Vischeck](http://www.vischeck.com/vischeck/vischeckImage.php): Simulate how your images look for people with different forms of colorblindness (web-based)

- [Coolors.co](https://coolors.co/): hundreds of  color palettes and beautiful color schemes.

]

```r
scales::show_col(c("#532D8E", "#B1B3B5", "#5CB8B2", "#AF95D3", 
                   "#202C61", "#FFE9E9", "#EBC1F4", "#AC62D2"), ncol = 8)
```

]

![](colors_files/figure-html/polycolors-1.png)