$30 off During Our Annual Pro Sale. View Details »

Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)

Beat Signer
PRO
February 23, 2023

Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)

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

Beat Signer
PRO

February 23, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

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

    View Slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    February 23, 2023
    Information Visualisation Process
    Data
    Representation
    Data
    Data
    Presentation
    Interaction
    mapping
    perception and
    visual thinking

    View Slide

  3. Beat Signer - Department of Computer Science - [email protected] 3
    February 23, 2023
    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.

    View Slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    February 23, 2023
    Model of Visual Perceptual Processing
    "What" system

    View Slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    February 23, 2023
    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 (cognitive processing)
    ▪ Attention affects all three stages!

    View Slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    February 23, 2023
    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.

    View Slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    February 23, 2023
    Visible Light
    Observing is interpreting light patterns
    https://commons.wikimedia.org/wiki/File:EM_spectrum.svg

    View Slide

  8. Beat Signer - Department of Computer Science - [email protected] 8
    February 23, 2023
    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.

    View Slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    February 23, 2023
    Anatomy of the Human Eye
    https://commons.wikimedia.org/wiki/File:Blausen_0388_EyeAnatomy_01.png
    Fovea

    View Slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    February 23, 2023
    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
    ▪ …

    View Slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    February 23, 2023
    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

    View Slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    February 23, 2023
    Visual Field
    Visual field [Information Visualization, Colin Ware, 2013]

    View Slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    February 23, 2023
    Optimal Screen

    View Slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    February 23, 2023
    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.

    View Slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    February 23, 2023
    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

    View Slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    February 23, 2023
    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

    View Slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    February 23, 2023
    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]

    View Slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    February 23, 2023
    Simultaneous Brightness Contrast
    Simultaneous brightness contrast [Information Visualization, Colin Ware, 2013]

    View Slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    February 23, 2023
    Chevreul Illusion
    Chevreul illusion [Information Visualization, Colin Ware, 2013]

    View Slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    February 23, 2023
    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.

    View Slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    February 23, 2023
    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

    View Slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    February 23, 2023
    Edge Enhancement
    Consider using Cornsweet contours instead of simple lines to define
    convoluted bounded regions.

    View Slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    February 23, 2023
    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]

    View Slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    February 23, 2023
    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]

    View Slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    February 23, 2023
    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.

    View Slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    February 23, 2023
    Colour Breaking Camouflage
    Finding the cherries [Information Visualization, Colin Ware, 2013]

    View Slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    February 23, 2023
    Cone Cell Sensitivity

    View Slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    February 23, 2023
    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

    View Slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    February 23, 2023
    Colour Measurement
    ▪ C=rR+gG+bB

    View Slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    February 23, 2023
    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
    ▪ ...

    View Slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    February 23, 2023
    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.

    View Slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    February 23, 2023
    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.

    View Slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    February 23, 2023
    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.

    View Slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    February 23, 2023
    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.

    View Slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    February 23, 2023
    Colour Contrast Illusion

    View Slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    February 23, 2023
    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.

    View Slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    February 23, 2023
    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.

    View Slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    February 23, 2023
    ColorBrewer 2.0: Colour Advice for Maps

    View Slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    February 23, 2023
    Viz Palette

    View Slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    February 23, 2023
    Exercise 2
    ▪ Data Sources and Dataset Quality Assessment

    View Slide

  41. Beat Signer - Department of Computer Science - [email protected] 41
    February 23, 2023
    Further Reading
    ▪ Major parts of this lecture are based on the
    book Information Visualization – Perception
    for Design
    ▪ chapter 2, chapter 3 and chapter 4

    View Slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    February 23, 2023
    References
    ▪ Information Visualization: Perception
    for Design, Colin Ware, Morgan Kaufmann
    (3rd edition) May 2012,
    ISBN-13: 978-0123814647
    ▪ ColorBrewer 2.0
    ▪ https://colorbrewer2.org
    ▪ Viz Palette
    ▪ https://projects.susielu.com/viz-palette

    View Slide

  43. 2 December 2005
    Next Lecture
    Data Representation

    View Slide