EECE 5642

Data Visualization

Color and Visualization Tools

Y. Raymond Fu
Professor
Electrical and Computer Engineering (ECE), COE
Khoury College of Computer Science (KCCS)
Northeastern University
 Early Studies of Color

2 http://www.webexhibits.org/causesofcolor/1B.html
 What is Color

Original from the slides of Stone

http://en.wikipedia.org/wiki/Color
3 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Models

Original from the slides4of Stone

4 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Visible Light

• Visible light constitutes a

very small part of the
electromagnetic spectrum
• Some animals, such as
snakes, can see in the
infrared, while certain
insects can see in the
ultraviolet
• Human can perceive light
only in 400—700nm(10e-
9m)

http://www.eduspace.esa.int/subtopic/images/02-spektrum.gif
5
5 Information Visualization (perception for design) (2nd Edition), Colin Ware, Elsevier Press.
 6
6 http://imgs.xkcd.com/comics/electromagnetic_spectrum.png
 Reflectance

http://www.cs.sfu.ca/~colour/research/observed-spectra.gif
Wandell, Foundations of Vision
Courtesy of Prof. Hanspeter Pfister, Harvard University.
http://www.bss.phy.cam.ac.uk/steiner/index.php?show=proj_
info&project=Structural%20colours&wh=1152x864 7
7 M. Livingstone, “Vision and Art”
 Cone Types

Original from M. Livingstone, “Vision8and Art”

8 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Opponent Process Theory

Information Visualization (perception for design) (2nd Edition), Colin Ware, Elsevier Press.
9 http://www.visualexpert.com/sbfaqimages/RGBOpponent.gif
 Color-Opponent Cells

Originally from Bear, Connors, Paradiso, “Neuroscience”.

10 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color-Opponent Cells

Originally from M. Livingstone, “Vision and Art”.

11 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Cone Response

12 Color”
Originally from M. Stone, “A Field Guide to Digital
12 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Cone Tristimulus Value

13
13 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Primaries

14
14 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 RGB-Cube

http://www.cs.rit.edu/~ncs/color/a_spaces.html

15 http://en.wikipedia.org/wiki/RGB_color_space
 Color Matching

http://www.hypergurl.com/colormatch.php Originally from Wandell, “Foundations of Vision”.

16 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Matching

17 https://www.youtube.com/watch?v=ERRa9NqMEMk&t=141s
 CIE 1931 color space
• One of the first mathematically defined color spaces.
• CIE
– Established in 1931 and based in Vienna, Austria, the International
Commission on Illumination (usually known as the CIE for its French
name Commission internationale de l'éclairage, but the English
abbreviation is sometimes seen in older papers) is the international
authority on light, illumination, color, and color spaces.
• The CIE XYZ color space was derived from a series of
experiments done in the late 1920s by W. David Wright and
John Guild.
• Their experimental results were combined into the
specification of the CIE RGB color space, from which the CIE
XYZ color space was derived.

18 http://en.wikipedia.org/wiki/CIE_1931_color_space
 RGB Color Matching Functions
• Physical results from painstaking experiments
• Historical functions that can be used to reliably predict color perception
• Must include some subtraction to cover the entire range of color
perception.

http://hyperphysics.phy-astr.gsu.edu/hbase/vision/colspa.html#c3
19 Courtesy of Prof. Hanspeter Pfister, Harvard University.
20
 CIE xyY color space
• The concept of color can be
divided into two parts: brightness
and chromaticity.
• e.g. the chromaticity of white and
grey are the same while their
brightness differs.
• The chromaticity of a color was
then specified by the two derived
parameters x and y

• Back transformation

The CIE 1931 color space chromaticity diagram.

http://en.wikipedia.org/wiki/CIE_1931_color_space
21 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 CIE Chromaticity Diagram

22 http://230nsc1.phy-astr.gsu.edu/hbase/vision/cie.html#c2
 CIE xyY color space
• Diagram in CIE rg chromaticity space
showing the construction of the
triangle specifying the CIE XYZ color
space.
• The triangle Cb-Cg-Cr is just the
xy=(0,0),(0,1),(1,0) triangle in CIE xy
chromaticity space.
• The line connecting Cb and Cr is the
alychne.
• Notice that the spectral locus passes
through rg=(0,0) at 435.8 nm, through
rg=(0,1) at 546.1 nm and through
rg=(1,0) at 700 nm. Also, the equal
energy point (E) is at rg=xy=(1/3,1/3).

