CSE 442 - Data Visualization

Color

Leilani Battle University of Washington

Purpose of Color

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

“Above all, do no harm.”

- Edward Tufte
Learning Goals
How is color defined in visualization?

How do we reason about color:

as rendered within media?
as perceived by the human eye?

What are useful rules of thumb for applying color

in visualizations?
Topics
Perception of Color
Light
Visual system – Cone Response, Opponent Signals
Mental models – Perception, Appearance,
Cognition

Color in Information Visualization

Categorical & Quantitative encoding
Guidelines for color palette design
Perception of Color
What color is this?
What color is this?

“Yellow”
What color is this?
What color is this?

“Blue”
What color is this?
What color is this?

“Teal” ?
Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Physicist’s View
Light as electromagnetic waves
Wavelength
Visible spectrum is

370-730 nm
Power or
“Relative luminance”

A Field Guide to Digital Color, M. Stone

Emissive vs. Reflective Light

Additive Subtractive
(digital displays) (print, e-paper)
Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Retina

Simple Anatomy of the Retina, Helga Kolb

As light enters our retina…
LMS (Long, Middle, Short) Cones
Sensitive to different wavelengths

A Field Guide to Digital Color, M. Stone

As light enters our retina…
LMS (Long, Middle, Short) Cones
Sensitive to different wavelengths
Integration with input stimulus

A Field Guide to Digital Color, M. Stone

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

“Tri-stimulus”
Computer displays
Digital scanners
Digital cameras
We Use Color Spaces to Express
Color Ranges
Color spaces allow us to capture, index, and
enumerate colors perceived by the human eye.

Given a set of input parameters, we can extract the

corresponding color from the color space

We can also plot the color space to see its

organization and relationships between colors
CIE XYZ Color Space
Standardized in 1931 to mathematically represent
tri-stimulus response from cones on the retina.
“Standard observer” response curves
CIE Chromaticity Diagram
Colorfulness vs. Brightness
x = X / (X+Y+Z) y
y = Y / (X+Y+Z)

x
CIE Chromaticity Diagram
Spectrum locus

Purple line

Mixture of two
lights appears as
a straight line.
CIE Chromaticity Diagram
Spectrum locus

Purple line

Mixture of two
lights appears as
a straight line.
CIE Chromaticity Diagram
Spectrum locus

Purple line

Mixture of two
lights appears as
a straight line.
CIE Chromaticity Diagram
Spectrum locus

Purple line

Mixture of two
lights appears as
a straight line.
Display Gamuts
Typically defined by:
3 Colorants
Convex region
Display Gamuts
Deviations from
sRGB specification

Example:
(R, G, B) coordinates
ranging from 0-255.
Displays may
produce different
colors for a coord!
Color Vision Deficiency (CVD)
Missing one or more cones or rods in retina.

Protanope Deuteranope Luminance

Normal Retina Protanopia
Color Vision Simulators

Simulate color vision deficiencies

Browser plug-ins
Photoshop plug-ins, etc.

Deuteranope Protanope Tritanope

Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Primary Colors
To paint “all colors”:
Leonardo da Vinci, circa 1500 described in his
notebooks a list of simple colors…

Yellow
Blue
Green
Red
Opponent Processing

LMS are combined to create:

Lightness L M S
Red-green contrast
Yellow-blue contrast

+ - +
+ + + + + -

A R-G Y-B
[Fairchild]
Opponent Processing

LMS are combined to create:

Lightness
Red-green contrast
Yellow-blue contrast
Opponent Processing

LMS are combined to create:

Lightness
Red-green contrast
Yellow-blue contrast

Experiments:
No reddish-green, no blueish-yellow
Color after images
CIE LAB Color Space
Axes correspond to opponent signals
L* = Luminance
a* = Red-green contrast
b* = Yellow-blue contrast
Much more perceptually uniform than RGB!
Scaling of axes to represent “color distance”
JND = Just noticeable difference (~2.3 units)
D3 + Vega include LAB color space support
CIE LAB and LUV Color Spaces
Standardized in 1976 to mathematically represent
opponent processing theory.
Non-linear transformation of CIE XYZ
CIE LAB Color Space
Axes correspond to opponent signals
L* = Luminance
a* = Red-green contrast
b* = Yellow-blue contrast
Much more perceptually uniform than sRGB!
Scaling of axes to represent “color distance”
JND = Just noticeable difference (~2.3 units)
D3 + Vega include LAB color space support!
Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Albert Munsell
Developed the first perceptual color system based
on his experience as an artist (1905).
Hue, Value, and Chroma
Hue, Value and Chroma

