2024-09-27 22:28:23 +00:00
---
theme: custom-theme
---
# Perception & Color
## CAPP 30239
2024-10-11 17:38:17 +00:00

<!-- photo CC - By https://flickr.com/photos/andreaskrispler/4651412740/ -->
2024-09-27 22:28:23 +00:00
---
## Today
- What matters most when creating a visualization?
- How does human **perception** factor into visualization design?
- Understanding **color** , and computational representations of it.
---
## What is the most important question when creating a visualization?
---
## What is the most important question when creating a visualization?
< ul >
< li > < s > Where will the data come from?< / s >
< li > < s > What type of chart do I use?< / s > < / li >
< li > Who is the audience?< / li >
< / ul >
---
## Audience First
- Who are you presenting to?
- How familiar are they with the data?
- What is their numerical & visualization literacy?
- Via what medium will they receive the information?
- What are you trying to do? (Persuade, Inform, Inspire?)
*Only now can we start thinking about data and presentation.*
---
## Perception
- **Selective** - We can only pay attention to so much.
- **Patterns** - Our brains are pattern-matching machines, audience will benefit from intentional patterns & be distracted by unintentional ones.
- **Limited working memory** - We hold a very limited set of information in our minds at once.
---
## What do you see?
< div class = "container" >
< div class = "col" >
2024-09-29 18:18:05 +00:00

2024-09-27 22:28:23 +00:00
< / div > < div class = "col" >
```python
alt.Chart(random_df).mark_point().encode(
alt.X("a"),
alt.Y("c"),
alt.Color("b"),
alt.Size("c"),
alt.Shape("a:N"),
alt.Fill("b"),
alt.Opacity("b"),
)
```
< / div >
< / div >
---
## What do you see?
< div class = "container" >
< div class = "col" >
2024-09-29 18:18:05 +00:00

