Multimedia les - intro tot informatie visualisatie

INFORMATION
VISUALISATION
Joris Klerkx
@jkofmsk
Multimedia
27/09/2013
Monday 30 September 13

There exists a lot of data

http://visual.ly/open-data-movement
How do you make sense out of this data?

Information Visualisation is the use of interactive
visual representations to amplify cognition [Card. et. al]

Anscombe’s quartet
uX = 9.0
uY = 7.5
sigma X = 3.317
sigma Y = 2.03
Y = 3 + 0.5X
Discover patterns in the data
http://en.wikipedia.org/wiki/Anscombe's_quartet

Communicate data
World Population Growth
At the dawn of agriculture, about 8000 B.C., the population of the world was approximately 5 million. Over the 8,000-year period up to 1 A.D. it
grew to 200 million (some estimate 300 million or even 600, suggesting how imprecise population estimates of early historical periods can be),
with a growth rate of under 0.05% per year.
A tremendous change occurred with the industrial revolution: whereas it had taken all of human history until around 1800 for world population
to reach one billion, the second billion was achieved in only 130 years (1930), the third billion in less than 30 years (1959), the fourth billion in
15 years (1974), and the fifth billion in only 13 years (1987). During the 20th century alone, the population in the world has grown from
1.65 billion to 6 billion.

Tell the story behind the data
Will there be enough food?
Communicate data
http://www.footprintnetwork.org/en/index.php/gfn/page/earth_overshoot_day/

Facilitate human interaction for exploration and
understanding
World Population Growth
http://www.bbc.co.uk/news/world-15391515

What are the stories behind the data?

Empower users to make informed decisions

Further Examples
http://infosthetics.com/
http://visualizing.org
http://www.visualcomplexity.com/vc/
http://visual.ly/
http://ﬂowingdata.com
http://www.infovis-wiki.net

How many circles?

Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns

Humans have little short term memory
Our brain remembers relatively little of what we perceive
http://www.youtube.com/watch?v=OVlJv7ZkvGA

Real data is ugly and needs to be cleaned
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
http://www.netmagazine.com/features/seven-dirty-secrets-data-visualisation
https://code.google.com/p/google-refine/
http://vis.stanford.edu/wrangler/
Pre-process your data

Forget about 3D graphs
Occlusion
Complex to interact with
Doesn’t add anything

Size & angle are not pre-attentive: difﬁcult to compare
Limited Short term (visual) memory
Save the pies for dessert (S.Few)
Which student has more blogposts?

deredactie.be
Verkiezingen
14/10/12
demorgen.be
vtm.be

0"
5"
10"
15"
20"
25"
30"
blogposts" tweets" comments"on"
blogs"
reports"
submi6ed"
Student'1'
Student"1"
0"
5"
10"
15"
20"
25"
30"
blogposts" comments"on"
blogs"
tweets" reports"
submi6ed"
Student'1'
Student"1"
Use common sense
0" 5" 10" 15" 20" 25" 30"
blogposts"
comments"on"blogs"
tweets"
reports"submi6ed"
Student'1'
Student"1"

0" 10" 20" 30" 40" 50" 60"
Student"1"
Student"2"
Student"3"
Student"4"
blogposts"
tweets"
comments"on"blogs"
reports"submi:ed"
0%# 20%# 40%# 60%# 80%# 100%#
Student#1#
Student#2#
Student#3#
Student#4#
blogposts#
tweets#
comments#on#blogs#
reports#submi;ed#
What/how are you comparing?
What story do you get from it?
Use common sense

http://wtfviz.net/
WFT visualizations
Use common sense

Coordinated graphs
Provides actual values
Choose correct graph
www.perceptualedge.com/articles/misc/Graph_Selection_Matrix.pdf‎

http://www.perceptualedge.com/
Which graph makes it easier to focus on the pattern of change through
time, instead of the individual values?
Choose graph that answers your questions
about your data

vtm.be
deredactie.be
nieuwsblad.be
Verkiezingen
14/10/12
Communicate the correct story

http://ﬂowingdata.com/category/statistics/mistaken-data/
BP - leak in gulf of mexico
Don’t use visualizations to mislead

Don’t use visualizations to mislead (?)

http://www.perceptualedge.com/
Don’t use visualizations to lie

Don’t use visualizations to lie

But... where to start?
How to design a visualization (application)?

The visualization pipeline

Step 1: Gather your dataset
“where” “when’’ “how much” “how often” (“why”)
Who are your intended users?
Formulate questions you have

