Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Beat Signer - Department of Computer Science - bsigner@vub.be 3 February 20, 2025 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.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Beat Signer - Department of Computer Science - bsigner@vub.be 5 February 20, 2025 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!

Slide 6

Slide 6 text

Beat Signer - Department of Computer Science - bsigner@vub.be 6 February 20, 2025 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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Beat Signer - Department of Computer Science - bsigner@vub.be 8 February 20, 2025 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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Beat Signer - Department of Computer Science - bsigner@vub.be 10 February 20, 2025 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 ▪ …

Slide 11

Slide 11 text

Beat Signer - Department of Computer Science - bsigner@vub.be 11 February 20, 2025 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Beat Signer - Department of Computer Science - bsigner@vub.be 14 February 20, 2025 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.

Slide 15

Slide 15 text

Beat Signer - Department of Computer Science - bsigner@vub.be 15 February 20, 2025 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

Slide 16

Slide 16 text

Beat Signer - Department of Computer Science - bsigner@vub.be 16 February 20, 2025 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

Slide 17

Slide 17 text

Beat Signer - Department of Computer Science - bsigner@vub.be 17 February 20, 2025 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]

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Beat Signer - Department of Computer Science - bsigner@vub.be 20 February 20, 2025 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.

Slide 21

Slide 21 text

Beat Signer - Department of Computer Science - bsigner@vub.be 21 February 20, 2025 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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Beat Signer - Department of Computer Science - bsigner@vub.be 23 February 20, 2025 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]

Slide 24

Slide 24 text

Beat Signer - Department of Computer Science - bsigner@vub.be 24 February 20, 2025 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]

Slide 25

Slide 25 text

Beat Signer - Department of Computer Science - bsigner@vub.be 25 February 20, 2025 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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Beat Signer - Department of Computer Science - bsigner@vub.be 28 February 20, 2025 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Beat Signer - Department of Computer Science - bsigner@vub.be 30 February 20, 2025 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 ▪ ...

Slide 31

Slide 31 text

Beat Signer - Department of Computer Science - bsigner@vub.be 31 February 20, 2025 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.

Slide 32

Slide 32 text

Beat Signer - Department of Computer Science - bsigner@vub.be 32 February 20, 2025 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.

Slide 33

Slide 33 text

Beat Signer - Department of Computer Science - bsigner@vub.be 33 February 20, 2025 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.

Slide 34

Slide 34 text

Beat Signer - Department of Computer Science - bsigner@vub.be 34 February 20, 2025 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.

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Beat Signer - Department of Computer Science - bsigner@vub.be 36 February 20, 2025 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.

Slide 37

Slide 37 text

Beat Signer - Department of Computer Science - bsigner@vub.be 37 February 20, 2025 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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Beat Signer - Department of Computer Science - bsigner@vub.be 42 February 20, 2025 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 ▪

Slide 43

Slide 43 text

2 December 2005 Next Lecture Data Representation