[Data Visualization] Colors (Encoding)

Terminology

• There are three terms to describe the general concept of quantity of light:
• Luminance: the measured amount of (physical)
  • Can be measured by a photometer
  • SI unit: candela per square meter (cd/m^2) or nit
• Brightness: the perceived amount of light
• Lightness: perceived reflectance of a surface

Brightness vs Lightness

• Brightness is used when we talk about things that are self-luminous.
  • “The sun is bright.”
  • “That lamp is dim.”
  • Sometimes, we say “bright colors” but it is not scientific from a vis point of view.
  • Don’t say “Your shirt is bright red.” (use vivid instead)
• Brightness is the perceived amount of luminance.
• So, it follows Stevens’s Power Law.
• 𝑃𝑒𝑟𝑐𝑒𝑖𝑣𝑒𝑑 𝐵𝑟𝑖𝑔ℎ𝑡𝑛𝑒𝑠𝑠 = 𝐿𝑢𝑚𝑖𝑛𝑎𝑛𝑐𝑒^𝑛

• Brightness is important when you realize your visualizations on monitors.
• Monitors are self-luminous.
  • e.g., you can adjust the brightness of your monitor.
• However, in this class, we will focus on color itself not its realization, so you will not see the term “brightness”.

• Lightness is important in vis. It is the perceived reflectance of a surface.
  • It involves a surface and reflectance on it.
• A white surface is light, but a black surface is dark
• Our eyes do not perceive the absolute amount of light.

Lightness Constancy

• We have an ability to perceive the relative reflectance of objects despite changes in illumination.
  • This is called color/lightness constancy
• Very powerful. You can name the color of a thing in a very dim room.
• Color/Lightness perception is contextual.

• Sometimes, it is too strong…

Summary

• Luminance: physical property of a self luminous thing
• Brightness: perceived luminance (no surface, non linear, dim to bright)
• Lightness: perceived reflectance (surface, non linear, relative, dark to light)
• In the HSL color space, L means lightness not luminance.
• In the CIELAB color space, L* means lightness not luminance.

Terminology

• In our textbook, VAD, the author used the terms luminance , hue , and saturation to describe color.
  • Here, luminance means the black and white visual channel not a physical property.
  • These terms are independent to any of the color spaces, such as RGB, HSL (L for lightness!), CIERGB, CIEXYZ, …
• But, when you realize color encoding, you must use at least one color space to represent your colors, such as RGB, so that your graphic devices can encode & decode colors.

Color Encoding

• The color channel can be used to visualize both categorical (nominal or ordinal) and quantitative data.
• Basic ideas:
• Hue for nominal data
• Luminance or saturation for ordinal or quantitative data

Hue for Nominal

• The identity channel of hue is extremely effective for nominal data and showing groupings.

• Hue does not have an implicit perceptual ordering.
• Nominal data also do not have ordering.
  • The characteristics of data and the visual channel agree! –> good encoding
• Sometimes, people do learn some conventions.
  • Red-orange-yellow-green-blue-indigo-violet for rainbow
  • Red-yellow-green for traffic lights
  • But these orderings are at a higher level than pure perception.

Luminance/Saturation for Ordinal/Quantitative

• The magnitude channels of luminance and saturation for ordered data.
• Luminance
  • It is hard to perceive whether noncontiguous regions have the same luminance because of contrast effects.
  • Use less than five bins when the background is not uniform.
• Saturation
  • The number of discriminable steps for saturation is low (~ 3 bins)

Transparency

• Transparency is the fourth channel for describing colors, e.g., rgba
• Encoding data to opacity is not a good idea because it strongly interacts with luminance and saturation.
• This channel is used most often with superimposed layers with redundant encoding.

Colormaps

• A colormap maps data values to colors.
  • a.k.a. color ramp
• Two types:
  • Categorical (= nominal)
    • Binary: when there are only two categorical values
  • Ordered
    • Sequential: from minimum to maximum
    • Diverging: two hues at the endpoints and a neutral color as a mid point

• These colormaps are all discrete (or segmented) colormaps.
  • cf. continuous colormaps

• There are only two categories in binary colormaps
• No need for using hue. Leave it for other data attributes.

• Categorical colormaps: if there are more than two categories, we need to use the hue channel!
• Use distinguishable hues!

• If there is a neutral value in data, use diverging colormap
• Usually, encode the neutral value to less distinct colors (e.g., gray) and use a different hue for each side.

• For sequential data, use sequential colormaps.
• The luminance channel is effective for ordered data.

• Bivariate colormaps encode two different attributes at the same time.
• But, it can be difficult to interpret when both attributes have multiple levels.

Bivariate Colormap Example

Categorical Colormaps

• Categories to colors (usually with hue)
• The number of discriminable colors for coding small separated regions is limited to between six and twelve bins
• For memorability, use easily nameable colors.
  • 4 categories: red, blue, green and yellow
  • +6 categories: orange, brown, pink, magenta, purple, and cyan

• There are important issues when designing categorical colormaps.
• Consider luminance
  • It is not a good idea to use yellow against a white background (less luminance contrast, hard to read)
• Consider mark type
  • Colors for small regions should be highly saturated, but larger regions such as areas should have low saturation.
• Consider color deficiency
• Consider printing (black and white)

• Saturation vs Size Data

• 21 categorical colors are too many!
• On the right, we can only see colors as groups (e.g., green areas).
• Alternatives? data transformations or using other channels together

Useful Resources

Ordered Colormaps

• Ordered colormaps
  • Sequential
  • Diverging
• Sequential colormaps range from a minimum value to a maximum value.
• Diverging colormaps map a midpoint to an off white color and two ends to two fully saturated colors with different hues.

Rainbow Colormaps are Bad!

• Many visualizations in the real world adopt rainbow colormaps for sequential data, but it is considered a (very) bad practice.
• Advantages:
  • Vis seems colorful (?).
  • Areas are easily nameable, e.g., “see blue areas.” Data

• Disadvantages:
  • Hue is used to indicate order, but there is no implicit ordering between hues!
  • The scale is not perceptually linear.
    • Some colors, such as yellow and sky-blue, seem lighter than others.
  • The detail cannot be perceived with the hue channel.
    • Remember, most details should be conveyed by the luminance channel.
    • Luminance contrast is required for edge detection in the human eye.

• If you want to reveal large scale structure, use only two hues and change the saturation (i.e., diverging colormaps).

• If you want to reveal fine structure, use a multiple hue continuous colormap with monotonically increasing luminance.
  • • categorization becomes easier!

• If you really want to use rainbow colormaps, use perceptually linear alternatives.

Rainbow Alternatives

• Colorful, perceptually uniform, colorblind safe, monotonically increasing luminance

Cultural Bias

Summary: Colors (Encoding)

• Luminance: physical intensity of light per area
• Brightness: perceptual luminance
• Lightness: perceptual reflectance (needs a surface)
• Use the hue channel for identity or categorical data.
• Use the luminance and saturation channels for magnitude or quantitative data.
• Rainbow is bad!
  • Perceptually non linear, hue is not for quantitative data, no ordering

• For categorical colormaps, use:

• For sequential colormaps, use:

• For divierging colormaps, use:

• Colorful, perceptually uniform, colorblind safe, monotonically increasing luminance