This lecture forms part of an Information Visualisation course given at the Vrije Universiteit Brussel.

1. 2 December 2005
Information Visualisation
Human Perception and Colour Theory
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
beatsigner.com

2. Beat Signer - Department of Computer Science - bsigner@vub.be 2
February 18, 2021
Information Visualisation Process
Data
Representation
Data
Data
Presentation
Interaction
mapping
perception and
visual thinking

3. Beat Signer - Department of Computer Science - bsigner@vub.be 3
February 18, 2021
General Guidelines
Design graphic representations of data by taking into account human
sensory capabilities in such a way that important data elements and
data patterns can be quickly perceived.
Important data should be represented by graphical elements that are
more visually distinct than those representing less important
information.
Greater numerical quantities should be represented by more distinct
graphical elements.

4. Beat Signer - Department of Computer Science - bsigner@vub.be 4
February 18, 2021
Model of Perceptual Processing
"What" system

5. Beat Signer - Department of Computer Science - bsigner@vub.be 5
February 18, 2021
Model of Perceptual Processing ...
▪ Stage 1: Parallel processing to extract low-level features
▪ billions of neurons working in parallel (in eye and visual cortex)
▪ orientation, colour, texture and motion
▪ results in a set of feature maps
▪ Stage 2: Pattern perception
▪ slower serial processing
▪ continuous contours, regions of same colour or texture
▪ two-visual-system theory: "Action" system and "What" system
▪ Stage 3: Visual working memory
▪ only a few objects in visual working memory
▪ may provide answers to visual query
▪ Attention affects all three stages!

6. Beat Signer - Department of Computer Science - bsigner@vub.be 6
February 18, 2021
Costs and Benefits of Visualisation
Where two or more tools can perform the same task, choose the one
that allows for the most valuable work to be done per unit time.
Consider adopting novel design solutions only when the estimated
payoff is substantially greater than the cost of learning to use them.
Unless the benefit of novelty outweighs the cost of inconsistency,
adopt tools that are consistent with other commonly used tools.

7. Beat Signer - Department of Computer Science - bsigner@vub.be 7
February 18, 2021
Visible Light
Observing is interpreting light patterns https://commons.wikimedia.org/wiki/File:EM_spectrum.svg

8. Beat Signer - Department of Computer Science - bsigner@vub.be 8
February 18, 2021
Gibson's Ecological Optics (1979)
▪ Extract properties of
surfaces
▪ colour, texture, ...
▪ Ambient optical array
▪ spherical array of light
arriving at a given point
▪ Optical flow
▪ dynamic ambient optical array
- moving objects, moving viewpoint
▪ perception of motion patterns
Ambient optical array [Information Visualization, Colin Ware, 2013]
Consider texturing surfaces in 3D visualisations.

9. Beat Signer - Department of Computer Science - bsigner@vub.be 9
February 18, 2021
Anatomy of the Human Eye
https://commons.wikimedia.org/wiki/File:Blausen_0388_EyeAnatomy_01.png
Fovea

10. Beat Signer - Department of Computer Science - bsigner@vub.be 10
February 18, 2021
Anatomy of the Human Eye ...
▪ Variable focus lens
▪ Pupil (aperture)
▪ Retina (sensor array)
▪ what we see ≠ image on the retina
▪ two types of cells
- rods (~100 million), highly sensitive at low light levels
- cones (~6 million), three distinct colour receptors (S-cones, M-cones and
L-cones) (trichromacy)
▪ Brain forms our sight
▪ focal length
▪ maximum sharpness
▪ …

11. Beat Signer - Department of Computer Science - bsigner@vub.be 11
February 18, 2021
Focus
▪ Focus = focus distance
▪ Depth of focus
▪ distance eye-object = 50cm
- focus lies between 43cm and 60cm
▪ distance eye-object = 3m
- focus lies between 1.5m and infinite

12. Beat Signer - Department of Computer Science - bsigner@vub.be 12
February 18, 2021
Visual Field
Visual field [Information Visualization, Colin Ware, 2013]

13. Beat Signer - Department of Computer Science - bsigner@vub.be 13
February 18, 2021
Optimal Screen

