Les 2 - Informatie Visualisatie
-
Upload
joris-klerkx -
Category
Education
-
view
418 -
download
2
Transcript of Les 2 - Informatie Visualisatie
Informatie visualisatie: Les 2
Joris Klerkx - Erik Duval http://hci.cs.kuleuven.be [email protected]
Human-Computer InteractionDept. ComputerwetenschappenKU Leuven
1
Opdracht vorige week• Individueel:
• d3.js aanleren
• d3.js van spreadsheet als simpele case study
• kort presenteren in volgende sessie
• Spreadsheet aanvullen
• Per team:
• blog opzetten en op slack aankondigen
• Wiki pagina aanvullen
• Infovis van de week posten op blog
• (digitaal/analoog, individueel)
2
Spreadsheet
15/02/2015 - 12u3
Infovis vd week
VISUALEYESGROUP Joren Sigert Wander
The Tufters Yannick B Yannick L Yves
InfoFish Sus Vincent Maxim
Ex Machina Tom Wietse Eline
The Info Mob Glenn Carmen Birgit
Game of Simplicity Gert-Jan Sebastiaan Michael
Postgraduwhat Max Wouter Evert
INNOV8 Matteus Victor Jean-Baptise
15/02/2015 - 14u134
Leuke posts!
5
https://postgraduwhatblog.wordpress.com/2016/02/13/infovis-van-de-week-1-wouter/
Sterfgevallen in boeken - Game of Thrones
6
D3.js?
7
Guidelines & Facts
8
How many circles?
9
Humans have advanced perceptual abilitiesOur brains makes us extremely good at recognizing visual patterns
10
11
Humans have little short term memoryOur brain remembers relatively little of what we perceive.
https://www.youtube.com/watch?v=IGQmdoK_ZfY&gl=BE
http://dl.acm.org/citation.cfm?id=30067912
Visual Information Seeking Mantra
https://www.youtube.com/watch?v=og7bzN0DhpI (9:51 - 11:22 )13
http://www.bbc.com/future/bespoke/20140724-flight-risk/
Overview first, zoom & filter, details-on-demand
14
http://infovis-lvm.github.io
Overview first, zoom & filter, details-on-demand
15
Real data is ugly and needs to be cleaned
http
://hc
il2.c
s.um
d.ed
u/tr
s/20
11-3
4/20
11-3
4.pd
f
http://www.netmagazine.com/features/seven-dirty-secrets-data-visualisationhttps://code.google.com/p/google-refine/
http://vis.stanford.edu/wrangler/Pre-process your data
16
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
Always check & pre-process your data
17
Verkiezingen 14/10/12
Forget about 3D graphs (on a 2D screen..)
Occlusion Complex to interact with Doesn’t add anything to the data
18
Source: Stephen Few
What if we need to add a 3rd variable?
19
Use small coordinated graphs to add variables
20
Forget about 3D graphs (on a 2D screen)
Source: Stephen Few
Which student has more blogposts?
• Size & angle are difficult to compare• Without labels & legends, impossible to show exact quantitative
differences• Limited Short term (visual) memory
21
Source: Stephen Few
Save the pies for dessert (S. Few)
Try using either of the pies to put the slices in order by size
22
deredactie.be
demorgen.be
vtm.be
Verkiezingen 14/10/12
23
Obviously there are exceptions to the rule (1/2)
24http://themetapicture.com/the-sunny-side-of-the-pyramid/
Obviously there are exceptions to the rule (2/2)
25
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"
26
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#
Use Common Sense
What are you comparing?What story do you get from it?
27
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 data28Source: Stephen Few
vtm.be
deredactie.be
nieuwsblad.be
Verkiezingen 14/10/12
Communicate the correct story
29
Don’t use visualisations to mislead
30
Don’t use visualisations to mislead
31
Source: Stephen Few 32
Source: Stephen Few 33
34
?35
EXERCISEFind all possible ways to visualize a
small data set of two numbers { 75, 37 }
36
http://blog.visual.ly/45-ways-to-communicate-two-quantities/37
https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565
38
?39
Practicum opdracht
40
Maak eeninteractieve visualisatie van gegevens of informatiemet toegevoegde waarde
41
publiek?doel?data?
42
data?- http://www.onderwijskiezer.be/v2/hoger/hoger_studierendement.php - http://nl.soccerway.com/national/belgium/pro-league/20142015/regular-season/r25415/ - http://www.programmableweb.com/apis/directory - http://lak.linkededucation.org - http://academic.research.microsoft.com/About/Help.htm - http://labs.europeana.eu - http://quantifiedself.com/2014/10/qs-access-app-see-healthkit-data-table/ - https://dev.twitter.com/rest/public - http://opendata.antwerpen.be - https://developer.spotify.com/web-api/ - http://developer.echonest.com/docs/v4
and so on, and so on, and so on…
43
Audience vs purpose
Explore Explain
Lay person
Domain experts ? ?
? ?
44
Explore
Data insights: a visualization (Gregor Aisch)
Explain
http://deredactie.be/cm/vrtnieuws/grafiek/interactief/1.2248561
http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314 47
http
s://w
ww.
yout
ube.
com
/wat
ch?v
=ynR
rGR
r5k9
0#t=
29
48
http
s://m
umep
eg.w
ordp
ress
.com
/201
3/12
/12/
upda
te-v
isua
lisat
ion/
rang
efilte
rsiz
echa
nge/
#mai
n
49
Tegen volgende week• Individueel:
• Spreadsheet aanvullen
• Infovis van de week
• Per team:
• Blogpost - oefening 75 - 37 ( scan met visualisaties/ wat geleerd)
• Publiek - Data - Verhaal
• Data - ruwe feasibility (eg omvang/formaat/etc. )
• Visuele alternatieven (sketches)
• 10 minuten slot om te presenteren / 5 minuten feedback
50
?51