DSCI 554 lecture 7

Colors, colors in D3, complex D3 charts

Dr. Luciano Nocera

Outline

• Color perception
• Color theory
• Color design
• Colors in D3
• Complex D3 charts

What do we mean by color

Color is the perception of a kind of light

Color properties distinguishable by the eye

Hue	Degree to which a stimulus can be described as similar to or different from stimuli that are described as red, orange, yellow, green, blue, and purple.
Saturation	Also called colorfulness, chroma, intensity, purity. It is the perceived intensity (chromatic strength) of a hue.
Brightness	Attribute of a visual sensation according to which an area appears to emit more or less light.

Color vision

Color vision is the ability to discriminate light composed of different wavelengths

Two Color Vision Theories:

• Trichromatic theory (Young-Helmholtz) [Young 1802]
• Opponent process theory [Hering 1878]

Trichromatic vision

• Humans are routinely trichromatic^*
• Trichromacy through 3 color photoreceptors (cone cells)
• We distinguish ~10 million different colors

Trichromatic theory

Eye has 3 kinds of color receptors roughly corresponding to blue, green and red

B

⇆

S

G

⇆

M

R

⇆

L

Problems with the Trichromatic theory

Some colors are not seen

No reddish-green named color No yellowish-blue named color

Photoreceptor distribution does not relate to perceived colors

S, M and L overlap S fraction of M + L M, L similar response $\frac{M}{L}$ varies greatly* *$\frac{M}{L}$ in two male subjects $\frac{20.0\%}{75.8\%}$ vs. $\frac{44.2\%}{50.6\%}$ [Roorda 1999]

Afterimages cannot be explained

Dominant waveband in the light reflected from the central area is also the dominant waveband in the light coming from the surround, up to 10° in all directions Afterimages are opponent to perceived colors rather than wavelengths

Opponent Process Theory

Trichromatic and Opponent Process Stages

Color perception

Mach bands illusion (1865)

Opponent cells

Single opponent

• [Wiesel, Hubel 1966] discovers single opponent cells
• [De Valois 1965] existence of color opponent neurons in the primate visual system

Double opponent

• [Daw 1967] evidence that color constancy is supported by double-opponent cells in V1
• Double opponent cells have a large receptive field than single-opponent cells

Lateral inhibition

Simultaneous contrast (universal)

Simultaneous chromatic contrast on the chromatic channels

Simultaneous luminance contrast on the achromatic channel

Color constancy (universal)

Vision deficiencies (individual)

Color blindness: affects ～9% of the population

Normal vision	All colors in visible spectrum
Deuteranopia Deuteranomaly	Green, M cone M: $6.2\%$ F: $0.36\%$
Protanopia Protanomaly	Red, L cone M: $2.6\%$ F: $0.04\%$
Tritanopia Tritanomaly	Blue, S cone M: $0.01\%$ F: $0.03\%$

Outline

• Color perception
• Color theory
• Color design
• Colors in D3
• Complex D3 charts

Color theory

Practical guidance to color mixing and the visual effects of color combinations

HTML (SVG) color model

						<div style="background-color: red">name</div> <!-- named colors: red ≡ (255, 0, 0) -->
					

						<div style="background-color: rgba(255, 0, 0, 0.3);">rgba</div> <!-- rgb(,,) or rgba(,,,) -->
					

						<!-- opacity = 55 → 85, 85/255 = 0.333 -->
						<div style="background-color: #ff000055;">hex</div> <!-- #rgb or #rgba -->
					

Additive color model techniques

Color Space

• chromaticity: (hue, saturation)
• luminance (1d)

sRGB Color Space (HP, Microsoft 1996)

Color matching experiment (Helmholtz & Maxwell 1850)

Outline

• Color perception
• Color theory
• Color design
• Colors in D3
• Complex D3 charts

Use of colors [Tufte]

1. Label: identify, highlight or group

Identify

Highlight

Group

2. Measure, represent or imitate reality

3. Enliven (make more attractive) or decorate

Color rendering of images

True-color	False-color	Pseudocolor
Colors appear similar a viewer of the image and to an observer of the scene, i.e., RGB → RGB	Images in different spectral bands are combined into an RGB image, e.g., NRG → RGB, with N near-infrared band False-color techniques include: Choropleth map Density slicing	Derived from a grayscale image by mapping each intensity value to a color according to a table or function, e.g., G → RGB

Color contrast (results from simultaneous contrast)

Sharpening

We are more sensitive to dark than light differences

Color sequences (aka schemes)

• Use established color sequences, e.g., ColorBrewer
• Use appropriate color sequence type
• Use colorblind safe colors (test with Color Oracle or Dev Tools)
• With discrete scales, limit colors used as keys to 5-7

Color sequences types

Scheme	Characteristics	Examples
Sequential	Ordered data, light colors for lower values to dark colors for higher values
Diverging	Critical class or break in the middle, sequential sequences of contrasting hues on both ends.
Qualitative	For nominal or categorical data.

Recommendations

Respect well-established color sequences
Observe cultural conventions
Use color palettes for more attractive and effective displays

Recommendations (continued)

Use consistent color encodings across graphics
Use colorblind safe colors
Use accessibility standards: AA (minimum) contrast ratio of 4.5:1 for all text

Recommendations (continued)

Composition:

• Do not overuse accent colors, instead use accent colors for the most important visual queries
• Use lighter colors for background

Outline

• Color perception
• Color theory
• Color design
• Colors in D3
• Complex D3 charts

D3 color manipulation and color space conversion

					//d3-color and d3-scale-chromatic are included in d3

					//d3-color provides color manipulation and color space conversion.
					var c = d3.hsl("steelblue");
					console.log(c);  //{h: 207.272, s: 0.44, l: 0.343, ...}

					c = c.darker();
					console.log(c);  //{h: 207.272, s: 0.44, l: 0.490, ...}
					
					c = c.brighter();
					console.log(c);  //{h: 207.272, s: 0.44, l: 0.490, ...}

					//d3-scale-chromatic provides ColorBrewer and other colors schemes
					var accent = d3.schemeAccent;  //["#7fc97f", "#beaed4", "#fdc086", ...]

					//d3-hsv needs to be loaded separately (npm install d3-hsv)
					var yellow = d3.hsv("yellow"); // {h: 60, s: 1, v: 1, opacity: 1}
				

D3 color scales: d3-scale + colors schemes

Outline

• Color perception
• Color theory
• Color design
• Colors in D3
• Complex D3 charts

D3 libraries used to create complex charts

Library	Type	Description	Charts
d3-shape	Generator	Graphical primitives for visualization, such as lines and areas.	Line, area, pie charts, symbols...
d3-chord	Layout	Relationships or network flow in circular layout.	Chord diagram
d3-force	Layout	Force-directed graph layout using velocity Verlet integration.	Physical simulations in networks and hierarchies, bubbles charts...
d3-hierarchy	Layout	2D layout algorithms for visualizing hierarchical data.	Treemaps, dendrograms, circle-packing...
d3-sankey	Layout	Directed flow between nodes in an acyclic network.	Sankey diagrams
d3-hexbin	Generator	Group two-dimensional points into hexagonal bins.	Hexbins plots
d3.histogram	Generator	Computes the histogram for the given array.	Histograms