14. Beat Signer - Department of Computer Science - bsigner@vub.be 14
February 18, 2021
Optimal Screen …
Use a high-resolution display with a moderate viewing angle
(e.g. 40 degrees) for data analysis. This applies both to individual
data analysis when the screen can be on a desktop and close to the
user and to collaborative data analysis when the screen must be
larger and farther away.

15. Beat Signer - Department of Computer Science - bsigner@vub.be 15
February 18, 2021
Visual Acuity
▪ Eyesight = retinal focus +
brain interpretation
▪ Extent to which we can
perceive details
▪ ability to identify black
symbols on a white back-
ground at a standardised
distance when the size of
the symbols is varied
▪ Important for the maxi-
mum density of data on
a screen

16. Beat Signer - Department of Computer Science - bsigner@vub.be 16
February 18, 2021
Brightness
▪ Colour space can be divided into luminance (grey scale)
and two chromatic (hue and saturation) dimensions
▪ Light receptors in the eye
▪ do not measure the amount of light on the retina
▪ measure relative light changes over time and over adjacent spots
on the retina
▪ Eye is a change meter rather than a light meter
▪ Luminance refers to the measured amount of light
coming from some region of space

17. Beat Signer - Department of Computer Science - bsigner@vub.be 17
February 18, 2021
Brightness Illusions
▪ Retinal ganglion cell
receives input from
multiple receptors
(receptive field)
▪ Processing tries to
enhance edges
▪ lateral inhibition from
neighbouring neurons
Herman grid illusion [Information Visualization, Colin Ware, 2013]

18. Beat Signer - Department of Computer Science - bsigner@vub.be 18
February 18, 2021
Simultaneous Brightness Contrast
Simultaneous brightness contrast [Information Visualization, Colin Ware, 2013]

19. Beat Signer - Department of Computer Science - bsigner@vub.be 19
February 18, 2021
Chevreul Illusion
Chevreul illusion [Information Visualization, Colin Ware, 2013]

20. Beat Signer - Department of Computer Science - bsigner@vub.be 20
February 18, 2021
Simultaneous Contrast and Errors
▪ Simultaneous contrast
effects result in large
errors for quantitative
information in grey scale
▪ up to 20% error for map
on the right Contrast effects [Information Visualization, Colin Ware, 2013]
Avoid using grey scale as a method for representing more than a few
(two to four) numerical values.

21. Beat Signer - Department of Computer Science - bsigner@vub.be 21
February 18, 2021
Contrast Effects and Shading
▪ Computer graphics
shading algorithms
▪ uniform (flat) shading
- Chevreul illusion
▪ Gouraud shading
- Mach banding
▪ Phong shading
- smooth changes with no
appreciable Mach banding
Shading [Information Visualization, Colin Ware, 2013]
uniform (flat)
shading
Gouraud
shading
Phong
shading

22. Beat Signer - Department of Computer Science - bsigner@vub.be 22
February 18, 2021
Edge Enhancement
Consider using Cornsweet contours instead of simple lines to define
convoluted bounded regions.

23. Beat Signer - Department of Computer Science - bsigner@vub.be 23
February 18, 2021
Highlighting via Contrast
Consider using adjustments in luminance contrast as a highlighting
method. It can be applied by reducing the contrast of unimportant
items or by locally adjusting the background to increase the
luminance contrast of critical areas.
Highlighting [Information Visualization, Colin Ware, 2013]

24. Beat Signer - Department of Computer Science - bsigner@vub.be 24
February 18, 2021
Contrast Crispening
▪ More subtle grey values
can be distinguished at
the point of crossover
If subtle grey-level gradations within the bounds of a small object are
important, create low-luminance contrast between the object and its
background.
Crispening [Information Visualization, Colin Ware, 2013]

25. Beat Signer - Department of Computer Science - bsigner@vub.be 25
February 18, 2021
Monitor/Projector Setup
Ideally, when setting up a monitor for viewing data, a light neutral-
coloured wall behind the screen should reflect an amount of light
comparable to the level of light coming from the monitor. The wall
facing the screen should be of low reflectance (mid- to dark grey) to
reduce reflections from the monitor screen. Lights should be placed
so that they do not reflect from the monitor screen.
When setting up a room for a projection system, ensure that minimal
room light falls on the projector screen. This can be done by means
of baffles to shield the screen from direct illumination. Low-
reflectance (mid- to dark grey) walls are also desirable, as the walls
will scatter light, some of which inevitably reaches the screen.

