COLOR FOR
DATA VISUALIZATION
The fundamental uses of color in information
design (are): to label, to measure, to represent
or imitate reality, to enliven or decorate.
COLOR
Is this a good or bad use of color?
Particularly avoid Roy G. Biv (red, orange,
yellow, green, blue, indigo, violet), the color
spectrum of the rainbow.
THE FIRST RULE
BASIC COLOR THEORY
How humans think about color How computers process color
COLOR PERCEPTION
A constant increase in brightness is not perceived as linear,
and this response is different for red, green, and blue. Look
for tools and color palettes that describe colors in a
perceptual color space, like CIE L*C*h or Munsell.
A color scale should vary consistently across the entire range of values, so
that each step is equivalent, regardless of its position on the scale.
A palette should also minimize errors from the color shifts introduced by
nearby areas of differing color or lightness, a phenomenon known as
simultaneous contrast.
Combine a linear, proportional change in lightness with a simultaneous
change in hue and saturation to achieve the perfect palette for
sequential data.
SEQUENTIAL DATA
For divergent data, use palettes that are composed of two sequential
palettes merged with a neutral color.
This type of palette works because it takes advantage of pre attentive
processing: our visual systems can discriminate the different colors quickly
and without conscious thought.
DIVERGENT DATA
A sequential palette that varies uniformly in lightness will still be readable by
someone with color decient vision (or a black and white print), regardless
of the hue. But a divergent palette with matched lightness can be difcult or
impossible to parse if the viewer can’t distinguish the hues.
COLOR DEFICIENCY CAUTION
Instead of representing proportional relationships, color is used to separate
areas into distinct categories. The palette should consist of colors as distinct
from one another as possible. Due to the limits of perception, especially
simultaneous contrast, the maximum number of categories that can be
displayed is about 12
CATEGORICAL/QUALITATIVE DATA
If you need to display double-digit categories, it’s best to group similar
classes together.
>12 CATEGORIES
A grouped color scheme allows the
USGS to simultaneously show 16 different
land cover classes in a single map of the
area surrounding Portland, Oregon.
RESOURCES FOR
SELECTING COLORS
Pros: Very easy to use, all palettes here are “safe”, available on D3
Cons: Limited color palettes to choose from
COLOR BREWER
NASA AMES COLOR TOOL
CHROMA.JS
HCL PICKER BY TRISTEN BROWN
LAB, LCH, RGB, AND HSV COLOR PICKER
I WANT HUE
For categorical palettes
COLOR GUIDELINES
FROM TUFTE
Color spots against a light gray or muted eld
highlight and italicize data.
A magnetogram is a map of magnetic
elds, in this case on the surface of the
Sun. A divergent palette suits this data
because the north polarity (red) and
south polarity (blue) are both
measurements of the same quantity
(magnetism), just with opposite signs.
SDO HMI image adapted from the Solar
Data Analysis Center.
Use colors found in nature, especially those on the
lighter side.
The subtle colors in this bathymetric map
of Crater Lake are a direct descendent of
the palettes created by Eduard Imhof.
Map courtesy National Park Service
Harper’s Ferry Center.
The unnatural colors of the rainbow palette (left) are often difcult for novice viewers to interpret. A
more naturalistic palette for phytoplankton(more or less a type of ocean vegetation) trends from dark
blue for barren ocean, through turquoise, green, and yellow for increasing concentrations of the tiny
plants and algae.
Pure, bright or very strong colors have loud, unbearable effects when
they stand unrelieved over large areas adjacent to each other, but
extraordinary effects can be achieved when they are used sparingly on
or between dull background tones.
Screenshot from the BBC’s traffic
accident visualization
http://www.bbc.co.uk/news/
uk-15975724
Large area background or base-colors should
do their work most quietly, allowing the smaller,
bright areas to stand out most vividly, if the
former are muted, grayish or neutral.
DO NOT DO THIS
LINKS
Slides based on:
http://earthobservatory.nasa.gov/blogs/elegantgures/2013/08/05/
subtleties-of-color-part-1-of-6/
A case study on color scales:
http://datavisualization.ch/inside/how-we-created-color-scales/