Hue
Hue, Value and Chroma

Value
Hue, Value and Chroma

Chroma
Munsell Color System
Perceptually-based
Precisely reference a color
Intuitive dimensions
Look-up table (LUT)
Munsell Color System
Perceptual Brightness

Color palette
Perceptual Brightness

Color palette

HSL Lightness
(Photoshop)
Perceptual Brightness

Color palette

Luminance Y
(CIE XYZ)
Perceptual Brightness

Color palette

Munsell Value
Perceptual Brightness

Color palette

Munsell Value
L* (CIE LAB)
Perceptually-Uniform Color Space
Munsell colors in CIE LAB coordinates

Mark Fairchild
Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Color Appearance
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

Josef Albers
Simultaneous Contrast
Inner & outer rings are the same physical purple.

Donald
MacLeod
Bezold Effect
Color appearance depends on adjacent colors

Color Appearance Tutorial by Maureen Stone

Crispening
Perceived difference depends on background

Color Appearance Models, Fairchild

Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Basic Color Terms
Chance discovery by Brent Berlin and Paul Kay.
Basic Color Terms
Chance discovery by Brent Berlin and Paul Kay.

Initial study in 1969

Surveyed speakers from 20 languages
Literature from 69 languages
World Color Survey
World Color Survey
World Color Survey
Naming information from 2,616
speakers from 110 languages on
330 Munsell color chips
Results from WCS
Results from WCS
Universal (?) Basic Color Terms
Basic color terms recur across languages.

White Red Pink

Grey Yellow Brown

Black Green Orange

Blue Purple
Evolution of Basic Color Terms
Proposed term evolution across languages.
Naming Effects Color Perception
Color name boundaries

Green Blue
Rainbow Color Map
We associate and group colors together, often
using the name we assign to the colors.
Rainbow Color Map
We associate and group colors together, often
using the name we assign to the colors.
Rainbow Color Map
We associate and group colors together, often
using the name we assign to the colors.
Icicle Tree with Rainbow Coloring

Color names conflict

with tree structure!
Color Naming Models [Heer & Stone ‘12]

Model 3 million responses from XKCD survey

Bins in LAB space
sized by saliency:
How much do people
Orange/red
boundary
agree on color name?
Modeled by entropy
of p(name | color) Blue/green
confusion
Perception of Color

+++ +- + ++ -
A R-G Y-B
Light Cone Response Opponent Signals

“Yellow”

Color Cognition Color Appearance Color Perception

Designing Colormaps
Colormap Design Considerations

Perceptually distinguishable colors

Value distance matches perceptual distance
Colors and concepts properly align
Aesthetically pleasing, intriguing
Respect color vision deficiencies
Should survive printing to black & white
Don’t overwhelm people’s capability!
Discrete (Binary, Categorical)

Continuous (Sequential, Diverging, Cyclic)

Discretized Continuous
Categorical Color
Gray’s Anatomy

