step 10 visualisation - europa · 2018-12-18 · effective communication through visualization...
TRANSCRIPT
![Page 1: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/1.jpg)
Step 10 Visualisation
Carlos Moura
COIN 2018 - 16th JRC Annual Training on Composite Indicators & Scoreboards 05-07/11/2018, Ispra (IT)
![Page 2: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/2.jpg)
Effective communication through visualization
Why investing on visual information?
![Page 3: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/3.jpg)
Effective communication through visualization
A M C D F G O I S H P O F Q H O P I U O I U L F K S D K
F K F J Z F C P T H B M U G I N D I C A T O R S D H D X
B E W Z C O M P O S I T E A E T F R J L M N O J K P B R
L A D X O G F J E I L K S A P R P U E D G H M X O Q B I
How many P’s can you find in the text?
![Page 4: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/4.jpg)
Effective communication through visualization
A M C D F G O I S H P O F Q H O P I U O I U L F K S D K
F K F J Z F C P T H B M U G I N D I C A T O R S D H D X
B E W Z C O M P O S I T E A E T F R J L M N O J K P B R
L A D X O G F J E I L K S A P R P U E D G H M X O Q B I
How many P’s can you find in the text?
![Page 5: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/5.jpg)
Effective communication through visualization
Visualization uses perception to free cognition
![Page 6: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/6.jpg)
Effective communication through visualization
Visualization uses perception to free cognition
![Page 7: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/7.jpg)
Effective communication through visualization
• Gestalt psychology
• Miller’s law – The number of objects an average person can hold in working memory is about seven [Also known as the magical number Seven, plus or minus two]
• Hick’s law – Describes the time it takes for a person to make a decision as a result of the possible choices avaibale: Increasing the number of choices will increase the decision time logarithmically
![Page 8: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/8.jpg)
Gestalt psychology
Set of laws that accounts for how we perceive or intuit patterns and
conclusions from the things we see.
It allows for
• Better understanding of human perception
• Achieving better visuals
• Speeding up development by removing trial and error.
![Page 9: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/9.jpg)
Emergence – forming complex patterns from simple rules.
Visual perception and the Principles of Gestalt
Can you see the cow?
![Page 10: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/10.jpg)
Emergence – forming complex patterns from simple rules.
Visual perception and the Principles of Gestalt
![Page 11: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/11.jpg)
• Reification - The perceived experience contains more information than the sensorial stimulus.
• Multistability - Ambiguous perceptual experiences to pop back and forth between alternative interpretations.
Visual perception and the Principles of Gestalt
• Invariance - Simple objects are recognized independent of rotation, translation and scale.
![Page 12: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/12.jpg)
Pragnanz – Simplicity is the key
People will perceive and interpret
ambiguous or complex images as the
simplest and complete form(s) possible.
Because it’s the interpretation that requires the least cognitive effort
= +
not +
![Page 13: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/13.jpg)
Pragnanz – Simplicity is the key
![Page 14: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/14.jpg)
Pragnanz – Simplicity is the key
![Page 15: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/15.jpg)
Pragnanz – Simplicity is the key
![Page 16: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/16.jpg)
Pragnanz – Simplicity is the key
Excel 2003 vs Excel 2013 Data-Ink ratio =
𝑑𝑎𝑡𝑎−𝑖𝑛𝑘
𝑡𝑜𝑡𝑎𝑙 𝑖𝑛𝑘 𝑢𝑠𝑒𝑑 𝑡𝑜 𝑚𝑎𝑘𝑒 𝑡ℎ𝑒 𝑔𝑟𝑎𝑝ℎ𝑖𝑐
= 1 – proportion of a graphic that can be erased
without loss of data-information
(Tufte, Edward – The visual display of quantitative information)
Some suggestions to reduce data-ink ratio:
- No 3d charts
- No backgrounds, shadows or gradients
- Remove gridlines, decoration, borders, fillcolors
![Page 17: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/17.jpg)
Pragnanz – Simplicity is the key
What can be removed from a chart while keeping the information?
![Page 18: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/18.jpg)
Pragnanz – Simplicity is the key
An ordered chart is easier to read
![Page 19: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/19.jpg)
Gestalt principles
Figure-ground organization
The eye differentiates an object from its surroundings.
Objects are either classified as figure or ground.
Balancing figure and ground can make the perceived image more clear.
![Page 20: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/20.jpg)
Gestalt principles
Law of Proximity
Objects or shapes that are close to another appear to form groups.
ASEM report – p.14
![Page 21: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/21.jpg)
Gestalt principles
Law of Proximity
Objects or shapes that are close to another appear to form groups.
A B C D A B C D
![Page 22: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/22.jpg)
Gestalt principles
Law of Similarity
Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.
Similarity is particularly affected by color.
![Page 23: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/23.jpg)
Gestalt principles
Law of Similarity
Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.
Similarity is particularly affected by color.
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
![Page 24: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/24.jpg)
Gestalt principles
Law of Closure The minds tendency to see complete figures of forms even if a figure is incomplete, partially hidden by other objects or if part of the information is missing.
NBC logo 1956 vs 1986
![Page 25: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/25.jpg)
Gestalt principles
Law of Closure The minds tendency to see complete figures of forms even if a figure is incomplete, partially hidden by other objects or if part of the information is missing.
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
![Page 26: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/26.jpg)
Gestalt principles
Law of Simetry The minds perceives objects as being symmetrical and forming around a center point. When two symmetrical elements are unconnected the mind perceptually connectes them to form a coherent shape.
![Page 27: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/27.jpg)
Gestalt principles
Law of Simetry
Cultural and Creative Cities Monitor report, p. 81
ASEM report – p.12
![Page 28: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/28.jpg)
Gestalt principles
Law of Common fate
Visual elements moving in the same direction are perceived as being related to each other more than being related with others stationary or moving in a different direction.
Images can also relate to similarity by shape.
![Page 29: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/29.jpg)
Gestalt principles
Law of Common fate
Visual elements moving in the same direction are perceived as being related to each other more than being related with others stationary or moving in a different direction.
Images can also relate to similarity by shape.
![Page 30: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/30.jpg)
Gestalt principles
Law of Continuity
Elements tend to be grouped together if they are aligned within an object.
![Page 31: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/31.jpg)
Gestalt principles
Law of Past experience (isomorphic correspondance)
Under some circunstances, visual stimuli are categorized according to past experience
![Page 32: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/32.jpg)
Gestalt principles
Quality of Government • First published in 2010 as a working
paper • Picked up by academic research • Financed for 2013 update through
FP7 • Included in the Cohesion Report • One of the pillars of the Cultural
and Creative Cities Monitor
![Page 33: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/33.jpg)
Gestalt principles
Quality of Government • First published in 2010 as a working
paper • Picked up by academic research • Financed for 2013 update through
FP7 • Included in the Cohesion Report • One of the pillars of the Cultural
and Creative Cities Monitor
![Page 34: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/34.jpg)
Gestalt principles
Law of Uniform connectedness
Elements that are visually connected are perceived as more related than elements with no connection.
![Page 35: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/35.jpg)
Gestalt principles
Law of Common regions
Elements are perceived as part of a group if they are located within the same closed region.
![Page 36: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/36.jpg)
Preattentive attributes
Used in data visualization to
quickly focus the readers
view on the most important
point of information
![Page 37: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/37.jpg)
Preattentive attributes - examples
Cultural and Creative Cities Monitor
Rank – Country page
Preattentive attributes: Length/position and hue
Social scoreboard – Country Analysis
Preattentive attributes: Position, connectedness
![Page 38: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/38.jpg)
Preattentive attributes - examples
http://www.oecdbetterlifeindex.org/countries/france/
OECD Better Life Index
Preattentive attributes: hue
![Page 39: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/39.jpg)
Chart examples bad vs good
Highlight what’s important
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
![Page 40: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/40.jpg)
Chart examples bad vs good
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
Is it ok? Highlight what’s important
![Page 41: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/41.jpg)
Chart examples bad vs good
0
20
40
60
80
100
120
jan feb mar apr may jun jul ago sep oct nov dec
... not color blind friendly (Red-blind simulation) Highlight what’s important
![Page 42: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/42.jpg)
Chart examples bad vs good
Highlight what’s important Start from zero (and keep it simple)
Source: https://guides.library.duke.edu/datavis/topten
![Page 43: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/43.jpg)
Chart examples bad vs good
Don’t use 3d Avoid pie charts (specially in 3D)
Source: https://guides.library.duke.edu/datavis/topten
![Page 44: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/44.jpg)
Chart examples bad vs good
Avoid comparing areas (even when the charts make sense)
Source: https://guides.library.duke.edu/datavis/topten
Keep it simple (sometimes a table is better to convey information)
![Page 45: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/45.jpg)
Interactive data visualization
• Attract attention from the public
• Increase engagement
• Increase trust in the data
• The data tells the story
• Hundreds of possible stories
• The user create its own story
Source (image): http://www.pewresearch.org/fact-tank/2014/12/29/our-
favorite-pew-research-center-data-visualizations-from-2014/
![Page 46: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/46.jpg)
Interactive data visualization
Source: https://d3js.org/
![Page 47: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/47.jpg)
COIN interactive platforms
Social Scoreboard
https://composite-indicators.jrc.ec.europa.eu/social-scoreboard
Cultural and Creative Cities Monitor
https://composite-indicators.jrc.ec.europa.eu/cultural-creative-cities-monitor
ASEM Sustainable Connectivity Portal
https://composite-indicators.jrc.ec.europa.eu/asem-sustainable-connectivity
![Page 48: Step 10 Visualisation - Europa · 2018-12-18 · Effective communication through visualization •Gestalt psychology •Miller’s law – The number of objects an average person](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e878d565a8d40781800e482/html5/thumbnails/48.jpg)
Any questions? You can find me at [email protected]