23 http://en.wikipedia.org/wiki/CIE_1931_color_space
 CMYK Color Space

• CMYK (short for cyan, magenta, yellow, and key (black), and
often referred to as process color or four color) is a
subtractive color model, used in color printing, also used to
describe the printing process itself.
Layers of simulated glass
show how semi-
transparent layers of
color combine on paper
into spectrum of CMY
colors.

http://en.wikipedia.org/wiki/CMYK
Original from the slides of Heisele / Ivanov.
24 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 HSV Color Space

Original from the slides of Heisele / Ivanov.

25 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 HSL Color Space
• HSL stands for hue, saturation, lightness
• Advantages of HSL are that it is symmetrical to lightness and
darkness (which is not the case with HSV for example)
– In HSL, the Saturation component always goes from fully saturated
color to the equivalent gray (in HSV, with V at maximum, it goes from
saturated color to white, which may be considered counterintuitive).
– The Lightness in HSL always spans the entire range from black through
the chosen hue to white (in HSV, the V component only goes half that
way, from black to the chosen hue).
• NOT perceptual model
• Simple rotation of RGB

26 http://en.wikipedia.org/wiki/HSL_color_space
 Perceptual Color Space

Original from the slides of Stone.

27 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Blindness

http://www.vischeck.com/daltonize/
Original from M. Livingstone, “Vision and Art”
28 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Blindness

29of Stone
Original from the slides
28 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Map of the Market

Courtesy of Prof. Hanspeter Pfister, Harvard University.

30 Map of the Market, http://www.smartmoney.com/map-of-the-market/
 Color for Categories
• Only small number of colors can be used effectively as
category labels [Kawai, 95]
• Primary color terms are remarkably consistent across cultures
[Berlin & Kay, 69]
• First six colors are axis of color-opponent model

• Ware suggests 12 colors for labeling

– red, green, yellow, blue, black, white
– pink, cyan, grey, orange, brown, purple
31 Press.
Information Visualization (perception for design) (2nd Edition), Colin Ware, Elsevier
30 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Colors for Sequences

• Order these colors (low to high)

32of Stasko
Original from the slides
31 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Colors for Sequences

• Order these colors (low to high)

33of Stasko
Original from the slides
32 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Terminology
• Hue - what people think of color
• Saturation - purity, distance from grey
• Value - lightness, from dark to light
• Lightness - relative intensity
• L* - perceptually uniform lightness
• Luminance / brightness - perceived intensity

34
33 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Effects and Moods of Color
• The colors of 'Cold': Colors like Blue, green and Blue-green are associated with cold, and calm. Use
these colors to promote a feeling of austerity, cleanliness, invigorating freshness, coldness.
• The colors of 'Cool': Blue is the base for these colors but added are reds and yellows to bring out a
wide range of color from minty green to a soft violet. These colors help promote a feeling of calm,
serenity, trust and relaxation.
• The colors of 'Hot': Red is the highest chroma color there is...simply put it is the most powerful
hue. A hot color may evoke strong emotional responses, and has been known to stimulate physical
activity and sexual desire. Use hot colors if you are wanting an aggressive feel or want something to
really stand out amongst others. Note: Even though red is the strongest of hues, placing a high
chroma yellow in any designsd or work of art will draw the eye first.
• The colors of 'Warmth': Based in Red but softened and suffused with orange and yellows. Warm
colors are often used to suggest comfort and warm heartfelt emotions.
• The colors of 'Darkness': No these are not the colors of evil. They are often used to reduce space.
These colors are also used so that lighter colors can stand out greater and be more effective. These
colors are somber, and can suggest melancholy and solidity.
• The colors of 'Light': These colors are barely colors at all they exist merely as suggestions and hints
of colors. They are the opposite of darkness, and they are often used to open up a space or evoke a
feeling of openess.
• The colors of 'Pastel': These pale colors are hues tinted with large amounts of white and are very
soft in nature. The bring out a mood of innocence, fond memories, and romance.
• The colors of 'Intensity': The colors of intensity are high chroma colors, pure and when used seem
to scream their message. Great for attention grabbing. 35
34 http://www.steeldolphin-forums.com/htmltuts/colortheory.html
 Color Design Principles
• Control value (lightness)
– Ensure legibility
– Avoid unwanted emphasis
• Use a limited hue palette
– Control color “pop out”
– Avoid clutter from too many competing colors
• Limit the use of bright colors
– Small bright areas, dull backgrounds
• Use the colors found in nature
– Familiar, naturally harmonious
• Use grayed colors for backgrounds
– Quiet, versatile
• Create color unity
– Repeat, mingle, interweave

