SLIDE 1
Data Visualization Principles: Color
CSC444
Acknowledgments for today’s lecture: Tamara Munzner, Miriah Meyer, Maureen Stone
SOLUTION TO LAST WEEK’S CHALLENGE
https://cscheid.net/projects/d3-drills/
Data Visualization Principles: Color CSC444 Acknowledgments for - - PowerPoint PPT Presentation
Data Visualization Principles: Color CSC444 Acknowledgments for - - PowerPoint PPT Presentation
Data Visualization Principles: Color CSC444 Acknowledgments for todays lecture: Tamara Munzner, Miriah Meyer, Maureen Stone SOLUTION TO LAST WEEKS CHALLENGE https://cscheid.net/projects/d3-drills/ RECAP COLOR SPACES DEVICE DEPENDENT
SLIDE 2
SLIDE 3
RECAP
SLIDE 4
COLOR SPACES
SLIDE 5
DEVICE DEPENDENT
SLIDE 6
RGB
- Device-centric
- What programs want,
not what humans want
SLIDE 7
HSV
- Still device-centric
SLIDE 8
HSL
- Still device-centric
- (supported in d3)
SLIDE 9
DEVICE INDEPENDENT
SLIDE 10
- “Optically linear”
- CIE designed three reference spectra: X, Y, Z
- Designed so that all visible colors have positive
coordinates, and Y is “luminance”
XYZ Color Space
SLIDE 11
XYZ Color Space Let’s work through this
SLIDE 12
Lab Color Space
- “Perceptually uniform”
- Euclidean distance corresponds, roughly, to
perceptual distance (very useful!)
SLIDE 13
Polar Lab (or HCL)
- “Perceptually uniform”, like Lab
- Transform ab to polar coordinates: radius is
Chroma, Angle is Hue
- Conversion to/from RGB is complicated, but
distances in HCL make sense, and it makes sense for humans
- Like HSV, but good. All else being equal, think
HCL first
SLIDE 14
Demos
http://cscheid.net/static/20120216/xyz_frame.html http://cscheid.net/static/20120216/luv_frame.html http://cscheid.net/static/20120216/hcl_frame.html http://cscheid.net/static/20120216/hsv_frame.html
SLIDE 15
Let’s use consistent names in class
Hue Saturation Luminance
SLIDE 16
CONSEQUENCES FOR DESIGN
SLIDE 17
–Maureen Stone
“Get it right in black and white”
SLIDE 18
If you’re going to show shape variation, do it with luminance
SLIDE 19
If you’re going to show shape variation, do it with luminance
SLIDE 20
If you’re going to show shape variation, do it with luminance
SLIDE 21
(You can see stars better by looking away from them!)
SLIDE 22
http://www.settheory.com/Glass_paper/ Kanizsa_observations.html http://www.settheory.com/Glass_paper/color_motion.gif
SLIDE 23
Do not rely only on hue boundaries to depict shape
SLIDE 24
Do not rely only on hue boundaries to depict shape
SLIDE 25
SLIDE 26
SLIDE 27
Ware, Chapter 4
SLIDE 28
Area affects saturation perception Saturation affects area perception
SLIDE 29
SLIDE 30
Saturation affects area perception
SLIDE 31
Area affects saturation perception Saturation affects area perception
Imagine the mess if you try to use both…
SLIDE 32
SLIDE 33
SLIDE 34
SLIDE 35
SLIDE 36
Simultaneous contrast is a problem
Quantize the plot if background is non-constant (This comes at a fidelity cost for the data)
SLIDE 37
“Categorical” data
d3.scaleOrdinal(d3.schemeCategory10)
- Sometimes there’s no implied relationship between
different levels of a variable
- Stimuli must look different, but “only different”
SLIDE 38
Order these colors!
SLIDE 39
Order these colors!
You can’t…
SLIDE 40
Order these colors!
SLIDE 41
Order these colors!
You can’t help but…
SLIDE 42
Order these colors!
You can’t help but…
SLIDE 43
Be aware of implied and perceptually forced color relationships
For categorical data, use color only when you have few categories (less than 10)
SLIDE 44
SLIDE 45
The Dreaded Rainbow Colormap
SLIDE 46
If you need going to use the rainbow colormap, use an isoluminant version, quantize it, or both
Bad Better
SLIDE 47
Infovis 2011
SLIDE 48
Borkin et al., Infovis 2011
SLIDE 49
Borkin et al., Infovis 2011 Colormap design matters very strongly
SLIDE 50
COLORBREWER
SLIDE 51