Les 2 - Informatie Visualisatie
-
Upload
joris-klerkx -
Category
Education
-
view
419 -
download
2
Transcript of Les 2 - Informatie Visualisatie
![Page 1: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/1.jpg)
Informatie visualisatie: Les 2
Joris Klerkx - Erik Duval http://hci.cs.kuleuven.be [email protected]
Human-Computer InteractionDept. ComputerwetenschappenKU Leuven
1
![Page 2: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/2.jpg)
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
![Page 3: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/3.jpg)
Spreadsheet
15/02/2015 - 12u3
![Page 4: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/4.jpg)
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
![Page 5: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/5.jpg)
Leuke posts!
5
![Page 6: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/6.jpg)
https://postgraduwhatblog.wordpress.com/2016/02/13/infovis-van-de-week-1-wouter/
Sterfgevallen in boeken - Game of Thrones
6
![Page 7: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/7.jpg)
D3.js?
7
![Page 8: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/8.jpg)
Guidelines & Facts
8
![Page 9: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/9.jpg)
How many circles?
9
![Page 10: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/10.jpg)
Humans have advanced perceptual abilitiesOur brains makes us extremely good at recognizing visual patterns
10
![Page 11: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/11.jpg)
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
![Page 12: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/12.jpg)
http://dl.acm.org/citation.cfm?id=30067912
![Page 13: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/13.jpg)
Visual Information Seeking Mantra
https://www.youtube.com/watch?v=og7bzN0DhpI (9:51 - 11:22 )13
![Page 14: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/14.jpg)
http://www.bbc.com/future/bespoke/20140724-flight-risk/
Overview first, zoom & filter, details-on-demand
14
![Page 15: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/15.jpg)
http://infovis-lvm.github.io
Overview first, zoom & filter, details-on-demand
15
![Page 16: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/16.jpg)
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
![Page 17: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/17.jpg)
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
Always check & pre-process your data
17
Verkiezingen 14/10/12
![Page 18: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/18.jpg)
Forget about 3D graphs (on a 2D screen..)
Occlusion Complex to interact with Doesn’t add anything to the data
18
![Page 19: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/19.jpg)
Source: Stephen Few
What if we need to add a 3rd variable?
19
![Page 20: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/20.jpg)
Use small coordinated graphs to add variables
20
Forget about 3D graphs (on a 2D screen)
Source: Stephen Few
![Page 21: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/21.jpg)
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
![Page 22: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/22.jpg)
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
![Page 23: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/23.jpg)
deredactie.be
demorgen.be
vtm.be
Verkiezingen 14/10/12
23
![Page 24: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/24.jpg)
Obviously there are exceptions to the rule (1/2)
24http://themetapicture.com/the-sunny-side-of-the-pyramid/
![Page 25: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/25.jpg)
Obviously there are exceptions to the rule (2/2)
25
![Page 26: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/26.jpg)
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
![Page 27: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/27.jpg)
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
![Page 28: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/28.jpg)
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
![Page 29: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/29.jpg)
vtm.be
deredactie.be
nieuwsblad.be
Verkiezingen 14/10/12
Communicate the correct story
29
![Page 30: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/30.jpg)
Don’t use visualisations to mislead
30
![Page 31: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/31.jpg)
Don’t use visualisations to mislead
31
![Page 32: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/32.jpg)
Source: Stephen Few 32
![Page 33: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/33.jpg)
Source: Stephen Few 33
![Page 34: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/34.jpg)
34
![Page 35: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/35.jpg)
?35
![Page 36: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/36.jpg)
EXERCISEFind all possible ways to visualize a
small data set of two numbers { 75, 37 }
36
![Page 37: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/37.jpg)
http://blog.visual.ly/45-ways-to-communicate-two-quantities/37
![Page 38: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/38.jpg)
https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565
38
![Page 39: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/39.jpg)
?39
![Page 40: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/40.jpg)
Practicum opdracht
40
![Page 41: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/41.jpg)
Maak eeninteractieve visualisatie van gegevens of informatiemet toegevoegde waarde
41
![Page 42: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/42.jpg)
publiek?doel?data?
42
![Page 43: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/43.jpg)
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
![Page 44: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/44.jpg)
Audience vs purpose
Explore Explain
Lay person
Domain experts ? ?
? ?
44
![Page 45: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/45.jpg)
Explore
Data insights: a visualization (Gregor Aisch)
![Page 46: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/46.jpg)
Explain
http://deredactie.be/cm/vrtnieuws/grafiek/interactief/1.2248561
![Page 47: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/47.jpg)
http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314 47
![Page 48: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/48.jpg)
http
s://w
ww.
yout
ube.
com
/wat
ch?v
=ynR
rGR
r5k9
0#t=
29
48
![Page 49: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/49.jpg)
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
![Page 50: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/50.jpg)
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
![Page 51: Les 2 - Informatie Visualisatie](https://reader034.fdocument.pub/reader034/viewer/2022052607/589de10c1a28ab77148b62ad/html5/thumbnails/51.jpg)
?51