Data Visualization Principles: Color CSC444 Acknowledgments for - - PowerPoint PPT Presentation

▶
data visualization principles color
SMART_READER_LITE
LIVE PREVIEW

Data Visualization Principles: Color CSC444 Acknowledgments for - - PowerPoint PPT Presentation

Jan 03, 2023 239 likes •758 views

Data Visualization Principles: Color CSC444 Acknowledgments for todays lecture: Tamara Munzner, Miriah Meyer, Maureen Stone ANNOUNCEMENTS Assignment 3 solution Assignment 4 due tonight Assignment 5 posted

slide-1
SLIDE 1

Data Visualization Principles: Color

CSC444

Acknowledgments for today’s lecture: Tamara Munzner, Miriah Meyer, Maureen Stone

slide-2
SLIDE 2

ANNOUNCEMENTS

https://cscheid.net/projects/d3-drills/ Assignment 3 solution Assignment 4 due tonight Assignment 5 posted

slide-3
SLIDE 3

RECAP

slide-4
SLIDE 4

COLOR SPACES

slide-5
SLIDE 5

DEVICE DEPENDENT

slide-6
SLIDE 6

RGB

  • Device-centric
  • What programs want,

not what humans want

slide-7
SLIDE 7

HSV

  • Still device-centric
slide-8
SLIDE 8

HSL

  • Still device-centric
  • (supported in d3)
slide-9
SLIDE 9

DEVICE INDEPENDENT

slide-10
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
SLIDE 11

Lab Color Space

  • “Perceptually uniform”
  • Euclidean distance corresponds, roughly, to

perceptual distance (very useful!)

slide-12
SLIDE 12

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-13
SLIDE 13

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-14
SLIDE 14

Let’s use consistent names in class

Hue Saturation Luminance

slide-15
SLIDE 15

CONSEQUENCES FOR DESIGN

slide-16
SLIDE 16

–Maureen Stone

“Get it right in black and white”

slide-17
SLIDE 17

If you’re going to show shape variation, do it with luminance

slide-18
SLIDE 18

If you’re going to show shape variation, do it with luminance

slide-19
SLIDE 19

If you’re going to show shape variation, do it with luminance

slide-20
SLIDE 20

(You can see stars better by looking away from them!)

slide-21
SLIDE 21
slide-22
SLIDE 22

Do not rely only on hue boundaries to depict shape

slide-23
SLIDE 23

Do not rely only on hue boundaries to depict shape

slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26

Ware, Chapter 4

slide-27
SLIDE 27

Area affects saturation perception Saturation affects area perception

slide-28
SLIDE 28
slide-29
SLIDE 29

Saturation affects area perception

slide-30
SLIDE 30

Area affects saturation perception Saturation affects area perception

Imagine the mess if you try to use both…

slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35

Simultaneous contrast is a problem

Quantize the plot if background is non-constant (This comes at a fidelity cost for the data)

slide-36
SLIDE 36

“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-37
SLIDE 37

Order these colors!

slide-38
SLIDE 38

Order these colors!

You can’t…

slide-39
SLIDE 39

Order these colors!

slide-40
SLIDE 40

Order these colors!

You can’t help but…

slide-41
SLIDE 41

Order these colors!

You can’t help but…

slide-42
SLIDE 42

Be aware of implied and perceptually forced color relationships

For categorical data, use color only when you have few categories (less than 10)

slide-43
SLIDE 43
slide-44
SLIDE 44

The Dreaded Rainbow Colormap

slide-45
SLIDE 45

If you need going to use the rainbow colormap, use an isoluminant version, quantize it, or both

Bad Better

slide-46
SLIDE 46

Infovis 2011

slide-47
SLIDE 47

Borkin et al., Infovis 2011

slide-48
SLIDE 48

Borkin et al., Infovis 2011 Colormap design matters very strongly

slide-49
SLIDE 49

COLORBREWER

slide-50
SLIDE 50

COLORGORICAL