Introduction to color and its usage Georges Hattab Computational Methods for the Analysis of
 Diversity and Dynamics of the Genomes | GRK 1906 Seminar 17/18 — 14.11.2017 Akiyoshi Kitaoka 1 

light. noun the natural agent that stimulates sight and makes things visible 2 

• trichromatic cone cells or cones respond to one of the three frequencies exhibited by photons arriving on their surface • only about 6 to 7 million of them • different cone cell responses: area function of wavelength [Representing Colors as Three Numbers, Stone, IEEE Computer Graphics and Applications, 25(4), July 2005, pp. 78-85] TRICHROMACY: Color as three numbers 3 

• different cone cell responses: area function of wavelength • for a given spectrum
 - multiply by response curve
 - integrate to get response [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] 4 CONE CELL RESPONSES TO LIGHT 

5 METAMERISM: Several similar segments • brain sees only cone response
 - different spectra appear the same [Representing Colors as Three Numbers, Stone, IEEE Computer Graphics and Applications, 25(4), July 2005, pp. 78-85] Spectral Sensitivity 6 Wavelength (nm) IR UV Visible Spectrum SPECTRAL SENSITIVITY • varies strongly over the wavelength range between 380 and 800 nm [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] 

NOT EVERYONE HAS THE SAME COLOR VISION • Tritanopia/Tritanomaly: Missing/malfunctioning S-cone (blue). • Deuteranopia/Deuteranomaly: Missing/malfunctioning M-cone (green). • Protanopia/Protanomaly: Missing/malfunctioning L-cone (red). 6 Tritanomaly Normal Deuteroanomaly Protoanomaly • Monochromatism: either no cones available or just one type is missing • etc Protanopia Deuteranopia Tritanopia 

7 COLOR SPACES [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] • RGB 
 - convenient for machines
 - three channels are not separable
 • CIE XYZ
 - from color matching functions
 - perceptually based
 • HSL
 - a simple transformation from RGB
 - good: separates out lightness from hue and saturation
 - bad: lightness not true luminance
 - careful: only pseudo-perceptual [xkcd.com] 

DISAMBIGUATION: LUMINANCE 8 • Luminance is measurable • Lightness is perceived Luminance • Brightness is perceived Lightness relative to some average level in an image or environment • HSV and HSB are the same. V stands for Value and B stands for Brightness • HSL: L is Lightness All are employed for the same purpose: make an image more or less light-er! Luminance Lightness Brightness 

9 Color: Luminance, saturation, hue • 3 channels – identity for categorical • hue – magnitude for ordered • luminance • saturation • other common color spaces – RGB: poor choice for visual encoding – HSL: better, but beware • lightness ≠ luminance • transparency – useful for creating visual layers • but cannot combine with luminance or saturation 8 Corners of the RGB color cube L from HLS All the same Luminance values Color: Luminance, saturation, hue • 3 channels – identity for categorical • hue – magnitude for ordered • luminance • saturation • other common color spaces – RGB: poor choice for visual encoding – HSL: better, but beware • lightness ≠ luminance • transparency – useful for creating visual layers • but cannot combine with luminance or saturation 8 Saturation Luminance values Hue [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] LUMINANCE, SATURATION, HUE 

Colormaps 9 • categorical limits: noncontiguous – 6-12 bins hue/color • far fewer if colorblind – 3-4 bins luminance, saturation – size heavily affects salience • use high saturation for small regions, low saturation for large after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html] Categorical Ordered Sequential Bivariate Diverging Binary Diverging Categorical Sequential Categorical Categorical COLORMAPS 10 [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] 