Color for Data Visualization

  • 1.
  • 2.
    The fundamental usesof color in information design (are): to label, to measure, to represent or imitate reality, to enliven or decorate. COLOR
  • 3.
    Is this agood or bad use of color?
  • 4.
    Particularly avoid RoyG. Biv (red, orange, yellow, green, blue, indigo, violet), the color spectrum of the rainbow. THE FIRST RULE
  • 5.
    BASIC COLOR THEORY Howhumans think about color How computers process color
  • 6.
    COLOR PERCEPTION A constantincrease in brightness is not perceived as linear, and this response is different for red, green, and blue. Look for tools and color palettes that describe colors in a perceptual color space, like CIE L*C*h or Munsell.
  • 7.
    A color scaleshould vary consistently across the entire range of values, so that each step is equivalent, regardless of its position on the scale. A palette should also minimize errors from the color shifts introduced by nearby areas of differing color or lightness, a phenomenon known as simultaneous contrast.
  • 8.
    Combine a linear,proportional change in lightness with a simultaneous change in hue and saturation to achieve the perfect palette for sequential data. SEQUENTIAL DATA
  • 9.
    For divergent data,use palettes that are composed of two sequential palettes merged with a neutral color. This type of palette works because it takes advantage of pre attentive processing: our visual systems can discriminate the different colors quickly and without conscious thought. DIVERGENT DATA
  • 10.
    A sequential palettethat varies uniformly in lightness will still be readable by someone with color deficient vision (or a black and white print), regardless of the hue. But a divergent palette with matched lightness can be difficult or impossible to parse if the viewer can’t distinguish the hues. COLOR DEFICIENCY CAUTION
  • 11.
    Instead of representingproportional relationships, color is used to separate areas into distinct categories. The palette should consist of colors as distinct from one another as possible. Due to the limits of perception, especially simultaneous contrast, the maximum number of categories that can be displayed is about 12 CATEGORICAL/QUALITATIVE DATA
  • 12.
    If you needto display double-digit categories, it’s best to group similar classes together. >12 CATEGORIES A grouped color scheme allows the USGS to simultaneously show 16 different land cover classes in a single map of the area surrounding Portland, Oregon.
  • 13.
  • 14.
    Pros: Very easyto use, all palettes here are “safe”, available on D3 Cons: Limited color palettes to choose from COLOR BREWER
  • 15.
  • 16.
  • 17.
    HCL PICKER BYTRISTEN BROWN
  • 18.
    LAB, LCH, RGB,AND HSV COLOR PICKER
  • 19.
    I WANT HUE Forcategorical palettes
  • 20.
  • 21.
    Color spots againsta light gray or muted eld highlight and italicize data. A magnetogram is a map of magnetic elds, in this case on the surface of the Sun. A divergent palette suits this data because the north polarity (red) and south polarity (blue) are both measurements of the same quantity (magnetism), just with opposite signs. SDO HMI image adapted from the Solar Data Analysis Center.
  • 22.
    Use colors foundin nature, especially those on the lighter side. The subtle colors in this bathymetric map of Crater Lake are a direct descendent of the palettes created by Eduard Imhof. Map courtesy National Park Service Harper’s Ferry Center.
  • 23.
    The unnatural colorsof the rainbow palette (left) are often difcult for novice viewers to interpret. A more naturalistic palette for phytoplankton(more or less a type of ocean vegetation) trends from dark blue for barren ocean, through turquoise, green, and yellow for increasing concentrations of the tiny plants and algae.
  • 24.
    Pure, bright orvery strong colors have loud, unbearable effects when they stand unrelieved over large areas adjacent to each other, but extraordinary effects can be achieved when they are used sparingly on or between dull background tones. Screenshot from the BBC’s traffic accident visualization http://www.bbc.co.uk/news/ uk-15975724
  • 25.
    Large area backgroundor base-colors should do their work most quietly, allowing the smaller, bright areas to stand out most vividly, if the former are muted, grayish or neutral. DO NOT DO THIS
  • 27.
    LINKS Slides based on: http://earthobservatory.nasa.gov/blogs/elegantgures/2013/08/05/ subtleties-of-color-part-1-of-6/ Acase study on color scales: http://datavisualization.ch/inside/how-we-created-color-scales/