Stanford CS448B 11 Color

TLDR

This article contains my notes from Stanford's CS448B (Data Visualization) course, specifically focusing on the eleventh lecture about color. I'll discuss the importance of color in data visualization, the principles behind it, and explore various techniques for visualizing data, including the use of guides, expressiveness, effectiveness, support for comparison and pattern perception, grouping and sorting data, transforming data, reducing cognitive overhead, and consistency. I'll also cover various chart types, such as line charts, bar charts, stacked area charts, and others, providing examples and discussing their design considerations.

Original

Notes

Purpose of Color

• To label
• To measure
• To represent and imitate
• To enliven and decorate

“Above all, do no harm.”

- Edward Tufte

Color Perception

• Physical World
• Visual System
• Mental Models

Physicist’s view of color:

Light as electromagnetic wave
Energy or “Relative power” across visible spectrum of wavelengths

Emissive vs. reflective light

1. Retina

2. As light enters our retina

LMS (Long, Middle, Short) Cones

• Sensitive to different wavelength
• Integration with input stimulus

$L = \int_\lambda L(\lambda)S(\lambda)d\lambda$
$M = \int_\lambda M(\lambda)S(\lambda)d\lambda$
$S = \int_\lambda S(\lambda)S(\lambda)d\lambda$

3. Effects of Retina Encoding

Spectra that stimulate the same LMS response are indistinguishable (a.k.a. “metamers”).

Tri-stimulus response

• Computer displays
• Digital scanners
• Digital cameras

CIE XYZ Color Space

Standardized in 1931 to mathematically represent tri-stimulus response

“Standard observer” response curves:

Color Blindness

Notes

Color Blindness Simulators:
https://pilestone.com/pages/color-blindness-simulator-1
https://www.color-blindness.com/coblis-color-blindness-simulator/#google_vignette

Primary Colors

LMS are linearly combined to create:

• Lightness
• Red-green contrast
• Yellow-blue contrast

Example

Experiments: No reddish green, no bluish yellow color after images

CIE LUV and LAB color spaces

Standardized in 1976 to mathematically represent opponent processing theory.

Axes of CIE LAB

Correspond to opponent signals
L* = Luminance
a* = Red-green contrast
b* = Yellow-blue contrast

Scaling of axes to represent “color distance” JND = Just noticeable difference (~2.3 units)

---

Munsell Atlas

Hue, Value, Chroma

Perceptual brightness

HLS, HSV, HSB NOT perceptual models Simple re-notation of RGB

• View along gray axis
• See a hue hexagon
• L or V is grayscale pixel value

Cannot predict perceived lightness

---

If we have a perceptually-uniform color space, can we predict how we perceive colors?

In order to use color effectively it is necessary to recognize that it deceives continually.

- Josef Albers, Interaction of Color

Simultaneous Contrast

The lines on both sides are the same color

---

Inner and outer thin rings are the same color

Bezold Effect

The fill colors on both sides are the same color

Crispening

Perceived difference depends on background

Spreading

Adjacent colors blend

Spatial frequency

• The paint chip problem
• Small text, lines, glyphs
• Image colors

Basic color terms

Chance discovery by Brent Berlin and Paul Kay

Initial study in 1969 Surveyed speakers from 20 languages Literature from 69 languages

Seven levels in which cultures fall:

• Stage I: Dark-cool and light-warm (this covers a larger set of colors than just English "black" and "white".)
• Stage II: Red
• Stage III: Either green or yellow
• Stage IV: Both green and yellow
• Stage V: Blue
• Stage VI: Brown
• Stage VII: Purple, pink, orange, or gray

Basic color terms recur across languages

Naming affects color perception

Notes

It is indeed very interesting that despite significant differences in culture and language, the perception of color boundaries is almost consistent.

Colors according to XKCD...

Using Color in Visualization

Colormap Design Considerations

1. Perceptually distinguishable colors
2. Value distance matches perceptual distance
3. Colors and concepts properly align
4. Aesthetically pleasing, intriguing
5. Respect color vision deficiencies
6. Should survive printing to black & white
7. Don’t overwhelm people’s capability

Categorical Color

• Gray’s Anatomy
  
  Superficial dissection of the right side of the neck, showing the carotid and subclavian arteries

• Radio Spectrum Map

Issues:

1. Too many colors
2. Hard to remember mapping
3. Colors not distinctive
4. Poor grouping; similar bands with dissimilar colors
5. Labels cause clutter
6. Color surround effects
7. Color interactions; adjacent colors don’tlook good next to each other

Minimize overlap and ambiguity of color names

Standford Vis Group: Color Names

Quantitative Color

Avoid Mapping Data to Color (Rainbows)

1. Hues are not naturally ordered
2. People segment colors into classes, perceptual banding
3. Naïve rainbows unfriendly to color blind viewers
4. Low luminance colors (blue) hide high frequencies

Artery Visualization

Steps, rather than gradients

Age-adjusted mortality rates for the United States
Common option: break into 5 or 7 quantiles

• Equal interval (arithmetic progression)
• Quantiles (recommended)
• Standard deviations
• Clustering (Jenks’ natural breaks / 1D K-Means)
• Minimize within group variance
• Maximize between group variance

Sequential color scale
Ramp in luminance, possibly also hue
Typically higher values map to darker colors

Diverging color scale
Useful when data has a meaningful “midpoint”
Use neutral color (e.g., grey) for midpoint
Use saturated colors for endpoints

*Limit number of steps in color to 3-9

Summary

• Color perception
  • Better acuity for luminance than for hue
  • Beware of simultaneous contrast, crispening, spreading
• Color naming
  • Use colors that are easily distinguished by name
• Color palettes
  • Use small number of hues (about 6)
  • Avoid rainbow palette except in special cases
  • Steal well designed palettes (e.g. ColorBrewer)
  • Consider sequential and diverging scales for Q data