Superficial dissection of the right side of the neck, showing the carotid and
subclavian arteries. (http://www.bartleby.com/107/illus520.html)
Allocation of the Radio Spectrum

http://www.ntia.doc.gov/osmhome/allochrt.html
Allocation of the Radio Spectrum

http://www.ntia.doc.gov/osmhome/allochrt.html
Allocation of the Radio Spectrum

Issues:
Too many colors
Hard to remember mapping
Colors not distinctive, some are very similar
Poor grouping: similar colors, different values
Labels cause clutter
Color surround effects
Colors interactions may not look good together

http://www.ntia.doc.gov/osmhome/allochrt.html
Palette Design & Color Names
Minimize overlap and ambiguity of colors.

http://vis.stanford.edu/color-names
Palette Design & Color Names
Minimize overlap and ambiguity of colors.

http://vis.stanford.edu/color-names
Quantitative Color
Rainbow Color Maps
 Be Wary of Naïve Rainbows!

1. Hues are not naturally ordered

2. People segment colors into classes, perceptual banding
3. Naive rainbows are unfriendly to color blind viewers
4. Some colors are less effective at high spatial frequencies
But rainbow helpful for inference?

Reda et al. ’21: Color Nameability Predicts Inference Accuracy in Spatial Visualizations

Rainbow found ineffective for value comparison [Liu ’18]…

…but color name salience found to improve performance
on inference task of distinguishing distributions [Reda ’21]
Task matters!
Steps, rather than Gradients?
Classing Quantitative Data

Age-adjusted mortality rates for the United States.

Common option: break into 5 or 7 quantiles.
Classing Quantitative Data
1. Equal interval (arithmetic progression)
2. Quantiles (recommended)
3. Standard deviations
4. Clustering (Jenks’ natural breaks / 1D K-Means)
Minimize within group variance
Maximize between group variance
Quantitative Color Encoding
Sequential color scale
Ramp in luminance, possibly also hue
Higher value -> darker color (or vice versa)
Quantitative Color Encoding
Sequential color scale
Ramp in luminance, possibly also hue
Higher value -> darker color (or vice versa)

Diverging color scale

Useful when data has meaningful “midpoint”
Use neutral color (e.g., grey) for midpoint
Use saturated colors for endpoints
Quantitative Color Encoding
Sequential color scale
Ramp in luminance, possibly also hue
Higher value -> darker color (or vice versa)

Diverging color scale

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

Limit number of steps in color to 3-9

Why?
Quantitative Color Encoding
Sequential color scale
Ramp in luminance, possibly also hue
Higher value -> darker color (or vice versa)

Diverging color scale

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

Limit number of steps in color to 3-9

Avoid simultaneous contrast, hold mappings in memory
Sequential Scales: Single-Hue
Ramp primarily in luminance, subtle hue difference

http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
Sequential Scales: Multi-Hue
Ramp luminance & hue in perceptual color space
Avoid contrasts subject to color blindness!
Sequential Scales: Multi-Hue

Viridis, https://bids.github.io/colormap/
Diverging Color Scheme
Designing Diverging Scales

http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
Designing Diverging Scales
Hue Transition
Carefully Handle Midpoint
Choose classes of values
Low, Average, High - Average should be gray
Critical Breakpoint
Defining value e.g., 0
Positive & negative should use different hues
Extremes saturated, middle desaturated
Hints for the Colorist
Use only a few colors (~6 ideal)
Colors should be distinctive and named
Strive for color harmony (natural colors?)
Use cultural conventions; appreciate symbolism
Get it right in black and white
Respect the color blind
Take advantage of perceptual color spaces
Color is cultural and a matter of taste!
Administrivia
A3: Interactive Prototype

Create an interactive visualization. Choose a

driving question for a dataset and develop an
appropriate visualization + interaction techniques,
then deploy your visualization on the web.
Due by 11:59pm on Monday, Feb 13.
We encourage you to form teams of 3-4 people.
Form A3 + Final Project Team

Form a team of 3-4 for A3 and the Final Project.

(Start thinking about your Final Project, too!)
A3 is open-ended. You can use it to start exploring
your FP topic if you like, or expand on A2.

Submit signup form by Fri 2/3, 11:59pm.

If you do not have team mates, you should:
- Post on Ed about your interests/project ideas
Requirements

Interactive. You must implement interaction methods!

However, this is not only selection / filtering / tooltips.
Also consider annotations or other narrative features to
draw attention and provide additional context
Web-based. D3 is encouraged, but not required.
Deploy visualization with GitHub pages or Observable.
Write-up. Provide design rationale on your web page.
Interactive Prototype Tips

Start now. It will take longer than you think.

Keep it simple. Choose a minimal set of interactions that
enables users to explore and generate interesting
insights. Do not feel obligated to convey everything
about the data: focus on a compelling subset.
Promote engagement. How do your chosen interactions
reveal interesting observations?
Tutorial on Friday

Web Publishing: Friday 2/3 4:30-6pm in

G20, Led by Aakash and Wei Jun