data visualization principles color
play

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 ANNOUNCEMENTS Assignment 3 solution Assignment 4 due tonight Assignment 5 posted


  1. Data Visualization Principles: Color CSC444 Acknowledgments for today’s lecture: Tamara Munzner, Miriah Meyer, Maureen Stone

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

  3. RECAP

  4. COLOR SPACES

  5. DEVICE DEPENDENT

  6. RGB • Device-centric • What programs want, not what humans want

  7. HSV • Still device-centric

  8. HSL • Still device-centric • (supported in d3)

  9. DEVICE INDEPENDENT

  10. XYZ Color Space • “Optically linear” • CIE designed three reference spectra: X, Y, Z • Designed so that all visible colors have positive coordinates, and Y is “luminance”

  11. Lab Color Space • “Perceptually uniform” • Euclidean distance corresponds, roughly, to perceptual distance ( very useful! )

  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

  13. Demos http://cscheid.net/static/20120216/hsv_frame.html http://cscheid.net/static/20120216/xyz_frame.html http://cscheid.net/static/20120216/luv_frame.html http://cscheid.net/static/20120216/hcl_frame.html

  14. Let’s use consistent names in class Hue Saturation Luminance

  15. CONSEQUENCES FOR DESIGN

  16. “Get it right in black and white” –Maureen Stone

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

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

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

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

  21. Do not rely only on hue boundaries to depict shape

  22. Do not rely only on hue boundaries to depict shape

  23. Ware, Chapter 4

  24. Area a ff ects saturation perception Saturation a ff ects area perception

  25. Saturation a ff ects area perception

  26. Area a ff ects saturation perception Saturation a ff ects area perception Imagine the mess if you try to use both…

  27. Simultaneous contrast is a problem Quantize the plot if background is non-constant (This comes at a fidelity cost for the data)

  28. “Categorical” data • Sometimes there’s no implied relationship between di ff erent levels of a variable • Stimuli must look di ff erent, but “ only di ff erent” d3.scaleOrdinal(d3.schemeCategory10)

  29. Order these colors!

  30. You can’t… Order these colors!

  31. Order these colors!

  32. You can’t help but… Order these colors!

  33. You can’t help but… Order these colors!

  34. Be aware of implied and perceptually forced color relationships For categorical data, use color only when you have few categories (less than 10)

  35. The Dreaded Rainbow Colormap

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

  37. Infovis 2011

  38. Borkin et al., Infovis 2011

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

  40. COLORBREWER

  41. COLORGORICAL

Recommend


More recommend