multimedia les - intro tot informatie visualisatie

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]


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


http://en.wikipedia.org/wiki/Anscombe's_quartet

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.


Tell the story behind the data

Will there be enough food?

Communicate data

http

://w

ww.

foot

print

netw

ork.o

rg/e

n/ind

ex.ph

p/gfn

/pag

e/ea

rth_

over

shoo

t_da

y/


http://www.footprintnetwork.org/en/index.php/gfn/page/earth_overshoot_day/




Facilitate human interaction for exploration and understanding

World Population Growthht

tp://

ww

w.bb

c.co.

uk/n

ews/w

orld

-153

9151

5


http://www.bbc.co.uk/news/world-15391515

http://www.bbc.co.uk/news/world-15391515

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








http://visual.ly/

http://visual.ly/



http://www.infovis-wiki.net/

http://www.infovis-wiki.net/

How many circles?


Humans have advanced perceptual abilitiesOur 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




http://vis.stanford.edu/wrangler/

http://vis.stanford.edu/wrangler/

http://livepage.apple.com/


https://code.google.com/p/google-refine/








Forget about 3D graphs

OcclusionComplex to interact withDoesn’t add anything


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?


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


http://wtfviz.net/

http://wtfviz.net/

Coordinated graphs

Provides actual values

Choose correct graphwww.perceptualedge.com/articles/misc/Graph_Selection_Matrix.pdf ‎


http://www.perceptualedge.com/articles/misc/Graph_Selection_Matrix.pdf

http://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


http://www.perceptualedge.com


vtm.be

deredactie.be

nieuwsblad.be

Verkiezingen 14/10/12

Communicate the correct story


http://flowingdata.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/http://flowingdata.com/category/statistics/mistaken-data/

Don’t use visualizations to lie







Don’t use visualizations to lie




But... where to start?

How to design a visualization (application)?


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


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)


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


Sizemost commonly used (?)


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


http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html

http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html

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 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


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?


How did its complexity change over time?

http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlMonday 30 September 13

http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html


How does its length compare to privacy statementsof 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 filtering mechanisms?


Build Usable & Useful Visualisations

Step 5: How to evaluate visualisations?

How to measure if your visualization amplifies cognition?


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


Think aloud Usability lab Eye-tracking

questionnaires (SUS, TAM, ...)


Not that new

www.datavis.ca/milestones/


http://www.datavis.ca/milestones/

http://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! )


http://wearecolorblind.com/articles/quick-tips/

http://wearecolorblind.com/articles/quick-tips/

http://infosthetics.com

http://infosthetics.com



http://bestario.org/research/remap

http://bestario.org/research/remap

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...

• ...


http://www.jerryvermanen.nl/datajournalismlist/

http://www.jerryvermanen.nl/datajournalismlist/

http://wiki.okfn.org/OpenVisualisation

http://wiki.okfn.org/OpenVisualisation

http://flare.prefuse.org

http://flare.prefuse.org

http://iv.slis.indiana.edu/sw/

http://iv.slis.indiana.edu/sw/

http://abeautifulwww.com/2008/09/08/20-useful-

http://abeautifulwww.com/2008/09/08/20-useful-

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


THANK YOU FOR YOUR ATTENTION!

[email protected]

@jkofmsk

59


mailto:[email protected]

mailto:[email protected]

multimedia les - intro tot informatie visualisatie

Education

length compare

extremely

gestalt principleshttp

complexity

information

privacy statementsof

population

visualization