COLOR USAGE Exploiting the Power of the Human Visual System July 21, 2009 Contrast hierarchy creates layers Context Normal Urgent Context Normal Urgent Wrong Right Context Normal Normal Context Normal Normal From Larry Arend colorusage.arc.nasa.gov Rules for managing attention whisper silent shout indoor voice An ongoing process Maureen Stone, StoneSoup Consulting Jock Mackinlay, Tableau Software 4 Get it right in black & white Maps courtesy of the National Park Service (www.nps.gov) How do we fix this? Context Normal Urgent Context Normal [Exploiting the Power of the Human Visual System. Stone and Mackinlay, 2009] 11 

12 COLOR USAGE Exploiting the Power of the Human Visual System July 21, 2009 From Stephen Few Bezold Effect Spreading: Adjacent colors blend What color is this? What color is this? What color is this? What color is this? Tufte’s Fundamental Uses To label • Primarily hue variation • Associated with color names To measure • Vary lightness & chroma • Map to data distribution • Map to data distribution [Exploiting the Power of the Human Visual System. Stone and Mackinlay, 2009] 

13 ORDERED COLOR Ordered color: Rainbow is poor default • problems – perceptually unordered – perceptually nonlinear • benefits – fine-grained structure visible and nameable • alternatives – fewer hues for large-scale structure – multiple hues with monotonically increasing luminance for fine-grained – segmented rainbows good for categorical, ok for binned 11 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] [Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] Ordered color: Rainbow is poor default • problems – perceptually unordered – perceptually nonlinear • benefits – fine-grained structure visible and nameable • alternatives – fewer hues for large-scale structure – multiple hues with monotonically increasing luminance for fine-grained – segmented rainbows good for categorical, ok for binned 11 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] [Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 

BETTER ALTERNATIVES 14 [New matplotlib colormaps. https://bids.github.io/colormap/] 

15 CATEGORICAL COLOR Categorical color: Discriminability constraints • noncontiguous small regions of color: only 6-12 bins 10 [Cinteny: flexible analysis and visualization of synteny and genome rearrangements in multiple organisms. Sinha and Meller. BMC Bioinformatics, 8:82, 2007.] [Cinteny: flexible analysis and visualization of sentent and genome rearrangements in multiple organisms. Sinha and Meller. BMC Bioinformatics, 8:82, 2007] • noncontiguous small regions of color: only 6-12 bins • have a really good reason to use 10 or more categorical colors 

BETTER ALTERNATIVE [Tableau software blog. How we designed the new color palettes in Tableau 10? Stone, 2016. https://www.tableau.com/about/blog/2016/7/colors-upgrade-tableau-10-56782] Tableau10 16 

5 DESIGN QUESTIONS 17 1. what is the color used for? 2. what type of imagery needs to be colored? 3. what can we assume about the display? 4. what can we assume about the user? 5. what can we assume about the task? [What’s so hard about categorical color? Stone. StoneSoup Consulting] [Calvin and Hobbes. Watterson] 

12 Map other channels • size – length accurate, 2D area ok, 3D volume poor • angle – nonlinear accuracy • horizontal, vertical, exact diagonal • shape – complex combination of lower-level primitives – many bins • motion – highly separable against static • binary: great for highlighting – use with care to avoid irritation [Ch 10: Color. Papers: Colors as Three Numbers. Munzner, 2015. http://www.cs.ubc.ca/~tmm/courses/547-15] 18 MAP OTHER CHANNELS 12 ap other channels size – length accurate, 2D area ok, 3D volume poor angle – nonlinear accuracy • horizontal, vertical, exact diagonal shape – complex combination of lower-level primitives – many bins motion – highly separable against static • binary: great for highlighting – use with care to avoid irritation Motion Direction, Rate, Frequency, ... Length Angle Curvature Area Volume Size, Angle, Curvature, ... Shape Motion 

19 man Visual System July 21, 2009 If you can’t use color wisely, it is best to avoid it entirely Above all, do no harm If you can’t use color wisely, it is best to avoid it entirely If you can’t use color wisely, it is best to avoid it entirely Above all, do no harm. it is best to avoid it entirely Above all, do no harm [Exploiting the Power of the Human Visual System. Stone and Mackinlay, 2009]