cpsc 583 colour · 1 cpsc 583 colour sheelagh carpendale references • colin ware. (2004)...
TRANSCRIPT
![Page 1: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/1.jpg)
1
CPSC 583Colour
Sheelagh Carpendale
References• Colin Ware. (2004) Information Visualization: Perception for
Design. Morgan Kaufmann.• Maureen Stone. (2003) A field guide to digital color. AK Peters( ) g g• Bernice E. Rogowitz and Lloyd A. Treinish. (1996) How Not to
Lie with Visualization. Computers In Physics 10(3), pp 268-273. http://www.research.ibm.com/dx/proceedings/pravda/truevis.htm
• C. Brewer. (1999) Color use guidelines for data representation. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/ASApaper.html
• Andrew Glassner (1995) Principles of Digital Image Synthesis. Morgan Kaufmann PublishersMorgan Kaufmann Publishers.
![Page 2: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/2.jpg)
2
Effective Colour
Aesthetics
Perception
Materials
Illustrators, cartographersArtists, designers
A few scientific principles
From: M. Stone
What is Colour?
Physical World Visual System Mental Modelsy y
Lights, surfaces, objects
Eye, optic nerve, visual
cortex
Red, green, brown
Bright, light, dark, vivid, colorful, dull
Warm, cool, bold, blah, attractive, ugly,
pleasant jarringpleasant, jarring
Perception and Cognition
From: M. Stone
![Page 3: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/3.jpg)
3
Physical World• Spectral Distribution
– Visible lights b e g t– Power vs. wavelength
• Any source– Direct– Transmitted– Reflected– Refracted
From A Field Guide to Digital Color, © A.K. Peters, 2003
Colour The Retina
photoreceptors: rods and cones
neurons (receptive fields): intermediate neural layers – image processing
http://school.discovery.com/homeworkhelp/worldbook/atozpictures/lr001100.html
http://www.ccrs.nrcan.gc.ca/ccrs/eduref/sradar/chap2/c2p2_g2e.html
![Page 4: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/4.jpg)
4
Cone Response
• Encode spectra as three valuesLong medium and short (LMS)– Long, medium and short (LMS)
– Trichromacy: only LMS is “seen”– Different spectra can “look the same”
From A Field Guide to Digital Color, © A.K. Peters, 2003
Effects of Retinal Encoding
All spectra that stimulate the same cone responseare indistinguishable
Metameric match
![Page 5: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/5.jpg)
5
http://www.cs.brown.edu/exploratories/freeSoftware/repository/edu/brown/cs/exploratories/applets/spectrum/metamers_guide.html
• [PDF] Elements of Color Perception - Metamerism
Chromaticity Diagram
![Page 6: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/6.jpg)
6
RGB Chromaticity• R,G,B are points (varying lightness)• Sum of two colors lies on line• Gamut is a triangle
– White/gray/blacknear center
– Saturated colorson edges
Display Gamuts
From A Field Guide to Digital Color, © A.K. Peters, 2003
![Page 7: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/7.jpg)
7
Projector Gamuts
From A Field Guide to Digital Color, © A.K. Peters, 2003
Opponent Colour
• DefinitionAchromatic axis– Achromatic axis
– R-G and Y-B axis– Separate lightness from chroma channels
• First level encoding– Linear combination of LMSLinear combination of LMS– Before optic nerve– Basis for perception– Defines “color blindness”
![Page 8: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/8.jpg)
8
Colour Blindness
• Simulates color vision deficienciesWeb service or Photoshop plug in– Web service or Photoshop plug-in
– Robert Dougherty and Alex Wade
• www.vischeck.com
Deuteranope Protanope Tritanopehttp://www.vischeck.com/examples/
Colour Blindness
normal
protanopetritanope
http://colorvisiontesting.com
deuteranope
![Page 9: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/9.jpg)
9
Genes in Vischeck
2D Colour Space
![Page 10: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/10.jpg)
10
Smart Money
![Page 11: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/11.jpg)
11
small-field tritanopia
Colour Blindness
Colour Addition• computer monitors• red, green, and blue • absence all three colors gives black, • all three gives white.
Colour Subtraction• printers ink• cyan, magenta, and yellow • absence all three colors gives white, • all three gives black.
![Page 12: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/12.jpg)
12
Colour Paint
primary tertiary
secondarysecondary
Perceptual Color SpacesUnique black and whiteUniform differences
Lightness
Perception & design
Hue
Colorfulness
![Page 13: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/13.jpg)
13
Munsell Atlas
Courtesy Gretag-Macbeth
Color Appearance
![Page 14: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/14.jpg)
14
Color Appearance
• colour constancy• colour perception
![Page 15: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/15.jpg)
15
Color Appearance
• More than a single colorAdjacent colors (background)– Adjacent colors (background)
– Viewing environment (surround)
• Appearance effects– Adaptation– Simultaneous contrast
surround
stimulusSimultaneous contrast– Spatial effects
• Color in contextColor Appearance ModelsColor Appearance Models
Mark FairchildMark Fairchild
background
stimulus
Simultaneous Contrast
• Add Opponent ColorDark adds light– Dark adds light
– Red adds green– Blue adds yellow
These samples will have both light/dark and hue contrast
![Page 16: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/16.jpg)
16
Bezold Effect
http://web.missouri.edu/~hoarda/colortheory/Syllabus/Projects/Bezold_Effect/bezold_effect.html
http://web.missouri.edu/~hoarda/colortheory/Syllabus/Projects/Bezold_Effect/bezold_effect.html
htt // d i ild / / ti l ill i / t thttp://www.sapdesignguild.org/resources/optical_illusions/contrast_phenomena.html
![Page 17: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/17.jpg)
17
Spreading
• Spatial frequencyThe paint chip– The paint chip problem
– Small text, lines, glyphs
– Image colors
• Adjacent colors blendRedrawn from Foundations of Vision© Brian Wandell, Stanford University
![Page 18: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/18.jpg)
18
What makes colour effective?• “Good ideas executed with superb craft”
E R Tufte—E.R. Tufte
• Effective colour needs a context– Immediate vs. studied– Anyone vs. specialistAnyone vs. specialist– Critical vs. contextual– Culture and expectations– Time and money
Why Should You Care?
• Poorly designed colour is confusingCreates visual clutter– Creates visual clutter
– Misdirects attention
• Poor design devalues the information– Visual sophistication– Evolution of document and web designEvolution of document and web design
• “Attractive things work better”—Don Norman
![Page 19: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/19.jpg)
19
Information Display• Graphical presentation of information
– Charts, graphs, diagrams, maps, illustrations– Originally hand-crafted, static
• Now computer-generated, dynamic
• Colour is a key component– Colour labels and groups– Colour scales (colourmaps)
Multi variate colour encoding– Multi-variate colour encoding– Colour shading and textures– And more…
www.nps.gov
“Color” includes Gray
Maps courtesy of the National Park Service (www.nps.gov)
![Page 20: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/20.jpg)
20
Colour Design• Goals
– Highlight, emphasize– Create regions, group– Illustrate depth, shape– Evoke nature– Decorate, make beautiful
• Colour harmony“ f l l bi i h h h“…successful color combinations, whether these please the eye by using analogous colors, or excite the eye with contrasts.”
–Principles of Color Design, by Wucius Wong
Colour Design Terminology• Hue (colour wheel)
– Red, yellow, blue (primary)O l ( d )– Orange, green, purple (secondary)
– Opposites complement (contrast)– Adjacent are analogous– Many different colour wheels*
• *See www.handprint.com for examples• Chroma (saturation)
Intensity or purity– Intensity or purity– Distance from gray
• Value (lightness)– Dark to light– Applies to all colours, not just gray
![Page 21: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/21.jpg)
21
Tints and Tones
• Tone or shadeHue + black– Hue + black
– Decrease saturation– Decrease lightness
• Tint– Hue + whiteHue + white– Decrease saturation– Increase lightness
Colour
Hi-Key/Low Key Colours – choosing a value range–another way to unify
Hi-Key colour schemes –tints of colours (paler)–bright, cheerful.
Low-Key colour scheme. –Shades (tones) of colours (darker)–subdued gloomy mysterious
![Page 22: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/22.jpg)
22
Gradations
ColourColour Triads• color scheme composed of three colours spaced equally t ee co ou s spaced equa yapart on the colour wheel• tend to be uncomfortable• good visual distinction• Primary colours form one triad – ( red, blue, yellow).
• Secondary colours – (orange, green, purple)
![Page 23: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/23.jpg)
23
Maximum hue separation
Colour
Analogous Colours–colours next to each other on the colour wheel with a common huecolour wheel with a common hue
–the common hue creates a feeling of unity in the design
![Page 24: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/24.jpg)
24
Analogous, yet distinct
Colour
Complementary ColorsComplementary Colors–Complementary colors are opposite each other on the color wheel
–two pure complementary hues placed next to each other attract attention
![Page 25: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/25.jpg)
25
Colour
Split Complements• two colors on either side of its complement are used together. • similar to complementary colors• offers a little more variety to work withwork with
Colour
Warm and Cool Colours• two specific sets of analogous colours. Cool–blue, green and purple–cold, icy feeling
Warm–red, orange and yellow –warm, sunny feeling.
When used together–cool colours seem to move away
– warm colours move towards
![Page 26: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/26.jpg)
26
Colour
Monochromatic Colorsh d ti t d t f l l– shades, tints and tones of only one color.
– causes an immediate unifying or harmonious effect.
– all parts of the design have something in common,
– pulls it all together.
Sequential
![Page 27: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/27.jpg)
27
Colouring categorical data– limited number readily distinct (spatially separate colour patches)
– think about selection, association, and adjacent distinction
–Ware’s maximally discriminable colours
![Page 28: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/28.jpg)
28
Colour Design Principles• Control value (lightness)
– Ensure legibilitysu e eg b ty– Avoid unwanted emphasis
• Use a limited hue palette– Control colour “pop out”– Define colour grouping– Avoid clutter from too many competing colours
• Use neutral backgrounds– Control impact of colour– Minimize simultaneous contrast
Envisioning Information
“… avoiding catastrophe becomes the first principle in bringing color to information:principle in bringing color to information:
Above all, do no harm.”
—E. R. Tufte
www.edwardtufte.com
![Page 29: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/29.jpg)
29
Fundamental Uses
• To labelT• To measure
• To represent or to imitate reality• To enliven or decorate
To Label
![Page 30: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/30.jpg)
30
Colour Cross-cultural naming
Appearance of colour names in languages around the world (Berlin and Kay 1969)
Colour Opponent Process Theory - continued
Many lines of scientific evidence worth examining
• Namingg
• Cross-Cultural naming
• Unique Hues
• Neurophysiology
• Categorical colours
![Page 31: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/31.jpg)
31
Color Names
• Basic names (Berlin & Kay)Linguistic study of names
blackwhitegray– Linguistic study of names
– Similar names– Similar evolution– Many different languages
gray
redgreenblue
yellow
orangepurpleb
Perceptual primaries
brownpinkDistinct colors = distinct names?
Distinct, but hard to name
![Page 32: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/32.jpg)
32
Color Names Research• Selection by name
– Berk, Brownston & Kaufman, 1982e , o sto & au a , 98– Meier, et. al. 2003
• Image recoloring– Saito, et. al.
• Labels in visualization– D’Zmura, Cowan (pop out conditions)– Healey & Booth (automatic selection)
• Web experiment– Moroney, et. al. 2003
• World Colour Survey (Kay & Cook)– http://www.icsi.berkeley.edu/wcs/
Identify by Color
Information VisualizationInformation VisualizationColin WareColin Ware
![Page 33: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/33.jpg)
33
Product Categories
Created by Tableau - Visual Analysis for DatabasesTM
Categorizing data by colour
22 colours, only ~8 distinguishable
![Page 34: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/34.jpg)
34
Categorizing data by colour
22 colours, only ~8 distinguishable
Grouping, Highlighting
![Page 35: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/35.jpg)
35
Considerations for Labels• How critical is the colour encoding?
– Unique specification or is it a “hint”?– Quick response, or time for inspection?– Is there a legend, or need it be memorized?
• Contextual issues– Are there established semantics?– Grouping or ordering relationships?
S di h d l ?– Surrounding shapes and colours?• Shape and structural issues
– How big are the objects? – How many objects, and could they overlap?– Need they be readable, or only visible?
Controls and Alerts• Aircraft cockpit design
– Quick response– Critical information and conditionsCritical information and conditions– Memorized– 5-7 unique colors, easily distinguishable
• Highway signs– Quick response– Critical but redundant information
10 15 l ?– 10-15 colors?• Typical color desktop
– Aid to search– Redundant information– Personal and decorative– How many colors?
![Page 36: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/36.jpg)
36
Psychophysics of Labeling
• Preattentive, “pop out”13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465485690
Time proportional to
13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465785690
Time proportional to
13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465785690
Both 3’s and 7’sTime proportional to the number of digits
Time proportional to the number of 7’s
Both 3 s and 7 s“Pop out”
Contrast Creates Pop-out
Hue and lightness Lightness only
![Page 37: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/37.jpg)
37
Pop-out vs. Distinguishable• Pop-out
– Typically, 5-6 distinct values simultaneouslyyp ca y, 5 6 d st ct a ues s u ta eous y– Up to 9 under controlled conditions
• Distinguishable– 20 easily for reasonable sized stimuli– More if in a controlled context– Usually need a legend
To Measure
![Page 38: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/38.jpg)
38
Heat maps
Brewer Scales
• Nominal scalesDistinct hues but similar emphasis– Distinct hues, but similar emphasis
• Sequential scale– Vary in lightness and saturation– Vary slightly in hue
• Diverging scale• Diverging scale– Complementary sequential scales– Neutral at “zero”
![Page 39: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/39.jpg)
39
Thematic MapsUS Census Map
Mapping Census 2000: The Geography of U.S. Diversity
Brewer’s Categories
Cynthia Brewer, Pennsylvania State University
![Page 40: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/40.jpg)
40
Colour Brewer
www.colorbrewer.org
Colour and Shading
• Shape is defined by lightness (shading)• “Colour” (hue, saturation) labels
Image courtesy of Siemens
CT image (defines shape) PET color highlights tumor
![Page 41: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/41.jpg)
41
Multivariate Colour Sequences
Multi-dimensional Scatter plot
• Variable 1 2 X Y• Variable 1, 2 X, Y• Variable 3, 4, 5 R, G, B
Using Color Dimensions to Display Data Dimensions
Beatty and Ware
Do people interpret colour blends as sums of variables?
![Page 42: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/42.jpg)
42
Colour Weaves6 variables = 6 hues, which vary in brightness
Additive mixture (blend) Spatial texture (weave)
Weaving versus Blending (APGV06 and SIGGRAPH poster)Haleh Hagh-Shenas, Victoria Interrante, Christopher Healey and Sunghee Kim
Brewer System
http://www.colorbrewer.org
![Page 43: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/43.jpg)
43
Brewer Examples
To Represent orImitate Reality
![Page 44: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/44.jpg)
44
Illustrative Color
www.bartleby.com/107/illus520.html
Gray’s Anatomy of the Human Body Map of Point Reyeswww.nps.gov
ThemeView (original)
Courtesy of Pacific Northwest National Laboratories
![Page 45: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/45.jpg)
45
ThemeScape (commercial)
Courtesy of Cartia
To Enliven or Decorate
![Page 46: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/46.jpg)
46
Which has more information?Which would you rather look at?
Visualization of isoelectron densityVisualization of isoelectron density surfaces around molecules
Marc Levoy (1988)
More Tufte Principles
• Limit the use of bright colorsSmall bright areas dull backgrounds– Small bright areas, dull backgrounds
• Use the colors found in nature– Familiar, naturally harmonious
• Use grayed colors for backgrounds– Quiet versatileQuiet, versatile
• Create color unity– Repeat, mingle, interweave
![Page 47: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/47.jpg)
47
Controlling Value
Get it right in black & white
• ValuePerceived lightness/darkness– Perceived lightness/darkness
– Controlling value primary rule for design
• Value defines shape– No edge without lightness difference– No shading without lightness variationNo shading without lightness variation
• Value difference (contrast)– Defines legibility– Controls attention– Creates layering
![Page 48: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/48.jpg)
48
Controls Legibility
colorusage.arc.nasa.gov
Legibility
Drop Shadows
Drop ShadowDrop ShadowDrop shadow adds edge Primary colors on black
Primary colors on black
Primary colors on black
Primary colors on black
Primary colors on black
Primary colors on black
Primary colors on white
Primary colors on white
Primary colors on white
Primary colors on white
Primary colors on white
Primary colors on white
![Page 49: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/49.jpg)
49
ReadabilityIf you can’t use color wisely,it is best to avoid it entirelyit is best to avoid it entirelyAbove all, do no harm
If you can’t use color wisely, it is best to avoid it entirelyyAbove all, do no harm.
Why does the logo work?
![Page 50: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/50.jpg)
50
Value Control
Legibility and Contrast• Legibility
– Function of contrast and spatial frequencyu ct o o co t ast a d spat a eque cy– “Psychophysics of Reading” Legge, et. al.
• Legibility standards– 5:1 contrast for legibility (ISO standard)– 3:1 minimum legibility– 10:1 recommended for small text
• How do we specify contrast?– Ratios of foreground to background luminance– Different specifications for different patterns
![Page 51: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/51.jpg)
51
Contrast and Layering
• Value contrast creates layering
Context
Context
Normal
Normal
UrgentContext
Context
Normal
Normal
Urgent Context
Context
Normal
Normal
Urgent
ContextContext Context
colorusage.arc.nasa.gov
What Defines Layering?• Perceptual features
– Contrast (especially lightness)C l h d t t
Emergency
– Color, shape and texture• Task and attention
– Attention affects perception • Display characteristics
– Brightness, contrast, “gamma”
Emergency
Emergency
![Page 52: CPSC 583 Colour · 1 CPSC 583 Colour Sheelagh Carpendale References • Colin Ware. (2004) Information Visualization: Perception for Design. Morgan Kaufmann. • Maureen Stone](https://reader035.vdocuments.site/reader035/viewer/2022062603/5f69c752ad8fed0f4c591baf/html5/thumbnails/52.jpg)
52
Grid Example
Grid sits unobtrusively in the background Grid sits in foreground, obscuring map
Great Grids: How and Why? (APGV06 and SIGGRAPH poster)Maureen Stone, Lyn Bartram and Diane Gromala
Additional Resources
•Maureen Stone’s website•Maureen Stone s website– http://www.stonesc.com/Vis06
•A Field Guide to Digital Color– A.K. Peters