N328 Visualizing Information Week 5: Color Perception Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI
Last week…
Marks & Channels The visualization alphabet
magnitude channels iden+ty channels good for ordered attributes good for categorical attributes Tamara Munzner
Tamara Munzner
color The Huffington Post
color the property possessed by an object of producing different sensa5ons on the eye as a result of the way the object reflects or emits light -Oxford dictionary
light Electromagne5c radia5on within a certain range [400nm - 700nm] of the electromagne5c spectrum more energy
light Mariah Meyer
Trichromacy
Trichromacy Normal human color vision is 3 dimensional Derived from three cone types (short, medium, and long wave-length sensi5vity) Each type of cone contains a specific photosensi5ve pigment that reacts to a certain wavelength of light Based on a slide by Mariah Meyer
Trichromacy easy to read difficult to read easy to read difficult to read
Opponent-process theory Explains how signals are processed Visual perceptual system detects differences in the response of cones + + - - red-green yellow-blue luminance opponent channel opponent channel
“Important” colors These colors have a name in virtually every human language Their seman5cs and connota5ons are culture- specific
Sensitivity to spatial detail The luminance channel has greater ability to resolve smaller detail C. Ware, Visual Thinking for Design
Color deficiencies
Color deficiencies Some5mes caused by faculty cones, some5mes by faulty pathways red-green weakness is the most common type 8% of (North American) males, 0.5% of female normal re5na Protanopic Based on a slide by Miriah Meyer
lacking red cones lacking green cones lacking blue cones Via Miriah Meyer
difficult to dis5nguish for people with Deuteranopia
Color spaces Representing color with numbers
light 1. pure yellow: 580 nm 2. color matching yellow
Tristimulus color matching red green test color blue
Tristimulus color matching red green test color 580nm blue
Tristimulus color matching red 0.17 green 0.17 test color 580nm blue 0
Tristimulus color matching red green test color 580nm blue
Tristimulus color matching red green test color 580nm blue
RGB color space Each point within the cube is defined by a 3D vector (r, g,b) Each point within the cube is defined by a 3D vector (r, g,b) and represents a unique color and represents a unique color The r, g, b coordinates of the vector reflect a combina5on of The r, g, b coordinates of the vector reflect a combina5on of red, green, and blue primaries needed to reproduce the color red, green, and blue primaries needed to reproduce the color 1.0 G 1.0 R B 1.0
RGB color space Each point within the cube is defined by a 3D vector (r, g,b) and represents a unique color The r, g, b coordinates of the vector reflect a combina5on of red, green, and blue primaries needed to reproduce the color yellow (1.0, 1.0, 0.0) 1.0 1.0 1.0
RGB color space Each point within the cube is defined by a 3D vector (r, g,b) and represents a unique color The r, g, b coordinates of the vector reflect a combina5on of red, green, and blue primaries needed to reproduce the color 1.0 (1.0, 0.6, 0.4) 1.0 1.0
RGB color space Each point within the cube is defined by a 3D vector (r, g,b) and represents a unique color The r, g, b coordinates of the vector reflect a combina5on of red, green, and blue primaries needed to reproduce the color 1.0 1.0 white (1.0, 1.0, 1.0) 1.0 1.0 1.0 1.0
RGB color space Each point within the cube is defined by a 3D vector (r, g,b) and represents a unique color The r, g, b coordinates of the vector reflect a combina5on of red, green, and blue primaries needed to reproduce the color 1.0 1.0 1.0 1.0 black (0.0, 0.0, 0.0) 1.0 1.0
what colors combina+on can be used to re- producing the visible light spectrum by mixing? • red, yellow, blue • red, green, blue • orange, green, violet • cyan, magenta, yellow • all of the above Miriah Meyer
Light mixing (RGB) Addi5ve mixing of colored lights
Light mixing (RGB) LCD display closeup Wikipedia
Ink mixing (CMY / CMYK) Subtrac5ve mixing of inks printed on white paper
CMY composite CMYK composite Color picture Wikipedia
Other color spaces
HSL hue: what people think of as • color saturation: the vividness of • the color luminance: amount of black • mixed in
hue saturation luminance
Guidelines for using color in visualization
Colormap Specifies a mapping between [0, 8] color and values
Order these colors… Miriah Meyer
Order these colors… Miriah Meyer
Order these colors… Miriah Meyer
guidelines colormaps for ordered data should Increase gradually in luminance Hue alone is good for categorical data Categorical colors are easier to remember if they are nameable Colin Ware
the rainbow colormap temperature
the rainbow colormap order?
the rainbow colormap sharp boundary
the rainbow colormap not color blind safe
the rainbow colormap Rainbow colormaps should be avoided as a default op5on for ordered data A safer, more effec5ve op5on is a colormap that varies in luminance. Ideally luminance and hue .
Color design tools Color Oracle http://colororacle.org Color Brewer colorbrewer2.org/
D3 Lab
Last week…
SVG X (200,100) Y
SVG
SVG: a bar chart
Chrome Web Server 1) Download extension from: 2) Create folder (e.g., on Desktop) https://tinyurl.com/y9k9hc44 3) Choose folder from extension 4) Open URL
Exercise: Create a bar chart in SVG to visualize the following dataset: Pets animals from a neighborhood survey: cats 45 dogs 21 iguanas 102 Use the following SVG elements: <rect x=“” y=“” width=“” height=“”/> <line x1=“” x2=“” y1=“” y2=“” /> <text x=“” y=“”>Label here</text>
Today…
Exercise 2: Repeat the previous exercise. Instead of “hardcoding” the anributes of SVG elements, adjust them programma5cally using JavaScript Pets dataset as an array For loop to iterate through dataset Get a reference to a “rect” element Adjust “height” attribute
Exercise 3: Repeat the previous exercise. Instead of using pure JavaScript, use D3 selec5ons selection and data binding selection and data binding
D3 lab http://vis.ninja/teaching/2020/N328/d3-excercises
Recommend
More recommend