26. Beat Signer - Department of Computer Science - bsigner@vub.be 26
February 18, 2021
Colour Breaking Camouflage
Finding the cherries [Information Visualization, Colin Ware, 2013]

27. Beat Signer - Department of Computer Science - bsigner@vub.be 27
February 18, 2021
Cone Cell Sensitivity

28. Beat Signer - Department of Computer Science - bsigner@vub.be 28
February 18, 2021
Colour Blindness
▪ About 10% of the male population and about 1% of the
female population have some form of colour vision
deficiency
▪ Most commonly a lack of either the L-cones (protanopia)
or the M-cones (deuteranopia)
▪ both of these result in an inability to distinguish red and green

29. Beat Signer - Department of Computer Science - bsigner@vub.be 29
February 18, 2021
Colour Measurement
▪ C=rR+gG+bB

30. Beat Signer - Department of Computer Science - bsigner@vub.be 30
February 18, 2021
Colour Spaces
▪ Chromaticity coordinates
▪ hue (h) and saturation (s)
▪ luminance is treated
separately
▪ Different colours spaces
defined by different trian-
gles (3 primary colours)
▪ sRGB
▪ RGB
▪ ...

31. Beat Signer - Department of Computer Science - bsigner@vub.be 31
February 18, 2021
Saturation of Small/Large Areas
Use more saturated colours when colour coding small symbols, thin
lines, or other small areas. Use less saturated colours for coding
large areas.

32. Beat Signer - Department of Computer Science - bsigner@vub.be 32
February 18, 2021
Saturation
If using colour saturation to encode numerical quantity, use greater
saturation to represent greater numerical quantities. Avoid using a
saturation sequence to encode more than three values.

33. Beat Signer - Department of Computer Science - bsigner@vub.be 33
February 18, 2021
Luminance Contrast
When small symbols, text or detailed graphical representations of
information are displayed using colour on a differently coloured back-
ground, always ensure luminance contrast with the background.

34. Beat Signer - Department of Computer Science - bsigner@vub.be 34
February 18, 2021
Form
If large areas are defined using nearly equiluminous colours,
consider using thin border lines with large luminance differences
(from the colours of the areas) to help define the shapes.

35. Beat Signer - Department of Computer Science - bsigner@vub.be 35
February 18, 2021
Colour Contrast Illusion

36. Beat Signer - Department of Computer Science - bsigner@vub.be 36
February 18, 2021
Colouring Maps
Use low-saturation colours to colour code large areas. Generally,
light colours will be best because there is more room in colour space
in the high-lightness region than in the low-lightness region.

37. Beat Signer - Department of Computer Science - bsigner@vub.be 37
February 18, 2021
Colouring Maps ...
When colour coding large background areas overlaid with small
coloured symbols, consider using all low-saturation, high-value
(pastel) colours for the background, together with high-saturation
symbols on the foreground.

38. Beat Signer - Department of Computer Science - bsigner@vub.be 38
February 18, 2021
ColorBrewer: Colour Advice for Maps

39. Beat Signer - Department of Computer Science - bsigner@vub.be 39
February 18, 2021
Viz Palette

40. Beat Signer - Department of Computer Science - bsigner@vub.be 40
February 18, 2021
Exercise 2
▪ Data Sources and Dataset Quality Assessment

41. Beat Signer - Department of Computer Science - bsigner@vub.be 41
February 18, 2021
Further Reading
▪ Major parts of this lecture are based on the
book Information Visualization – Perception
for Design
▪ chapter 2, chapter 3 and chapter 4

42. Beat Signer - Department of Computer Science - bsigner@vub.be 42
February 18, 2021
References
▪ Information Visualization: Perception
for Design, Colin Ware, Morgan Kaufmann
(3rd edition) May 2012,
ISBN-13: 978-0123814647
▪ ColorBrewer
▪ https://colorbrewer2.org
▪ Viz Palette
▪ https://projects.susielu.com/viz-palette
▪

43. 2 December 2005
Next Lecture
Data Representation