Presented to my KU Leuven students in the course on information visualisation

1. Informatie-visualisatie
les 2, 16 feb 2015
Erik Duval
Dept. Computerwetenschappen, KULeuven
http://erikduval.wordpress.com & @ErikDuval
1

2. http://www.slideshare.net/erik.duval
2

3. tegen volgende week
• d3.js aanleren
• d3.js van spreadsheet als simpele case study
• blog opzetten en op slack aankondigen
• infovis van de week
(digitaal/analoog, individueel, blog)
slide van vorige week
3
http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414

4. http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414
4
Nogal erg last minute?
blog: kort, feedback, opinie

5. ?
@ErikDuval
h.p://erikduval.wordpress.com
5

6. opdracht
6

7. visualiseer “32” en “74”…
7

9. ?
@ErikDuval
h.p://erikduval.wordpress.com
9

10. Guidelines
10

11. How many circles?
11

12. Humans have advanced perceptual abilities
12

13. Humans have advanced perceptual abilities
Our brains make us extremely good at recognizing visual patterns
12

14. http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13

15. http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13

16. Real data is ugly and needs to be cleaned
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13

17. Real data is ugly and needs to be cleaned
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://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13

18. 14

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

20. Which student has more blogposts?
15

21. Which student has more blogposts?
15

22. Size & angle are not pre-attentive: difficult to compare
Limited Short term (visual) memory
Which student has more blogposts?
15

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

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

25. Verkiezingen
14/10/12
16

26. deredactie.be
Verkiezingen
14/10/12
16

27. deredactie.be
Verkiezingen
14/10/12
demorgen.be
16

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

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

30. 17

31. 17

32. 17

33. 17

34. 17

35. 0"
5"
10"
15"
20"
25"
30"
blogposts" tweets" comments"on"
blogs"
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"
18

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

37. http://wtfviz.net/
WTF visualisations
Use common sense
20

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

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

40. Verkiezingen
14/10/12
Communicate the correct story
23

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

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

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

44. http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25

45. http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25

46. http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25

47. http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25

48. Source: Stephen Few
26

49. Source: Stephen Few 27

50. http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
28

51. http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
28

52. ?
@ErikDuval
h.p://erikduval.wordpress.com
29

53. opdracht
30

54. maak een
interactieve visualisatie
van gegevens of informatie
met toegevoegde waarde
31

55. publiek?
verhaal?
data?
32

56. 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…
33

57. supply or demand driven
data or story driven
34

58. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435

59. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435

60. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435

61. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131436

62. https://www.youtube.com/watch?v=ynRrGRr5k90#t=29
37

63. https://mumepeg.wordpress.com/2013/12/12/update-visualisation/rangefiltersizechange/#main
38

64. tegen volgende week
• publiek, data, verhaal
• data: ruwe feasibility voldoende voor nu
• visuele alternatieven
• 15” per groep volgende week
39

65. ?
@ErikDuval
h.p://erikduval.wordpress.com
40