2024-09-27 22:28:23 +00:00
```
alt.Chart(random_df).mark_line().encode(
x="a",
y="c",
)`
```
< / div >
< / div >
---
## Effectiveness Revisited

---
< div class = "container" >
< div class = "col" >
**Altair Channels**
- Position (`X, Y`)
- Angle (`Angle`)
- Area (`Radius`, `Size` )
- Hue, Saturation (`Color`)
- Texture (`Opacity`, `Fill` )
- Shape (mark type, `Shape` )
< / div >
< div class = "col" >
**What about?**
- Length
- Slope
- Volume
- Density
- Connection
- Containment
< / div >
< / div >
---
**Derived Properties**
- Length/Area - size of bars (`X`, `Y` )
- Slope & Density - affected by scale
- Connection - ex. layering of lines w/ points
- Containment - achieved with layering
What about *volume* ?
---
## Stevens' Power Law
Stevens (1975): Human response to sensory stimulus is characterized by a power law with different exponents with different stimuli.
perception = (magnitude of sensation)< sup > a< / sup >
Smaller < sup > a< / sup > exponent: harder to perceive changes.
Stevens measured values of a by exposing people to varied stimulus and asking them to compare magnitudes.
---
< div class = "container" > < div class = "col" >

< / div > < div class = "col" >
| Continuum | Exponent |
|-|-|
2024-09-29 18:18:05 +00:00
| Color **Brightness** | 0.33-0.5 |
2024-09-27 22:28:23 +00:00
| Smell| 0.6 |
| Loudness | 0.67 |
| **Depth Perception** | 0.67 |
| Area | 0.7 |
| 2D Planar Position | 1.0 |
| Warmth | 1.3-1.6 |
2024-09-29 18:18:05 +00:00
| Color **Saturation** | 1.7 |
2024-09-27 22:28:23 +00:00
| Electric Shock | 3.5 |
< / div > < / div >
---
## 3D Graphs

---

---

---
## Instead of 3D Graphs
2024-09-28 21:17:56 +00:00
- Find other channels: hue & size are good candidates. (bubble chart)
- Or make multiple 2D graphs with XY/YZ/XZ pairs.
2024-09-27 22:28:23 +00:00
2024-09-28 21:17:56 +00:00

2024-09-27 22:28:23 +00:00
---
2024-09-27 23:18:23 +00:00
## What is Color?
Wavelengths of light are perceived as particular colors:

2024-09-29 18:18:05 +00:00
What's missing?
2024-09-27 23:18:23 +00:00
<!-- credit: https://en.wikipedia.org/wiki/File:Linear_visible_spectrum.svg -->
---
## Color & the Eye
### Rods
- spread throughout retina
- more sensitive in low light conditions
2024-09-29 18:18:05 +00:00
- brightness ("lightness")
2024-09-27 23:18:23 +00:00
### Cones
- 3 types with peak sensitivity at different frequencies
- concentrated in center of eye
- less sensitive in low light conditions
2024-09-29 18:18:05 +00:00
- hue & saturation
2024-09-27 23:18:23 +00:00

<!-- source https://commons.wikimedia.org/wiki/File:Cone - fundamentals - with - srgb - spectrum.svg -->
---
2024-09-28 21:17:56 +00:00
## Spectrum vs. What We See
2024-09-27 23:18:23 +00:00
2024-09-28 21:17:56 +00:00
What we actually see is always a blend of multiple peaks.
This is impacted by ambient light conditions, as well as quirks of our visual processing.

In actuality, multiple combinations of light can give same color (**metamers**).
---
## Chromatic Adaptation

Source: Andrew Steele < https: / / www . youtube . com / channel / UC-XYsDNh4-886rMNLnnwR_w >
2024-09-27 23:18:23 +00:00
---
## Color Naming
2024-09-28 21:17:56 +00:00
Color naming is highly subjective, and research has shown that the ability to name a color correlates highly with the ability to distinguish it.

Be particularly careful with blue/green boundaries, as there are significant cultural differences.
Source: https://blog.xkcd.com/2010/05/03/color-survey-results/
2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00
## Cultural Considerations

2024-09-27 23:18:23 +00:00
2024-09-28 21:17:56 +00:00
- American audiences associated < span color = "red" > red</ span > & < span color = "blue" > blue</ span > with political parties on any map in a political context.
- Also international meaning of < span color = "red" > red</ span > & < span color = "blue" > blue</ span > is flipped: red is left, blue is right.
- Most other colors have contradictory meanings depending on culture. For example, yellow might be chosen to denote success (parts of Africa) or be associated with death (Middle East).
2024-09-27 23:18:23 +00:00
2024-09-28 21:17:56 +00:00
<!-- Source: https://www.color - meanings.com/color - symbolism - different - cultures/ -->
2024-09-27 23:18:23 +00:00
2024-09-28 21:17:56 +00:00
<!-- image from wikipedia: UK House of Commons -->
2024-09-27 23:18:23 +00:00
---
2024-09-29 18:18:05 +00:00
## Color Vision Deficiency
More accurate name for what is commonly known as colorblindness.
- Red-Green CVD - most common
- four types: Dueteranomaly and Protanomaly (mild) to Protanopia and Dueteranopia (complete)
- Tritanomaly/Tritanopia: blue/green and yellow/red confusion.
- rarest, complete lack of color vision, usually corresponds to other vision issues as well

---
2024-09-28 21:17:56 +00:00
## Color on a Page
2024-09-27 23:18:23 +00:00
2024-09-28 21:17:56 +00:00

Ink absorbs light, so we work with subtractive blending. Our base colors are cyan, magenta, and yellow. To save on ink costs, we throw in black/contrast as well.
We call this CMYK color.
2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00
## Color on a Screen
2024-09-27 23:18:23 +00:00
2024-09-28 21:17:56 +00:00
Screens emit light, which means we use **additive blending** of red, green, and blue light. Every pixel of a screen can emit these three colors in different intensities.
2024-09-27 23:18:23 +00:00
2024-09-29 18:18:05 +00:00

---
## Color Spaces
Ways of describing a color mathematically, usually have 3 components to match our perception of color:
- RGB (early photography)
- CIE XYZ (1931)
- HSB/HSV/HSL (1970s)

<!-- https://commons.wikimedia.org/wiki/File:Rgb - compose - Alim_Khan.jpg -->
---
2024-09-28 21:17:56 +00:00
A common way to refer to colors is by their intensity in each of these three channels.
2024-09-27 23:18:23 +00:00
2024-09-29 18:18:05 +00:00
< span style = "color: rgb(0% 100% 0%)" > this is 0% red, 100% green, 0% blue intensity (#00ff00)< / span >
< span style = "color: rgb(20% 60% 20%)" > this is 20% red, 60% green, 20% blue intensity: (#143c14)< / span >
< span style = "color: #ff00ff " > this is 100% red, 0% green, 100% blue intensity: #ff00ff </ span >
2024-09-27 23:18:23 +00:00
2024-09-29 18:18:05 +00:00
This is sometimes expressed in hexadecimal:
2024-09-27 23:18:23 +00:00
2024-09-29 18:18:05 +00:00


2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00
### RGB space as a cube

2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00
### RGB as pair plots

Remember this trick for your own 3-dimensional data!
2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00

A slice through the middle of the cube gives colors of comparable brightness. (You may have seen such a triangle in color pickers.)
2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00
## HSL

An alternative color space that's very useful for visualization is HSL color space.
2024-09-29 18:18:05 +00:00
Hue, Saturation, Lightness | < https: / / hslpicker . com / >
2024-09-27 23:18:23 +00:00
---
2024-09-28 21:17:56 +00:00
## Aside: What about "alpha"?
2024-09-27 23:18:23 +00:00
You will often see a fourth channel: RGB**A**, HSL**A**.
This is known as alpha transparency (translucency).
2024-09-28 21:17:56 +00:00
This has to do with how the program in question *blends* the colors. The final pixel values on the screen will still be converted to RGB components.
2024-09-27 23:18:23 +00:00
- Use sparingly.
- Variations are very subtle, and background dependent.
2024-09-28 21:17:56 +00:00
<!-- image source: https://upload.wikimedia.org/wikipedia/commons/3/34/RGB_pixels.jpg -->
---
2024-09-29 18:18:05 +00:00
## CIE (RGB / XYZ / CIELAB)
Based on human perception experiments where people would adjust dials to recreate colors out of red, green, and blue light.
2024-09-28 21:17:56 +00:00
2024-09-29 18:18:05 +00:00
First from 1920s, revised in 1970s.
*Commission internationale de l'éclairage* (Illumination)
2024-09-28 21:17:56 +00:00

---
## Screen Gamut
Screens can't show the entire range of visible colors accurately, they define a "gamut". Since ~1996 most devices aim at a standard gamut to ensure similar representations of color, but even high end devices are not perfectly aligned.

Projectors (like the one you're likely viewing this on) usually have skewed gamut.
Moral of the story: **Consider your medium!**
---
## What does all this mean for visualization?
Color choices should be made with respect to:
- medium (screen vs. print, type of screen)
- audience (culture, vision differences, expectations)
- differentiability
2024-10-11 17:38:17 +00:00
Using HSL to build a palette allows you to choose uniform brightness/saturation and pick hues as close together/far apart as needed.
2024-09-28 21:17:56 +00:00
---
## Role of Color
- **Identify** - Different color per category/actor.
- opt for distinct hues
- **Group** - Group like entities using same/like colors.
- often with similar hues
- **Layer** - Overlay different information while keeping contrast.
- saturation differences very important to not overwhelm eye
- **Highlight** - Call out important/relevant information.
- brightness and hue differences important
---
## Color Channels & Data Types
2024-09-29 18:18:05 +00:00
### Lightness is perceived as ordered
Good for **Ordinal** variables

**Quantitative** (Continuous) variables harder to discern

### Hue typically unordered
**Nominal** variables.

---
2024-09-28 21:17:56 +00:00
### Types of Palettes
2024-09-29 18:18:05 +00:00
- Qualitative - Nominal data
- Sequential - Quantitative data
- Diverging - Data with a meaningful zero-point (increase/decrease, more/less)
2024-09-28 21:17:56 +00:00
2024-09-29 18:18:05 +00:00

2024-09-28 21:17:56 +00:00
2024-09-29 18:18:05 +00:00
<!-- source: Peter Aldhous, NICAR 2016 -->
2024-09-28 21:17:56 +00:00
---
2024-09-29 18:18:05 +00:00
### Hue Separation
2024-09-28 21:17:56 +00:00
2024-09-29 18:18:05 +00:00
Pick distinct hues for unrelated variables.
Grouped schemes can be used where there are relationships among the categories.

2024-09-28 21:17:56 +00:00
2024-09-29 18:18:05 +00:00
< https: / / vega . github . io / vega / docs / schemes / >
2024-09-28 21:17:56 +00:00
2024-10-05 03:56:07 +00:00
---
## Color Tips
- Aim for no more than ~6 colors that need to be distinguished.
- Colors should be distinct & differentiable by name.
- Be mindful of cultural considerations & symbolism.
- Ensure color schemes chosen appropriately for types of data.
- "Get it right in black & white"
2024-09-28 21:17:56 +00:00
---
## "Get it right in black & white"
A common mantra among visual designers.
2024-09-29 18:18:05 +00:00
Ensure that your hues have different brightness levels.
2024-09-28 21:17:56 +00:00
Ensure that you aren't using hue alone for your image.
2024-09-29 18:18:05 +00:00

---
## Text Legibility
An important issue when using colored text and/or backgrounds is **legibility** .
Web Content Accessibility Guidelines require a 4.5 color contrast (3:1 for large text).
Minimize *saturation* in backgrounds, pick a font color with opposing *lightness* .
< https: / / webaim . org / resources / contrastchecker / >

2024-09-27 23:18:23 +00:00
---
## Tools
2024-09-27 22:28:23 +00:00
2024-09-28 21:17:56 +00:00
- Vega Schemes: https://vega.github.io/vega/docs/schemes/
- Contrast/theme exploration: https://schubert-da.github.io/dataviz-palette-tool/
- Theme exploration for cartography: < https: // colorbrewer2 . org />
- Color-theory based theme creator: https://meodai.github.io/poline/
- Theme creator w/ theme sharing: https://coolors.co
2024-09-29 18:18:05 +00:00
- HSL/RGB picker: < https: // hslpicker . com />
- Contast checker: < https: // webaim . org / resources / contrastchecker />
2024-09-28 21:17:56 +00:00
### Color-Blindness
- MacOS/iOS app: https://michelf.ca/projects/sim-daltonism/
- Browser extensions (search "colorblindness" in your browser of choice)
2024-09-27 22:28:23 +00:00
---
## Acknowledgements & References
Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.
2024-09-28 21:17:56 +00:00
Color space images are from < https: / / jamie-wong . com / post / color / > , which is an incredible resource if you'd like to go deeper into both the biology and math of color.
2024-09-27 22:28:23 +00:00
- https://www.math.csi.cuny.edu/~mvj/GC-DataViz-S23/lectures/L6.html
- https://en.wikipedia.org/wiki/Stevens%27s_power_law
2024-09-27 23:18:23 +00:00
- https://colorusage.arc.nasa.gov
2024-09-29 18:18:05 +00:00
- https://vega.github.io/vega/docs/schemes/