36of Stone
Original from the slides
35 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Data to Color
• Hue scale
– Nominal data (labels)
• Saturation scale
– Ordinal data
– More = darker (or more saturated)
– Most accurate if quantized
• Value (lightness)
– Controlling value primary rule for design
• Value defines shape
– No edge or shading without lightness difference
• Value difference (contrast)
– Defines legibility / controls attention / creates layering

37of Stone
Original from the slides
36 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Radio Spectrum Map

33 Colors!
Courtesy of Prof. Hanspeter Pfister, Harvard 38
University.
37 http://www.cybergeography.org/atlas/us_spectrum_map.pdf
 Web Color
• Colors used in designing web pages, and the methods for
describing and specifying those colors.
• HTML color 4.01 specification defines sixteen named colors
• These 16 were also specified as sRGB, the standard 16 colors
supported with the Windows VGA palette.

• X11 color
– http://en.wikipedia.org/wiki/Web_colors
39 http://en.wikipedia.org/wiki/Web_colors
 Density Map

40of Stone
Original from the slides
39 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Illustrative Color

http://2modern.blogs.com/photos/uncategorized/2007/12/10/mashadyans.jpg
41
http://www.bartleby.com/107/illus520.html
40 Courtesy of Prof. Hanspeter Pfister, Harvard University.
 Color Display

42
41 http://webstyleguide.com/graphics/displays.html
 Color Gamut

Note: cold-cathode fluorescent lamp (CCFL)

http://www.waleedsgallery.biz/_forumuploads/colorspaces.gif
43 http://powerelectronics.com/power_management/led_drivers/Fig-3-color-gamut.jpg
 HSV Color Theory For Digital Artists

https://www.youtube.com/watch?v=QA2dLTOJfJk
https://www.youtube.com/watch?v=6tyumG7W1lQ
44
 Colorization Using Optimization

45 Anat Levin, Dani Lischinski, Yair Weiss, http://www.cs.huji.ac.il/~yweiss/Colorization/

 Conclusion
• To show detail in a visualization, always have considerable
luminance contrast between foreground and background
information.
• Use only a few colors if they are distinct codes.
• Black or white borders around colored symbols can help make them
distinct by ensuring a luminance contrast break with surrounding
colors
• Red, green, yellow, and blue are hard-wired into the brain as
primaries. Necessary to remember for color coding.
• When color-coding large areas, use muted colors, especially if
colored symbols are to be superimposed.
• Small color-coded objects should be given high-saturation colors.
• When a perceptually meaningful ordering is needed, use a
sequence that varies monotonically on at least one of the opponent
color channels.
46
46 Information Visualization (perception for design) (2nd Edition), Colin Ware, Elsevier Press.
 Conclusion Con’d
• If it is important to show variations above and below zero, use a
neutral value to represent zero and use increases in saturation
toward opposite colors to show positive and negative values.
• Color contrast can cause large errors in the representation of
quantity.
• For the reproduction of smooth color sequences, several million
colors are needed under optimal viewing conditions.
• When reproducing complex, continuously shaded images, it is
critical to preserve the color relationships and to make sure that,
under the particular lighting conditions, neutral values are
perceived as neutral.
• Beware of oversaturating colors, especially when a printed image is
to be the end product.

47
47 Information Visualization (perception for design) (2nd Edition), Colin Ware, Elsevier Press.
 Other Color Sources
• Expert Color Choices for Presenting Data
– Maureen Stone, StoneSoup Consulting
– http://courses.washington.edu/info424/2007/documents/Stone-Color%20Choices.pdf

• Online Resource
– OpenGL.org (OpenGL shading language, OpenGL 2.0 specification)
– The OpenGL Programming Guide (Red Book): This online version of the classic OpenGL
tutorial/reference covers version 1.1 of GL. This isn't the latest version of GL, but it has
all the information you need to learn/review GL basics, such as transformations, lighting,
and texture mapping.
• Tools
– Processing: The open source programming language and environment.
– vtk: The Visualization Toolkit
– itk: The Insight Toolkit for segmentation and registration
– blender: Open source 3D modeling tool
– GLUT (for Windows): the OpenGL Utility Toolkit (GLUT) for building user interfaces
– G3D: a commercial-grade 3D Engine available as Open Source (BSD License)
– Python
• Regular Expression Checker
• Introduction to Python & Regular Expressions
• Beautiful Soup documentation

48