SLIDE 1 an introduction to information graphics and data visualisation
max van kleek
INFO6005 - 12.02.2013
Tuesday, 12 February 13
SLIDE 2 biological basis of information design visual dimensions and data dimensions tasks deception and bad infographics tuesday outline
Tuesday, 12 February 13
SLIDE 3 friday outline interacting with visualisations: filtering, searching, selection multidimensional data toolkits: a D3 primer
Tuesday, 12 February 13
SLIDE 4 key objectives
Tuesday, 12 February 13
SLIDE 5 how do you choose a visual representation for data? how do you evaluate a visualisation? what are the goals of visualisation? key objectives
Tuesday, 12 February 13
SLIDE 6 aesthetics + engagement - is ‘pretty’ better? identifying distortion + deception minor objectives wielding power tools (excel / matlab / etc ) vs hacking bespoke approaches
Tuesday, 12 February 13
SLIDE 7 recommended texts
Tuesday, 12 February 13
SLIDE 8 biological basis
Tuesday, 12 February 13
SLIDE 9 framebuffer(s) display
Tuesday, 12 February 13
SLIDE 10 framebuffer(s) display
typical computer architecture
Tuesday, 12 February 13
SLIDE 11 framebuffer(s) display
Tuesday, 12 February 13
SLIDE 12 framebuffer(s) display eye / iris / fovea retina (sensing) visual cortex (pattern detection)
v3
v1 v2
v4 v5
parietal lobe + frontal cortex spatial orientation focus of attention eye control, perceptual fusion
Tuesday, 12 February 13
SLIDE 13 visual cortex (pattern detection)
v3
v1 v2
v4 v5
highly parallel visual processing routines
purpose
serial / deliberative processing “attention-focused” access to long term memory
parietal lobe + frontal cortex spatial orientation focus of attention eye control, perceptual fusion
Tuesday, 12 February 13
SLIDE 14 V1 V2 V5 V3 V4
p a r i e t a l l
e
dorsal stseam ventsal stseam
“where/how” patiways “what” patiway
frontal lobe
planning tiinking deliberatjon actjon
spatjal reasoning perceptual fvsion
language semiotjcs
Tuesday, 12 February 13
SLIDE 15 John Snow, 1854 London Cholera Outbreak
The Story of London's Most Terrifying Epidemic – and How it Changed Science, Cities and the Modern World. Tuesday, 12 February 13
SLIDE 16 John Snow, 1854 London Cholera Outbreak
“There was one significant anomaly - none of the monks in the adjacent monastery contracted cholera. Investigation showed that this was not an anomaly, but further evidence, for they drank only beer, which they brewed themselves.”
The Story of London's Most Terrifying Epidemic – and How it Changed Science, Cities and the Modern World. Tuesday, 12 February 13
SLIDE 17 Sepal length Sepal width Petal length Petal width Species 5.1 3.5 1.4 0.2
*I. setosa*
4.9 3 1.4 0.2
*I. setosa*
4.7 3.2 1.3 0.2
*I. setosa*
4.6 3.1 1.5 0.2
*I. setosa*
5 3.6 1.4 0.2
*I. setosa*
5.4 3.9 1.7 0.4
*I. setosa*
4.6 3.4 1.4 0.3
*I. setosa*
5 3.4 1.5 0.2
*I. setosa*
4.4 2.9 1.4 0.2
*I. setosa*
4.9 3.1 1.5 0.1
*I. setosa*
5.4 3.7 1.5 0.2
*I. setosa*
4.8 3.4 1.6 0.2
*I. setosa*
4.8 3 1.4 0.1
*I. setosa*
4.3 3 1.1 0.1
*I. setosa*
5.8 4 1.2 0.2
*I. setosa*
5.7 4.4 1.5 0.4
*I. setosa*
5.4 3.9 1.3 0.4
*I. setosa*
5.1 3.5 1.4 0.3
*I. setosa*
5.7 3.8 1.7 0.3
*I. setosa*
5.1 3.8 1.5 0.3
*I. setosa*
5.4 3.4 1.7 0.2
*I. setosa*
5.1 3.7 1.5 0.4
*I. setosa*
4.6 3.6 1 0.2
*I. setosa*
5.1 3.3 1.7 0.5
*I. setosa*
4.8 3.4 1.9 0.2
*I. setosa*
5 3 1.6 0.2
*I. setosa*
5 3.4 1.6 0.4
*I. setosa*
5.2 3.5 1.5 0.2
*I. setosa*
5.2 3.4 1.4 0.2
*I. setosa*
4.7 3.2 1.6 0.2
*I. setosa*
4.8 3.1 1.6 0.2
*I. setosa*
Sepal length Sepal width Petal length Petal width Species 5.4 3.4 1.5 0.4
*I. setosa*
5.2 4.1 1.5 0.1
*I. setosa*
5.5 4.2 1.4 0.2
*I. setosa*
4.9 3.1 1.5 0.2
*I. setosa*
5 3.2 1.2 0.2
*I. setosa*
5.5 3.5 1.3 0.2
*I. setosa*
4.9 3.6 1.4 0.1
*I. setosa*
4.4 3 1.3 0.2
*I. setosa*
5.1 3.4 1.5 0.2
*I. setosa*
5 3.5 1.3 0.3
*I. setosa*
4.5 2.3 1.3 0.3
*I. setosa*
4.4 3.2 1.3 0.2
*I. setosa*
5 3.5 1.6 0.6
*I. setosa*
5.1 3.8 1.9 0.4
*I. setosa*
4.8 3 1.4 0.3
*I. setosa*
5.1 3.8 1.6 0.2
*I. setosa*
4.6 3.2 1.4 0.2
*I. setosa*
5.3 3.7 1.5 0.2
*I. setosa*
5 3.3 1.4 0.2
*I. setosa*
7 3.2 4.7 1.4
*I. versicolor*
6.4 3.2 4.5 1.5
*I. versicolor*
6.9 3.1 4.9 1.5
*I. versicolor*
5.5 2.3 4 1.3
*I. versicolor*
6.5 2.8 4.6 1.5
*I. versicolor*
5.7 2.8 4.5 1.3
*I. versicolor*
6.3 3.3 4.7 1.6
*I. versicolor*
4.9 2.4 3.3 1
*I. versicolor*
6.6 2.9 4.6 1.3
*I. versicolor*
5.2 2.7 3.9 1.4
*I. versicolor*
5 2 3.5 1
*I. versicolor*
5.9 3 4.2 1.5
*I. versicolor*
Sepal length Sepal width Petal length Petal width Species 5.4 3.4 1.5 0.4
*I. setosa*
5.2 4.1 1.5 0.1
*I. setosa*
5.5 4.2 1.4 0.2
*I. setosa*
4.9 3.1 1.5 0.2
*I. setosa*
5 3.2 1.2 0.2
*I. setosa*
5.5 3.5 1.3 0.2
*I. setosa*
4.9 3.6 1.4 0.1
*I. setosa*
4.4 3 1.3 0.2
*I. setosa*
5.1 3.4 1.5 0.2
*I. setosa*
5 3.5 1.3 0.3
*I. setosa*
4.5 2.3 1.3 0.3
*I. setosa*
4.4 3.2 1.3 0.2
*I. setosa*
5 3.5 1.6 0.6
*I. setosa*
5.1 3.8 1.9 0.4
*I. setosa*
4.8 3 1.4 0.3
*I. setosa*
5.1 3.8 1.6 0.2
*I. setosa*
4.6 3.2 1.4 0.2
*I. setosa*
5.3 3.7 1.5 0.2
*I. setosa*
5 3.3 1.4 0.2
*I. setosa*
7 3.2 4.7 1.4
*I. versicolor*
6.4 3.2 4.5 1.5
*I. versicolor*
6.9 3.1 4.9 1.5
*I. versicolor*
5.5 2.3 4 1.3
*I. versicolor*
6.5 2.8 4.6 1.5
*I. versicolor*
5.7 2.8 4.5 1.3
*I. versicolor*
6.3 3.3 4.7 1.6
*I. versicolor*
4.9 2.4 3.3 1
*I. versicolor*
6.6 2.9 4.6 1.3
*I. versicolor*
5.2 2.7 3.9 1.4
*I. versicolor*
5 2 3.5 1
*I. versicolor*
5.9 3 4.2 1.5
*I. versicolor*
Tuesday, 12 February 13
SLIDE 18 Sepal length Sepal width Petal length Petal width Species 5.1 3.5 1.4 0.2
*I. setosa*
4.9 3 1.4 0.2
*I. setosa*
4.7 3.2 1.3 0.2
*I. setosa*
4.6 3.1 1.5 0.2
*I. setosa*
5 3.6 1.4 0.2
*I. setosa*
5.4 3.9 1.7 0.4
*I. setosa*
4.6 3.4 1.4 0.3
*I. setosa*
5 3.4 1.5 0.2
*I. setosa*
4.4 2.9 1.4 0.2
*I. setosa*
4.9 3.1 1.5 0.1
*I. setosa*
5.4 3.7 1.5 0.2
*I. setosa*
4.8 3.4 1.6 0.2
*I. setosa*
4.8 3 1.4 0.1
*I. setosa*
4.3 3 1.1 0.1
*I. setosa*
5.8 4 1.2 0.2
*I. setosa*
5.7 4.4 1.5 0.4
*I. setosa*
5.4 3.9 1.3 0.4
*I. setosa*
5.1 3.5 1.4 0.3
*I. setosa*
5.7 3.8 1.7 0.3
*I. setosa*
5.1 3.8 1.5 0.3
*I. setosa*
5.4 3.4 1.7 0.2
*I. setosa*
5.1 3.7 1.5 0.4
*I. setosa*
4.6 3.6 1 0.2
*I. setosa*
5.1 3.3 1.7 0.5
*I. setosa*
4.8 3.4 1.9 0.2
*I. setosa*
5 3 1.6 0.2
*I. setosa*
5 3.4 1.6 0.4
*I. setosa*
5.2 3.5 1.5 0.2
*I. setosa*
5.2 3.4 1.4 0.2
*I. setosa*
4.7 3.2 1.6 0.2
*I. setosa*
4.8 3.1 1.6 0.2
*I. setosa*
Sepal length Sepal width Petal length Petal width Species 5.4 3.4 1.5 0.4
*I. setosa*
5.2 4.1 1.5 0.1
*I. setosa*
5.5 4.2 1.4 0.2
*I. setosa*
4.9 3.1 1.5 0.2
*I. setosa*
5 3.2 1.2 0.2
*I. setosa*
5.5 3.5 1.3 0.2
*I. setosa*
4.9 3.6 1.4 0.1
*I. setosa*
4.4 3 1.3 0.2
*I. setosa*
5.1 3.4 1.5 0.2
*I. setosa*
5 3.5 1.3 0.3
*I. setosa*
4.5 2.3 1.3 0.3
*I. setosa*
4.4 3.2 1.3 0.2
*I. setosa*
5 3.5 1.6 0.6
*I. setosa*
5.1 3.8 1.9 0.4
*I. setosa*
4.8 3 1.4 0.3
*I. setosa*
5.1 3.8 1.6 0.2
*I. setosa*
4.6 3.2 1.4 0.2
*I. setosa*
5.3 3.7 1.5 0.2
*I. setosa*
5 3.3 1.4 0.2
*I. setosa*
7 3.2 4.7 1.4
*I. versicolor*
6.4 3.2 4.5 1.5
*I. versicolor*
6.9 3.1 4.9 1.5
*I. versicolor*
5.5 2.3 4 1.3
*I. versicolor*
6.5 2.8 4.6 1.5
*I. versicolor*
5.7 2.8 4.5 1.3
*I. versicolor*
6.3 3.3 4.7 1.6
*I. versicolor*
4.9 2.4 3.3 1
*I. versicolor*
6.6 2.9 4.6 1.3
*I. versicolor*
5.2 2.7 3.9 1.4
*I. versicolor*
5 2 3.5 1
*I. versicolor*
5.9 3 4.2 1.5
*I. versicolor*
Sepal length Sepal width Petal length Petal width Species 5.4 3.4 1.5 0.4
*I. setosa*
5.2 4.1 1.5 0.1
*I. setosa*
5.5 4.2 1.4 0.2
*I. setosa*
4.9 3.1 1.5 0.2
*I. setosa*
5 3.2 1.2 0.2
*I. setosa*
5.5 3.5 1.3 0.2
*I. setosa*
4.9 3.6 1.4 0.1
*I. setosa*
4.4 3 1.3 0.2
*I. setosa*
5.1 3.4 1.5 0.2
*I. setosa*
5 3.5 1.3 0.3
*I. setosa*
4.5 2.3 1.3 0.3
*I. setosa*
4.4 3.2 1.3 0.2
*I. setosa*
5 3.5 1.6 0.6
*I. setosa*
5.1 3.8 1.9 0.4
*I. setosa*
4.8 3 1.4 0.3
*I. setosa*
5.1 3.8 1.6 0.2
*I. setosa*
4.6 3.2 1.4 0.2
*I. setosa*
5.3 3.7 1.5 0.2
*I. setosa*
5 3.3 1.4 0.2
*I. setosa*
7 3.2 4.7 1.4
*I. versicolor*
6.4 3.2 4.5 1.5
*I. versicolor*
6.9 3.1 4.9 1.5
*I. versicolor*
5.5 2.3 4 1.3
*I. versicolor*
6.5 2.8 4.6 1.5
*I. versicolor*
5.7 2.8 4.5 1.3
*I. versicolor*
6.3 3.3 4.7 1.6
*I. versicolor*
4.9 2.4 3.3 1
*I. versicolor*
6.6 2.9 4.6 1.3
*I. versicolor*
5.2 2.7 3.9 1.4
*I. versicolor*
5 2 3.5 1
*I. versicolor*
5.9 3 4.2 1.5
*I. versicolor*
Tuesday, 12 February 13
SLIDE 19 Tuesday, 12 February 13
SLIDE 20 Tuesday, 12 February 13
SLIDE 21 so how do we come up with these visual representations and which do we choose for a dataset?
Tuesday, 12 February 13
SLIDE 22 Visual and Data Dimensions
Tuesday, 12 February 13
SLIDE 23 so you have a dataset...
{x1, x2, x3, x4, ... } x1
Tuesday, 12 February 13
SLIDE 24 so you have a dataset...
{x1, x2, x3, x4, ... } {1, 200, 5, 6, ... }
integral
{1.0, 2.0, 1.2, 4, ... }
fixed point
...}
, , , ,
{
categorical relational
...} , , , {f(
) g( ),q( )
,
{‘a’, ‘b’, ‘12c’, ‘d’ ...}
alpha(-numeric)
{20%, 30%, 1%, 5% ...}
fractions of a population
x1
Tuesday, 12 February 13
SLIDE 25 so you have a dataset...
{x1, x2, x3, x4, ... } {1, 200, 5, 6, ... }
integral
{1.0, 2.0, 1.2, 4, ... }
fixed point
...}
, , , ,
{
categorical relational
...} , , , {f(
) g( ),q( )
,
{‘a’, ‘b’, ‘12c’, ‘d’ ...}
alpha(-numeric)
{20%, 30%, 1%, 5% ...}
fractions of a population
x1
- bjective - help the user to understand :
relationships among the elements of the set
Tuesday, 12 February 13
SLIDE 26 it’s probably multivariate
{x1, x2, x3, x4, ... }
so you have a dataset...
x = x1 y1 t1 x2 y2 t2
[ ]
, , x3 y3 t3 ...
if these are observations of the (same] of object(s) over time “time series” if these are observations of different things at a single point in time “population” if these are observations of different things at a different points in time “observations”
x =
Tuesday, 12 February 13
SLIDE 27 it’s probably multivariate
{x1, x2, x3, x4, ... }
so you have a dataset...
x = x1 y1 t1 x2 y2 t2
[ ]
, , x3 y3 t3 ...
if these are observations of the (same] of object(s) over time “time series” if these are observations of different things at a single point in time “population” if these are observations of different things at a different points in time “observations”
x =
- bjective - help the user to understand :
- 1. elements - specifically relationships among dimensions
(through a large number of examples)
- 2. relationships - among different elements
Tuesday, 12 February 13
SLIDE 28 integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 29 position
relative location centrality
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 30 position
relative location centrality
shape integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 31 position
relative location centrality
shape colour
saturation
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 32 position
relative location centrality
shape colour
saturation
size
width height
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 33 position
relative location centrality
shape colour
saturation
size
width height
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 34 position
relative location centrality
shape colour
saturation
size
width height
stroke
colour pattern, thickness
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 35 position
relative location centrality
shape colour
saturation
size
width height
stroke
colour pattern, thickness
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 36 position
relative location centrality
shape colour
saturation
size
width height
stroke
colour pattern, thickness
texture integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 37 position
relative location centrality
shape colour
saturation
size
width height
stroke
colour pattern, thickness
texture movement integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 38 position
relative location centrality
shape colour
saturation
size
width height
stroke
colour pattern, thickness
texture movement
juxtaposition
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 39 position
relative location centrality
shape colour
saturation
size
width height
stroke
colour pattern, thickness
texture movement
juxtaposition
integral fixed point categorical relational alpha(-numeric) fractions of a population ...
visual dimension tzpe data dimension tzpes
Tuesday, 12 February 13
SLIDE 40 position
Tuesday, 12 February 13
SLIDE 41 position
linear mapping of values logarithmic.. bin and count..
Tuesday, 12 February 13
SLIDE 42 position
dimensions to work with
Tuesday, 12 February 13
SLIDE 43 position
dimensions to work with
Tuesday, 12 February 13
SLIDE 44
Tuesday, 12 February 13
SLIDE 45
range-limited
Tuesday, 12 February 13
SLIDE 46
range-limited
Tuesday, 12 February 13
SLIDE 47
range-limited
symmetry properties of the geometry
Tuesday, 12 February 13
SLIDE 48
range-limited
symmetry properties of the geometry
Tuesday, 12 February 13
SLIDE 49
range-limited
symmetry properties of the geometry
pop-out
Tuesday, 12 February 13
SLIDE 50
popouts using multiple dimensions
Tuesday, 12 February 13
SLIDE 51
popouts using multiple dimensions 1D colour
Tuesday, 12 February 13
SLIDE 52
popouts using multiple dimensions 1D orientation 1D colour
Tuesday, 12 February 13
SLIDE 53
popouts using multiple dimensions 1D orientation 1D colour 2D color/
Tuesday, 12 February 13
SLIDE 54 Using colour for continuous values
Tuesday, 12 February 13
SLIDE 55 Using colour for continuous values
Tuesday, 12 February 13
SLIDE 56 Using colour for continuous values
Tuesday, 12 February 13
SLIDE 57 Using colour for continuous values problem 1: No natural ordering
Tuesday, 12 February 13
SLIDE 58 Using colour for continuous values problem 1: No natural ordering
Tuesday, 12 February 13
SLIDE 59 Using colour for continuous values problem 1: No natural ordering
Tuesday, 12 February 13
SLIDE 60 Using colour for continuous values problem 1: No natural ordering
Tuesday, 12 February 13
SLIDE 61 Using colour for continuous values problem 1: No natural ordering
http://www.colormunki.com/game/huetest_kiosk
Tuesday, 12 February 13
SLIDE 62 Using colour for continuous values problem 1: No natural ordering
http://www.colormunki.com/game/huetest_kiosk
Tuesday, 12 February 13
SLIDE 63 Using colour for continuous values protanopia
deuteranopia tritanopia
Protanopia affects 8% of males, 0.5% females
- f Northern European ancestry
problem 2: colour sensitivity
Tuesday, 12 February 13
SLIDE 64 Tuesday, 12 February 13
SLIDE 65 Using colour for continuous values problem 3: yellow is special
Tuesday, 12 February 13
SLIDE 66 Using colour for continuous values problem 3: yellow is special
Tuesday, 12 February 13
SLIDE 67 Using colour for continuous values problem 4: Details: overemphasised or obscured
hue ‘borders’ overemphasise small changes, hue ‘middles’ blend potentially important details
Tuesday, 12 February 13
SLIDE 68 Using colour for continuous values problem 4: Details: overemphasised or obscured
hue ‘borders’ overemphasise small changes, hue ‘middles’ blend potentially important details
Tuesday, 12 February 13
SLIDE 69 Using colour for continuous values problem 4: Details: overemphasised or obscured
hue ‘borders’ overemphasise small changes, hue ‘middles’ blend potentially important details
Tuesday, 12 February 13
SLIDE 70 Using colour for continuous values problem 5: pop out can drown out
Tuesday, 12 February 13
SLIDE 71 Tuesday, 12 February 13
SLIDE 72 juxtaposition: small multiples
Tuesday, 12 February 13
SLIDE 73 Tuesday, 12 February 13
SLIDE 74 Tuesday, 12 February 13
SLIDE 75 Chernoff Faces multidimensional data
Tuesday, 12 February 13
SLIDE 76 (via http:/ /zompist.wordpress.com/) via The Guardian
distorted to make area proportional to votes
Obama-Romney 2012 victories by state
multidimensional data
Tuesday, 12 February 13
SLIDE 77 napoleon’s march to moscow
charles joseph minard
multidimensional data
Tuesday, 12 February 13
SLIDE 78 napoleon’s march to moscow
charles joseph minard
multidimensional data
how many dimensions can you find?
Tuesday, 12 February 13
SLIDE 79 napoleon’s march to moscow
charles joseph minard
multidimensional data
how many dimensions can you find?
ans: 1) size of the army 2-3) path (lat/lng) taken on a map 4) direction army was traveling 5) temperature 6) dates army reached particular locations
Tuesday, 12 February 13
SLIDE 80 E.J. Marey La méthode graphique (1885)
multidimensional data
Tuesday, 12 February 13
SLIDE 81 E.J. Marey La méthode graphique (1885)
multidimensional data
Tuesday, 12 February 13
SLIDE 82 TGV Paris-Lyon
E.J. Marey La méthode graphique (1885)
multidimensional data
Tuesday, 12 February 13
SLIDE 83 gapminder motion
motion
Tuesday, 12 February 13
SLIDE 84 aaron koblin - flight patterns
Tuesday, 12 February 13
SLIDE 85 Android Global Activations Oct’08-Jan ’11
Tuesday, 12 February 13
SLIDE 86 Standard Visualisation Techniques
Tuesday, 12 February 13
SLIDE 87 4 4 9 7 4 4 9 7 7 6
Tuesday, 12 February 13
SLIDE 88 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 89 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 90 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 91 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
- rdering significant
- rder insignificant
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 92 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
- rdering significant
- rder insignificant
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 93 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
histogram
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 0.5" 1" 1.5" 2" 2.5" 3" 3.5" 4" 4.5" 1" 2" 3" 4" 5" 6" 7" 8" 9"
- rdering significant
- rder insignificant
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 94 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
histogram
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 0.5" 1" 1.5" 2" 2.5" 3" 3.5" 4" 4.5" 1" 2" 3" 4" 5" 6" 7" 8" 9"
- rdering significant
- rder insignificant
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 95 4 4 9 7 4 4 9 7 7 6
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
histogram
box & whisker
median (middle) extrema (whiskers) Quartiles
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 0.5" 1" 1.5" 2" 2.5" 3" 3.5" 4" 4.5" 1" 2" 3" 4" 5" 6" 7" 8" 9"
sorted
- rdering significant
- rder insignificant
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 96 0" 2" 4" 6" 8" 10" 12" 14" 16" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 2" 4" 6" 8" 10" 12" 14" 16" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
stacked area stacked bar
4 3 4 4 9 5 7 5 4 4 3 9 6 7 5 7 5 6 4
0" 1" 2" 3" 4" 5" 6" 7" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
scatter
0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
(independent) line chart
Tuesday, 12 February 13
SLIDE 97 (an aside: bad stacked areas and “streamgraphs”)
Tuesday, 12 February 13
SLIDE 98 (an aside: bad stacked areas and “streamgraphs”)
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 99 (an aside: bad stacked areas and “streamgraphs”)
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
?
Tuesday, 12 February 13
SLIDE 100 (an aside: bad stacked areas and “streamgraphs”)
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
?
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 101 (an aside: bad stacked areas and “streamgraphs”) “abandon all hope ye who vieweth”
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
?
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 102 (an aside: bad stacked areas and “streamgraphs”) “abandon all hope ye who vieweth”
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
?
0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"
Tuesday, 12 February 13
SLIDE 103 multivariate relational data: hierarchical
Tuesday, 12 February 13
SLIDE 104 multivariate relational data: hierarchical tree
Tuesday, 12 February 13
SLIDE 105 multivariate relational data: hierarchical tree
hyperbolic tree
Tuesday, 12 February 13
SLIDE 106 treemap
multivariate relational data: hierarchical
Tuesday, 12 February 13
SLIDE 107 sunburst
multivariate relational data: hierarchical
Tuesday, 12 February 13
SLIDE 108 sunburst
multivariate relational data: hierarchical
Tuesday, 12 February 13
SLIDE 109 multivariate relational data: non-hierarchical venn diagram
Tuesday, 12 February 13
SLIDE 110 multivariate relational data: non-hierarchical venn diagram lattice
Tuesday, 12 February 13
SLIDE 111 multivariate relational data: non-hierarchical venn diagram lattice parallel sets
Tuesday, 12 February 13
SLIDE 112 multivariate relational data: non-hierarchical venn diagram lattice parallel sets Plenty of other interesting visualisations.... Some favourites I didn’t mention? send them to: max@hip.cat and I’ll compile a list for the class
Tuesday, 12 February 13
SLIDE 113 infographic fails:
visual + statistical sleight
audience
Tuesday, 12 February 13
SLIDE 114 Tuesday, 12 February 13
SLIDE 115
- 1. Barchart baseline fail
Tuesday, 12 February 13
SLIDE 116
- 1. Barchart baseline fail
Tuesday, 12 February 13
SLIDE 117
- 1. Barchart baseline fail
Tuesday, 12 February 13
SLIDE 118 Tuesday, 12 February 13
SLIDE 119
- 2. Perspective and measurement fail
Tuesday, 12 February 13
SLIDE 120 Tuesday, 12 February 13
SLIDE 121 Tuesday, 12 February 13
SLIDE 122 10 25 40 55 70 85 100 1960 1970 1980 1990
using area (2 dimensions) to represent one dimension
- 2. “Huge differences” fail
Tuesday, 12 February 13
SLIDE 123 using area to represent one dimension
- 2. “Huge differences” fail
Tuesday, 12 February 13
SLIDE 124 using area to represent one dimension
- 2. “Huge differences” fail
Tuesday, 12 February 13
SLIDE 125 using area to represent one dimension
- 2. “Huge differences” fail
Tuesday, 12 February 13
SLIDE 126 Quiz: How does this fail?
Tuesday, 12 February 13
SLIDE 127 Tuesday, 12 February 13
SLIDE 128 Tuesday, 12 February 13
SLIDE 129 Tuesday, 12 February 13
SLIDE 130 In conclusion
Designing effective infographics is about effectively conveying or facilitating an understanding of relationships in data
lifting” to our trained neural circuitry.
While still an art, many design principles grounded in usability can provide guidance: natural mappings, simplicity, & avoiding distortion
Tuesday, 12 February 13
