multimedia les - intro tot informatie visualisatie
Post on 11-Sep-2014
2.997 Views
Preview:
DESCRIPTION
TRANSCRIPT
INFORMATION VISUALISATION
Joris Klerkx@jkofmsk
Multimedia27/09/2013
Monday 30 September 13
There exists a lot of dataMonday 30 September 13
http://visual.ly/open-data-movement
How do you make sense out of this data?Monday 30 September 13
Information Visualisation is the use of interactive visual representations to amplify cognition [Card. et. al]
Monday 30 September 13
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
Monday 30 September 13
Communicate data
World Population GrowthAt 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.
Monday 30 September 13
Tell the story behind the data
Will there be enough food?
Communicate data
http
://w
ww.
foot
netw
ork.o
rg/e
n/ind
ex.ph
p/gfn
/pag
e/ea
rth_
over
shoo
t_da
y/
Monday 30 September 13
Facilitate human interaction for exploration and understanding
World Population Growthht
tp://
ww
w.bb
c.co.
uk/n
ews/w
orld
-153
9151
5
Monday 30 September 13
What are the stories behind the data?Monday 30 September 13
Empower users to make informed decisionsMonday 30 September 13
Further Examples
http://infosthetics.com/
http://visualizing.org
http://www.visualcomplexity.com/vc/
http://visual.ly/
http://flowingdata.com
http://www.infovis-wiki.net
Monday 30 September 13
Monday 30 September 13
How many circles?
Monday 30 September 13
Humans have advanced perceptual abilitiesOur brains makes us extremely good at recognizing visual patterns
Monday 30 September 13
Humans have little short term memory
Our brain remembers relatively little of what we perceive
http://www.youtube.com/watch?v=OVlJv7ZkvGA
Monday 30 September 13
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
Monday 30 September 13
Forget about 3D graphs
OcclusionComplex to interact withDoesn’t add anything
Monday 30 September 13
Size & angle are not pre-attentive: difficult to compareLimited Short term (visual) memory
Save the pies for dessert (S.Few)
Which student has more blogposts?
Monday 30 September 13
deredactie.be Verkiezingen
14/10/12
demorgen.be
vtm.be
Monday 30 September 13
Monday 30 September 13
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"
Monday 30 September 13
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
Monday 30 September 13
http://wtfviz.net/
WFT visualizations
Use common sense
Monday 30 September 13
Coordinated graphs
Provides actual values
Choose correct graphwww.perceptualedge.com/articles/misc/Graph_Selection_Matrix.pdf
Monday 30 September 13
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
Monday 30 September 13
vtm.be
deredactie.be
nieuwsblad.be
Verkiezingen 14/10/12
Communicate the correct story
Monday 30 September 13
http://flowingdata.com/category/statistics/mistaken-data/
BP - leak in gulf of mexico
Don’t use visualizations to mislead
Monday 30 September 13
Don’t use visualizations to mislead (?)
Monday 30 September 13
http://www.perceptualedge.com/http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
Monday 30 September 13
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
Monday 30 September 13
But... where to start?
How to design a visualization (application)?
Monday 30 September 13
The visualization pipelineMonday 30 September 13
Step 1: Gather your dataset
“where” “when’’ “how much” “how often” (“why”)
Who are your intended users?
Formulate questions you have
Monday 30 September 13
Step 2: Gather the dataset
eg. open data, census.gov, NY Times API, etc
Define the characteristics of the dataTime? hierarchical? 1D? 2D? nD? network data?Quantitive, ordinal, categorical?
S. Stevens “On the theory of scales and measurements” (1946)
Monday 30 September 13
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 elementThink about relationships between elements
Monday 30 September 13
Sizemost commonly used (?)
Monday 30 September 13
used for identifying patterns & anomalies in big datasetsColors
Color Principles - Hue, Saturation, and Value
Use maximum +/- 5 colors (for categories,.. )Use colorbrewer2.org to select appropriate color scheme
Monday 30 September 13
http://www.xrite.com/custom_page.aspx?pageid=77&lang=en
Colorblindness
Monday 30 September 13
¡ 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
Monday 30 September 13
¡ Law of SimilarityObjects 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 FateObjects 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
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationMonday 30 September 13
¡ Law of ContinuationObjects will be grouped as a whole if they are co-linear, or follow a direction
(Chang, 2002; Lyons, 2001).
¡ Law of IsomorphismIs 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
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationMonday 30 September 13
Example...
Which visual encodings do you see?
London Tube MapMonday 30 September 13
SOME HELP
Monday 30 September 13
SOME HELP
Monday 30 September 13
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 statementsof other tools?
Monday 30 September 13
How did its complexity change over time?
http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlMonday 30 September 13
How does its length compare to privacy statementsof other tools?
http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlMonday 30 September 13
How would you
http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlMonday 30 September 13
Example: What will the weather be today?
http://www.visualisingdata.com/index.php/2012/07/partly-cloudy-weather-app/
Monday 30 September 13
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 filtering mechanisms?
Monday 30 September 13
Build Usable & Useful Visualisations
Step 5: How to evaluate visualisations?
How to measure if your visualization amplifies cognition?
Monday 30 September 13
TimeRapid PrototypingIteration 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
Monday 30 September 13
Think aloud Usability lab Eye-tracking
questionnaires (SUS, TAM, ...)
Monday 30 September 13
Not that new
www.datavis.ca/milestones/
Monday 30 September 13
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
Monday 30 September 13
POINTERS
• http://wearecolorblind.com/articles/quick-tips/
• http://infosthetics.com
• http://www.visualcomplexity.com/vc/
• http://bestario.org/research/remap
• ... (a lot more online! )
Monday 30 September 13
LIBRARIES• D3.js
• http://www.jerryvermanen.nl/datajournalismlist/
• Processing
• http://wiki.okfn.org/OpenVisualisation
• http://flare.prefuse.org/
• http://iv.slis.indiana.edu/sw/
• http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/
• Tableau software
• R
• Multitouch4J
• Manyeyes...
• ...
Monday 30 September 13
FURTHER READINGS• “Readings in Information Visualization: Using Vision to Think”,
Card, S et al
• “Now i see”, “Show Me the Numbers”, Few, S.
• “Beautiful Evidence”, Tufte, E.
• “Information Visualization. Perception for design”, Ware, C.
• Beautiful Visualization: Looking at Data through the Eyes of Experts (Theory in Practice): Julie Steele, Noah Iliinsky
Monday 30 September 13
THANK YOU FOR YOUR ATTENTION!
joris.klerkx@cs.kuleuven.be
@jkofmsk
59
Monday 30 September 13
top related