courses.cs.washington.edu - cse 442 - data visualization...
TRANSCRIPT
![Page 1: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/1.jpg)
CSE 442 - Data Visualization
Color
Matthew Conlen University of Washington
![Page 2: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/2.jpg)
Identify, Group, Layer, Highlight
Colin Ware
Color in Visualization
![Page 3: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/3.jpg)
To label To measure To represent and imitate To enliven and decorate
“Above all, do no harm.” - Edward Tufte
Purpose of Color
![Page 4: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/4.jpg)
Perception of Color Light, Visual system, Mental models
Color in Information Visualization Categorical & Quantitative encoding Guidelines for color palette design
Topics
![Page 5: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/5.jpg)
Perception of Color
![Page 6: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/6.jpg)
What color is this?
![Page 7: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/7.jpg)
“Yellow”
What color is this?
![Page 8: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/8.jpg)
What color is this?
![Page 9: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/9.jpg)
“Blue”
What color is this?
![Page 10: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/10.jpg)
What color is this?
![Page 11: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/11.jpg)
“Teal” ?
What color is this?
![Page 12: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/12.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 13: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/13.jpg)
Light as electromagnetic wave
Wavelength Energy or “Relative luminance”
A Field Guide to Digital Color, M. Stone
Physicist’s View
![Page 14: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/14.jpg)
Additive (digital displays)
Subtractive (print, e-paper)
Emissive vs. Reflective Light
![Page 15: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/15.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 16: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/16.jpg)
Simple Anatomy of the Retina, Helga Kolb
Retina
![Page 17: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/17.jpg)
LMS (Long, Middle, Short) Cones Sensitive to different wavelength
A Field Guide to Digital Color, M. Stone
As light enters our retina…
![Page 18: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/18.jpg)
LMS (Long, Middle, Short) Cones Sensitive to different wavelength Integration with input stimulus
A Field Guide to Digital Color, M. Stone
As light enters our retina…
![Page 19: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/19.jpg)
Spectra that stimulate the same LMS response are indistinguishable (a.k.a. “metamers”).
“Tri-stimulus” Computer displays Digital scanners Digital cameras
Effects of Retina Encoding
![Page 20: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/20.jpg)
Standardized in 1931 to mathematically represent tri-stimulus response.
“Standard observer” response curves
CIE XYZ Color Space
![Page 21: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/21.jpg)
Colorfulness vs. Brightness x = X / (X+Y+Z) y = Y / (X+Y+Z)
x
y
CIE Chromaticity Diagram
![Page 22: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/22.jpg)
Spectrum locus
Purple line
Mixture of two lights appears as a straight line.
CIE Chromaticity Diagram
![Page 23: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/23.jpg)
Spectrum locus
Purple line
Mixture of two lights appears as a straight line.
CIE Chromaticity Diagram
![Page 24: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/24.jpg)
Spectrum locus
Purple line
Mixture of two lights appears as a straight line.
CIE Chromaticity Diagram
![Page 25: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/25.jpg)
Spectrum locus
Purple line
Mixture of two lights appears as a straight line.
CIE Chromaticity Diagram
![Page 26: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/26.jpg)
Typically defined by:
3 Colorants
Convex region
Display Gamuts
![Page 27: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/27.jpg)
Deviations from sRGB specification
Display Gamuts
![Page 28: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/28.jpg)
Missing one or more cones or rods in retina.
Color Blindness
Protanope Deuteranope Luminance
![Page 29: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/29.jpg)
Normal Retina Protanopia
![Page 30: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/30.jpg)
Simulate color vision deficiencies Browser plug-ins (NoCoffee, SEE, …) Photoshop plug-ins, etc…
Deuteranope Protanope Tritanope
Color Blindness Simulators
![Page 31: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/31.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 32: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/32.jpg)
To paint “all colors”: Leonardo da Vinci, circa 1500 described in his notebooks a list of simple colors…
Yellow Blue Green Red
Primary Colors
![Page 33: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/33.jpg)
A R-G Y-B
+++ +++ +
- -
Fairchild
L M S
Opponent Processing
LMS are combined to create: Lightness Red-green contrast Yellow-blue contrast
![Page 34: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/34.jpg)
Opponent Processing
LMS are combined to create: Lightness Red-green contrast Yellow-blue contrast
![Page 35: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/35.jpg)
Opponent Processing
LMS are combined to create: Lightness Red-green contrast Yellow-blue contrast
Experiments: No reddish-green, no blueish-yellow Color after images
![Page 36: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/36.jpg)
![Page 37: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/37.jpg)
![Page 38: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/38.jpg)
Standardized in 1976 to mathematically represent opponent processing theory.
Non-linear transformation of CIE XYZ
CIE LAB and LUV Color Spaces
![Page 39: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/39.jpg)
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 includes LAB color space support!
CIE LAB Color Space
![Page 40: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/40.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 41: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/41.jpg)
Developed the first perceptual color system based on his experience as an artist (1905).
Albert Munsell
![Page 42: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/42.jpg)
Hue, Value and Chroma
![Page 43: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/43.jpg)
Hue
Hue, Value and Chroma
![Page 44: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/44.jpg)
Value
Hue, Value and Chroma
![Page 45: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/45.jpg)
Chroma
Hue, Value and Chroma
![Page 46: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/46.jpg)
Perceptually-based Precisely reference a color Intuitive dimensions Look-up table (LUT)
Munsell Color System
![Page 47: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/47.jpg)
Munsell Color System
![Page 48: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/48.jpg)
Color palette
Perceptual Brightness
![Page 49: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/49.jpg)
Color palette
HSL Lightness (Photoshop)
Perceptual Brightness
![Page 50: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/50.jpg)
Color palette
Luminance Y (CIE XYZ)
Perceptual Brightness
![Page 51: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/51.jpg)
Color palette
Munsell Value
Perceptual Brightness
![Page 52: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/52.jpg)
Color palette
Munsell Value L* (CIE LAB)
Perceptual Brightness
![Page 53: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/53.jpg)
Munsell colors in CIE LAB coordinates
Mark Fairchild
Perceptually-Uniform Color Space
![Page 54: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/54.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 55: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/55.jpg)
If we have a perceptually-uniform color space, can we predict how we perceive colors?
Color Appearance
![Page 56: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/56.jpg)
“In order to use color effectively it is necessary to recognize that it deceives continually.”
- Josef Albers, Interaction of Color
![Page 57: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/57.jpg)
![Page 58: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/58.jpg)
![Page 59: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/59.jpg)
![Page 60: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/60.jpg)
Josef Albers
Simultaneous Contrast
![Page 61: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/61.jpg)
Simultaneous Contrast
Josef Albers
![Page 62: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/62.jpg)
Inner & outer rings are the same physical purple.
Donald MacLeod
Simultaneous Contrast
![Page 63: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/63.jpg)
Chromatic Adaptation
![Page 64: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/64.jpg)
Chromatic Adaptation
![Page 65: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/65.jpg)
Color appearance depends on adjacent colors
Color Appearance Tutorial by Maureen Stone
Bezold Effect
![Page 66: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/66.jpg)
Color Appearance Models, Fairchild
Perceived difference depends on background
Crispening
![Page 67: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/67.jpg)
Spatial frequency The paint chip problem Small text, lines, glyphs Image colors
Adjacent colors blend
Foundations of Vision, Brian Wandell
Spreading
![Page 68: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/68.jpg)
If we have a perceptually-uniform color space, can we predict how we perceive colors?
Chromatic adaptation Luminance adaptation Simultaneous contrast Spatial effects Viewing angle
Color Appearance
![Page 69: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/69.jpg)
iCAM models: Chromatic adaptation Appearance scales Color difference Crispening Spreading HDR tone mapping
(see also CIECAM02)
Mark Fairchild
iCAM
![Page 70: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/70.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 71: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/71.jpg)
Chance discovery by Brent Berlin and Paul Kay.
Basic Color Terms
![Page 72: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/72.jpg)
Chance discovery by Brent Berlin and Paul Kay.
Basic Color Terms
![Page 73: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/73.jpg)
Chance discovery by Brent Berlin and Paul Kay.
Initial study in 1969 Surveyed speakers from 20 languages Literature from 69 languages
Basic Color Terms
![Page 74: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/74.jpg)
World Color Survey
![Page 75: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/75.jpg)
World Color Survey
![Page 76: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/76.jpg)
Naming information from 2616 speakers from 110 languages on 330 Munsell color chips
World Color Survey
![Page 77: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/77.jpg)
Results from WCS
![Page 78: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/78.jpg)
Results from WCS
![Page 79: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/79.jpg)
Basic color terms recur across languages.
White
Grey
Black
Red
Yellow
Green
Blue
Pink
Orange
Brown
Purple
Universal (?) Basic Color Terms
![Page 80: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/80.jpg)
Proposed universal evolution across languages.
Evolution of Basic Color Terms
![Page 81: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/81.jpg)
We associate and group colors together, often using the name we assign to the colors.
Rainbow Color Map
![Page 82: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/82.jpg)
We associate and group colors together, often using the name we assign to the colors.
Rainbow Color Map
![Page 83: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/83.jpg)
We associate and group colors together, often using the name we assign to the colors.
Rainbow Color Map
![Page 84: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/84.jpg)
Color name boundaries
Green Blue
Naming Effects Color Perception
![Page 85: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/85.jpg)
Color names conflict with tree structure!
Icicle Tree with Rainbow Coloring
![Page 86: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/86.jpg)
Color Naming Models
Model 3 million responses from XKCD survey
Bins in LAB space sized by saliency:
How much do people agree on color name?
Modeled by entropy of p(name | color)
[Heer & Stone ‘12]
Blue/green confusion
Orange/red boundary
![Page 87: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/87.jpg)
A R-G Y-B
+++ +++ +- -
“Yellow”
Light Cone Response Opponent Signals
Color PerceptionColor AppearanceColor Cognition
Perception of Color
![Page 88: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/88.jpg)
Administrivia
![Page 89: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/89.jpg)
Available on Canvas I like - Identify some things that you like about the project. I wish - Identify alternative designs or interactions that you wish the authors had explored. What if? - Think about any outside the box alternatives that the authors may not have considered
A3 Peer Review
![Page 90: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/90.jpg)
Details on course website.
Interactive Dashboard. Create an interactive dashboard appropriate for an interested general audience. The dashboard might allow users to interactively explore a dataset, or serve as a display that updates over time as new data becomes available.
Explorable Explanation. Create an interactive article that explains a technical subject to the reader. The topic could be a computer science algorithm, a mathematical proof, a scientific phenomenon, or some other topic that you're passionate about.
Final Project is Posted!
![Page 91: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/91.jpg)
Proposal. Submit a Google Form with your team members and your idea. You can keep groups the same or switch.
Initial Prototype. Complete an initial prototype before the feedback sessions so we can offer constructive help.
Design feedback sessions. Meet with course staff to check in and get feedback and advice on your designs.
Final Deliverables and showcase. Demo videos will be shown in class. Must also have GitHub URL.
Final Project Milestones!
![Page 92: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/92.jpg)
Designing Colormaps
![Page 93: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/93.jpg)
Categorical Color
![Page 94: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/94.jpg)
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)
![Page 95: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/95.jpg)
Allocation of the Radio Spectrum
http://www.ntia.doc.gov/osmhome/allochrt.html
![Page 96: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/96.jpg)
Allocation of the Radio Spectrum
http://www.ntia.doc.gov/osmhome/allochrt.html
![Page 97: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/97.jpg)
Minimize overlap and ambiguity of colors.
http://vis.stanford.edu/color-names
Palette Design & Color Names
![Page 98: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/98.jpg)
http://vis.stanford.edu/color-names
Minimize overlap and ambiguity of colors.
Palette Design & Color Names
![Page 99: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/99.jpg)
Quantitative Color
![Page 100: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/100.jpg)
Rainbow Color Maps
![Page 101: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/101.jpg)
Be Wary of 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
![Page 102: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/102.jpg)
Color Brewer: Palettes for Maps
![Page 103: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/103.jpg)
![Page 104: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/104.jpg)
Classing Quantitative Data
Age-adjusted mortality rates for the United States. Common option: break into 5 or 7 quantiles.
![Page 105: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/105.jpg)
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
Classing Quantitative Data
![Page 106: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/106.jpg)
Quantitative Color Encoding
Sequential color scale Ramp in luminance, possibly also hue Typically higher values map to darker colors
![Page 107: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/107.jpg)
Quantitative Color Encoding
Sequential color scale Ramp in luminance, possibly also hue Typically higher values map to darker colors
Diverging color scale Useful when data has meaningful “midpoint” Use neutral color (e.g., grey) for midpoint Use saturated colors for endpoints
![Page 108: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/108.jpg)
Quantitative Color Encoding
Sequential color scale Ramp in luminance, possibly also hue Typically higher values map to darker colors
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
![Page 109: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/109.jpg)
Ramp primarily in luminance, subtle hue difference
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
Sequential Scales: Single-Hue
![Page 110: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/110.jpg)
Ramp luminance & hue in perceptual color space Avoid contrasts subject to color blindness!
Sequential Scales: Multi-Hue
![Page 111: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/111.jpg)
Viridis, https://bids.github.io/colormap/
Sequential Scales: Multi-Hue
![Page 112: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/112.jpg)
Diverging Color Scheme
![Page 113: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/113.jpg)
Designing Diverging Scales
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
![Page 114: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/114.jpg)
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
Designing Diverging Scales
![Page 115: courses.cs.washington.edu - CSE 442 - Data Visualization Colorcourses.cs.washington.edu/courses/cse442/20wi/lectures/... · 2020. 2. 18. · A Field Guide to Digital Color, M. Stone](https://reader033.vdocuments.us/reader033/viewer/2022060710/607636d8d6f86a2c6a57bb72/html5/thumbnails/115.jpg)
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