Step 2: Gather the dataset
eg. open data, census.gov, NY Times API, etc
Deﬁne the characteristics of the data
Time? hierarchical? 1D? 2D? nD? network data?
Quantitive, ordinal, categorical?
S. Stevens “On the theory of scales and measurements” (1946)

Encode data characteristics into visual form
Step 3: Apply a visual mapping
Simplicity is the ultimate sophistication.
Leonardo da Vinci
Each mark (point, line, are, ...) represents a data element
Think about relationships between elements

Size
most commonly used (?)

used for identifying patterns & anomalies in big datasets
Colors
Color Principles - Hue, Saturation, andValue
Use maximum +/- 5 colors (for categories,.. )
Use colorbrewer2.org to select appropriate color scheme

http://www.xrite.com/custom_page.aspx?pageid=77&lang=en
Colorblindness

¡ Law
of

Proximity
The closer objects are to each other,
the more likely they are to be
perceived as a group (Ehrenstein,
2004)
¡ Law
of
Symmetry
Objects must be balanced or symmetrical
to be seen as complete or whole (Chang,
2002).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
Eg. Students interest

¡ Law
of

Similarity
Objects that are similar, with like
components or attributes are more
likely to be organised together
(Schamber, 1986).
Objects are viewed in vertical rows because
of their similar attributes.
¡ Law
of
Common
Fate
Objects with a common movement, that move
in the same direction, at the same pace , at the
same time are organised as a group
(Ehrenstein, 2004).
Gestalt Principles

¡ Law
of

Continuation
Objects will be grouped as a whole if
they are co-linear, or follow a direction
(Chang, 2002; Lyons, 2001).
¡ Law
of
Isomorphism
Is similarity that can be behavioural or
perceptual, and can be a response based
on the viewers previous experiences
(Luchins & Luchins, 1999; Chang, 2002).
This law is the basis for symbolism
(Schamber, 1986).
There are more!
Gestalt Principles

Example...
Which visual encodings do you see?
LondonTube Map

SOME HELP

Offer precise controls for sharing on the Internet...
Users should navigate through 50 settings with more than 170 options
Example
Facebook privacy statement
Questions?
How did its complexity change over time?
How does its length compare to privacy statements
of other tools?

How did its complexity change over time?
http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html

How does its length compare to privacy statements
of other tools?

How would you

Example:
What will the weather be today?
http://www.visualisingdata.com/index.php/2012/07/partly-cloudy-weather-app/

Step 3: Apply a visual mapping to your dataset
e.g. sketch on paper
Step 4: Think about interaction of visualisation app
e.g. what kind of ﬁltering mechanisms?

Build Usable & Useful Visualisations
Step 5: How to evaluate visualisations?
How to measure if your visualization ampliﬁes
cognition?

TimeRapid Prototyping
Iteration 1
...
Iteration 2 Iteration 3 Iteration N
• Design focus on usefulness & usability
• Evaluate ideas in short iteration cycles
• with real users
• Evaluate in real-life settings
• with real users
52

Think aloud Usability lab Eye-tracking
questionnaires (SUS,TAM, ...)

Not that new
www.datavis.ca/milestones/

Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns
Humans have little short term memory
Our brains remember relatively little of what we perceive
Make Use of Gestalt principles
Make it interactive, provide visual help

POINTERS
• http://wearecolorblind.com/articles/quick-tips/
• http://infosthetics.com
• http://www.visualcomplexity.com/vc/
• http://bestario.org/research/remap
• ... (a lot more online! )

LIBRARIES
• D3.js
• http://www.jerryvermanen.nl/datajournalismlist/
• Processing
• http://wiki.okfn.org/OpenVisualisation
• http://ﬂare.prefuse.org/
• http://iv.slis.indiana.edu/sw/
• http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/
• Tableau software
• R
• Multitouch4J
• Manyeyes...
• ...

FURTHER READINGS
• “Readings in InformationVisualization: UsingVision toThink”,
Card, S et al
• “Now i see”,“Show Me the Numbers”, Few, S.
• “Beautiful Evidence”,Tufte, E.
• “InformationVisualization. Perception for design”,Ware, C.
• BeautifulVisualization: Looking at Data through the Eyes of
Experts (Theory in Practice): Julie Steele, Noah Iliinsky

THANKYOU FORYOUR
ATTENTION!
joris.klerkx@cs.kuleuven.be
@jkofmsk
59

Multimedia les - intro tot informatie visualisatie

More Related Content

Viewers also liked

Similar to Multimedia les - intro tot informatie visualisatie

More from Joris Klerkx

Recently uploaded

Multimedia les - intro tot informatie visualisatie