Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)

Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)

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

Beat Signer
PRO

March 15, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  1. 2 December 2005
    Information Visualisation
    Data Presentation
    Prof. Beat Signer
    Department of Computer Science
    Vrije Universiteit Brussel
    beatsigner.com

    View Slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    March 16, 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
    March 16, 2023
    Marks and Channels
    ▪ Marks are basic graphical elements (geometric primi-
    tives) to represent items or links
    ▪ Channels control the appearance of marks
    ▪ Vis design space described by orthogonal combination of
    marks and channels
    ▪ Complex visual encodings can be decomposed and
    analysed in terms of their marks and channels
    ▪ building blocks for analysing visual encodings

    View Slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    March 16, 2023
    Marks
    ▪ Basic geometric/graphical element in an image
    ▪ classified according to the number of spatial dimensions

    View Slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    March 16, 2023
    Marks …
    ▪ Zero-, one- or two-dimensional marks
    ▪ three-dimensional marks (volumes) are not used frequently
    due to limited perception

    View Slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    March 16, 2023
    Mark Types
    ▪ Item marks
    ▪ Link marks
    ▪ connection marks
    - pairwise relationship between two items via a line
    ▪ containment marks (enclosure or nesting)
    - hierarchical relationships using areas

    View Slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    March 16, 2023
    Channels

    View Slide

  8. Beat Signer - Department of Computer Science - [email protected] 8
    March 16, 2023
    Channels …
    ▪ Control appearance of mark independently of the
    dimensionality of the geometric primitive
    ▪ Many visual channels
    ▪ spatial position
    ▪ shape
    ▪ colour (hue, saturation and luminance)
    ▪ motion (e.g. flicker, direction and velocity)
    ▪ size (i.e. length, area and volume)
    ▪ tilt (angle)
    ▪ Size and shape channels cannot be used on all types of
    marks
    ▪ e.g. area marks typically not size or shape coded

    View Slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    March 16, 2023
    Channel Types
    ▪ Identity channels
    ▪ information about what something is
    ▪ e.g. shape, hue colour channel, motion pattern
    ▪ Magnitude channels
    ▪ how much of something is there
    ▪ e.g. size (length, area or volume), luminance or saturation colour
    channels, angle, …

    View Slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    March 16, 2023
    Using Marks and Channels
    ▪ Progression of chart types
    ▪ (a) one quantitative and one categorical attribute
    ▪ (b) scatterplot with two quantitative attributes
    ▪ (c) two quantitative and one categorical attribute via hue
    ▪ (d) three quantitative (one via size) and one categorical attribute
    ▪ In examples each attribute encoded via single channel
    ▪ multiple channels might also be used redundantly

    View Slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    March 16, 2023
    Using Marks and Channels …
    ▪ Use of marks and channels guided by the principles of
    expressiveness and effectiveness
    ▪ after identifying most important attributes ensure that they
    are encoded with the highest ranked channel
    ▪ Expressiveness principle
    ▪ visual encoding should express all of, and only, the information
    in the dataset attributes
    - ordered data (ordered attributes) should be shown in a way that our perceptual
    system senses as ordered → use magnitude channels
    - unordered data (categorical attributes) should not be shown in a way that
    perceptually implies an ordering that does not exist → use identity channels

    View Slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    March 16, 2023
    Using Marks and Channels …
    ▪ Effectiveness principle
    ▪ importance of attribute should match the salience of the channel
    ▪ most important attributes (depends on the task) encoded with
    most effective channels
    ▪ Attributes encoded with position will dominate the user's
    mental model
    ▪ choice of which attributes to encode with position is the most
    central choice in visual encoding

    View Slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    March 16, 2023
    Channel Effectiveness
    [Visualization Analysis & Design, Tamara Munzner, 2014]

    View Slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    March 16, 2023
    Channel Effectiveness …
    ▪ Obvious way to quantify effectiveness via accuracy
    ▪ how close is human perceptual judgement to some objective
    measurement of the stimulus?
    ▪ Different visual channels are perceived with different
    levels of accuracy
    ▪ characterised by Steven's Psychophysical Power Law

    View Slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    March 16, 2023
    Steven's Psychophysical Power Law
    ▪ Responses to sensory
    experience of magnitude
    are characterisable by
    power laws
    ▪ 𝑆 = perceived sensation
    ▪ I = physical intensity
    ▪ exponent N depends on
    sensory modality
    ▪ most stimuli are magnified
    (superlinear) or compressed
    (sublinear)
    [Visualization Analysis & Design, Tamara Munzner, 2014]

    View Slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    March 16, 2023
    Error Rates Across Channels
    Results by Cleveland and McGill, 1984

    View Slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    March 16, 2023
    Channel Effectiveness …
    ▪ Channel effectiveness mainly based on accuracy but
    also takes into account
    ▪ discriminability
    ▪ separability
    ▪ popout
    ▪ grouping

    View Slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    March 16, 2023
    Discriminability
    ▪ Quantify the number of distinguishable steps (bins) that
    are available within a visual channel
    ▪ some channels (e.g. line width) have a very limited number
    of bins
    ▪ small number of bins is not a problem if the number of values
    to be encoded is also small
    ▪ number of different values that need to be shown for an attribute
    must not be greater than the available bins for the visual channel
    - otherwise aggregate or use different visual channel

    View Slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    March 16, 2023
    Effective Line Width Use
    ▪ Limited number of
    discriminable bins
    ▪ line width works well
    for 3 or 4 different
    values

    View Slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    March 16, 2023
    Separability
    ▪ Channels are not always completely independent from
    each other (interchannel interference)
    ▪ ranging from fully separable channels to the inseparably
    combined integral channels (major interference)
    ▪ Visual encoding straightforward with separable channels
    ▪ encoding of different information in integral channels will fail

    View Slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    March 16, 2023
    Popout
    ▪ Many channels provide visual popout (preattentive
    processing) where a distinct item stands out from many
    others immediately
    ▪ time to spot the different object does not depend on the number
    of distractor objects (a) vs. (b)
    ▪ massively parallel processing of low-level features
    ▪ popout effect slower for shapes ((c) and (d)) than for colour hue
    channel ((a) and (b))
    ▪ channels with individual popout cannot simply be combined
    ((e) and (f))
    - need serial search to find the red circle in (f)
    ▪ Most pairs of channels do not support popout
    ▪ use popout for a single channel at a time

    View Slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    March 16, 2023
    Popout …

    View Slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    March 16, 2023
    Popout Channels
    ▪ Popout cannot only occur for colour hue and shape
    channels
    ▪ tilt (a)
    ▪ size (b)
    ▪ shape (c)
    ▪ proximity (d)
    ▪ shadow direction (e)

    View Slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    March 16, 2023
    Popup Channels …

    View Slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    March 16, 2023
    Grouping
    ▪ Containment (links) is the strongest cue for grouping
    followed with connection coming in second
    ▪ Items sharing the same level of a categorical attribute
    can also be perceived as a group
    ▪ Proximity is the third strongest grouping approach
    ▪ Similarity (hue, motion and shape)
    ▪ shape and motion channel to be used with care

    View Slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    March 16, 2023
    Relative versus Absolute Judgements
    ▪ Perceptual system fundamentally based on relative
    judgements and not absolute ones (Weber's Law)
    ▪ e.g. position along a scale can be perceived more accurately than
    pure length judgement without a scale

    View Slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    March 16, 2023
    Relative Luminance Perception
    ▪ Perception of luminance is contextual based on the
    contrast with surrounding colours

    View Slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    March 16, 2023
    Colour (Hue) Perception
    ▪ Our visual systems evolved to provide colour constancy
    ▪ same surface identifiable across illumination conditions
    ▪ visual system might work against simple colour encodings
    [Visualization Analysis & Design, Tamara Munzner, 2014]

    View Slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    March 16, 2023
    Mapping Colour
    ▪ Luminance and saturation
    are magnitude channels
    while hue is an identity
    channel
    ▪ luminance can be used for
    two to four levels (bins)
    ▪ saturation can be used for
    up to three levels (bins)
    - strongly interacts with size
    channel
    ▪ saturation and hue are non-
    separable channels for small
    regions

    View Slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    March 16, 2023
    Comparing HSL Lightness
    ▪ Computed HSL lightness L is the same for all six colours
    ▪ true luminance as measured by an instrument
    ▪ perceived luminance L* represents what we see
    - more sensitive to certain wavelengths (green and yellow) as shown earlier
    with the spectral sensitivity

    View Slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    March 16, 2023
    No Implicit Order for Hue
    ▪ Sometimes learned hue orders (not at perception level)
    ▪ green-yellow-red from traffics lights
    ▪ rainbow colour ordering

    View Slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    March 16, 2023
    Colourmaps
    ▪ A colourmap defines a mapping between colours and
    data values
    ▪ Colourmaps can be categorical or ordered (sequential
    or diverging)
    ▪ use magnitude channels of luminance and saturation
    for ordered data

    View Slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    March 16, 2023
    Colourmap Categorisation (Taxonomy)
    [Visualization Analysis & Design, Tamara Munzner, 2014]

    View Slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    March 16, 2023
    Categorical Colourmaps
    ▪ Categorical colourmaps (qualitative colourmaps) are
    normally segmented (not continous)
    ▪ effective for categorical data (next best channel after position)
    ▪ Good resource for creating colourmaps is ColorBrewer

    View Slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    March 16, 2023
    Categorical Colourmaps …
    ▪ Can use six to twelve distinguishable hue steps (bins)
    for small separated regions
    ▪ includes background colour and default object colours
    ▪ use easy nameable colours: e.g. red, blue, green, yellow, orange,
    brown, pink, magenta, purple and cyan
    ▪ Use highly saturated colours for small regions
    ▪ Use low-saturation colours (pastels) for large regions

    View Slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    March 16, 2023
    Ineffective Categorical Colourmap Use

    View Slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    March 16, 2023
    Example of Using Additional Channels
    ▪ Dataset with 27 categorical levels from 7 categories

    View Slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    March 16, 2023
    Example of Using Additional Channels …

    View Slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    March 16, 2023
    Example of Using Additional Channels …

    View Slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    March 16, 2023
    Example of Using Additional Channels …

    View Slide

  41. Beat Signer - Department of Computer Science - [email protected] 41
    March 16, 2023
    Ordered Colourmaps
    ▪ Sequential colourmap ranges from a minimum value
    to a maximum value
    ▪ use luminance (with or without hue) or saturation channel
    ▪ Diverging colourmap
    ▪ use two hues at the endpoints and a neutral colour (e.g. white
    or grey) as a midpoint

    View Slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    March 16, 2023
    Rainbow versus Two-Hue Colour Map
    ▪ How many hues to use in continous colourmaps?
    ▪ high-level structure versus local neighbourhoods (fine grained
    details)
    ▪ rainbow colourmap makes it easier to discuss specific (nameable)
    subranges

    View Slide

  43. Beat Signer - Department of Computer Science - [email protected] 43
    March 16, 2023
    Rainbow Continous Colourmaps
    ▪ Problems of rainbow continous colourmaps
    ▪ hue is used to indicate order (despite being an identity channel)
    ▪ scale is not perceptually linear
    ▪ fine details cannot be perceived via the hue channel
    - luminance channel much better (luminance contrast required for edge
    detection in our eyes)

    View Slide

  44. Beat Signer - Department of Computer Science - [email protected] 44
    March 16, 2023
    Rainbow Continous Colourmaps …
    ▪ The three problems of rainbow continous colourmaps
    can be addressed by using monotonically increasing
    luminance colourmaps
    ▪ multiple hues are ordered according to their luminance from
    lowest to highest
    ▪ Rainbow colourmap
    ▪ standard rainbow colour-
    map (a) vs. perceptually
    linear rainbows (b) with
    decreased dynamic range
    ▪ segmented rainbow for
    categorical data (c)

    View Slide

  45. Beat Signer - Department of Computer Science - [email protected] 45
    March 16, 2023
    Bivariate Colourmaps
    ▪ Safest use of colour channel is to visually encode a
    single attribute (univariate)
    ▪ In the colourmap categorisation we have seen
    colourmaps encoding two separate attribute (bivariate)
    ▪ if one of the two attributes is binary then it is straightforward to
    create a comprehensible bivariate colourmap
    - choose base set of hues and vary the saturation
    ▪ if both attributes are categorical with multiple levels the results
    will be poor
    ▪ combinations of sequential and diverging attributes should be
    used carefully
    - appear frequently in vis solutions but some people have difficulties
    to interpret their meaning

    View Slide

  46. Beat Signer - Department of Computer Science - [email protected] 46
    March 16, 2023
    Colourblind-Safe Colourmaps
    ▪ A safe strategy is to avoid using the hue channel only
    ▪ e.g. vary luminance or saturation in addition to hue in categorical
    colourmaps
    ▪ Avoid colourmaps emphasising red-green (e.g. diverging
    red-green colourmap)
    ▪ Use colour blindness simulators and tools such
    as Viz Palette

    View Slide

  47. Beat Signer - Department of Computer Science - [email protected] 47
    March 16, 2023
    Size Channels
    ▪ Suitable for ordered data but interacts with most other
    channels
    ▪ length (1D)
    - judgment of length is very accurate
    ▪ area (2D)
    - judgement of area is less accurate
    ▪ volume (3D)
    - volume channel is quite inaccurate

    View Slide

  48. Beat Signer - Department of Computer Science - [email protected] 48
    March 16, 2023
    Tilt/Angle Channel
    ▪ Encode magnitude information based on the orientation
    of a mark
    ▪ tilt: orientation against the global frame of the display
    ▪ angle: orientation of a line with respect to another line
    ▪ Accuracy of our perception of a tilt/angle is not uniform
    ▪ very accurate near exact horizontal, vertical or diagonal positions

    View Slide

  49. Beat Signer - Department of Computer Science - [email protected] 49
    March 16, 2023
    Other Channels
    ▪ Shape channel
    ▪ commonly applied to point marks
    ▪ can also be applied to line marks (e.g. dotted or dashed lines)
    ▪ can distinguish between dozens up to hundreds bins
    - strong interaction between shape and size channel
    ▪ Motion channels
    ▪ direction of motion
    ▪ velocity of motion
    ▪ flicker and blinking frequency
    ▪ very separable from all other static channels
    ▪ strongly draws attention (strong popout)
    - hard to ignore and should be used carefully

    View Slide

  50. Beat Signer - Department of Computer Science - [email protected] 50
    March 16, 2023
    Other Channels …
    ▪ Texture and stippling channel
    ▪ texture can be simplified by considering it as a combination of the
    following three perceptual dimensions
    - orientation, scale and contrast
    ▪ texture can be used to show categorical attributes as well as
    ordered attributes
    ▪ Stippling fills regions of drawings with short strokes
    - e.g. dashed or dotted lines
    - used for area marks in older printing (to simulate grey)

    View Slide

  51. Beat Signer - Department of Computer Science - [email protected] 51
    March 16, 2023
    Exercise 5
    ▪ Visualisation in Python

    View Slide

  52. Beat Signer - Department of Computer Science - [email protected] 52
    March 16, 2023
    Further Reading
    ▪ This lecture is mainly based on the
    book Visualization Analysis & Design
    ▪ chapter 5
    - Marks and Channels
    ▪ chapter 10
    - Map Color and Other Channels

    View Slide

  53. Beat Signer - Department of Computer Science - [email protected] 53
    March 16, 2023
    References
    ▪ Visualization Analysis & Design, Tamara
    Munzner, Taylor & Francis Inc, (Har/Psc edition),
    May, November 2014,
    ISBN-13: 978-1466508910
    ▪ Semiology of Graphics: Diagrams, Networks,
    Maps, Jacques Bertin, ESRI PR (1st edition),
    January 2010,
    ISBN-13: 978-1466508910
    ▪ Information Visualization: Perception
    for Design, Colin Ware, Morgan Kaufmann
    (3rd edition) May 2012,
    ISBN-13: 978-0123814647

    View Slide

  54. Beat Signer - Department of Computer Science - [email protected] 54
    March 16, 2023
    References …
    ▪ ColorBrewer 2.0
    ▪ https://colorbrewer2.org
    ▪ Viz Palette
    ▪ https://projects.susielu.com/viz-palette

    View Slide

  55. 2 December 2005
    Next Lecture
    Data Processing and Visualisation Frameworks

    View Slide