Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Informatie-visualisatie
les 2, 16 feb 2015
Erik Duval
Dept. Computerwetenschappen, KULeuven
http://erikduval.wordpress.com...
http://www.slideshare.net/erik.duval
2
tegen volgende week
• d3.js aanleren
• d3.js van spreadsheet als simpele case study
• blog opzetten en op slack aankondige...
http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414
4
Nogal erg last minute?
blog: kort, feedback, opinie
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
5
opdracht
6
visualiseer “32” en “74”…
7
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
9
Guidelines
10
How many circles?
11
Humans have advanced perceptual abilities
12
Humans have advanced perceptual abilities
Our brains make us extremely good at recognizing visual patterns
12
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13
Real data is ugly and needs to be cleaned
http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73
13
Real data is ugly and needs to be cleaned
http://www.netmagazine.com/features/seven-dirty-secrets-data-visualisation
https...
14
Forget about 3D graphs
Occlusion
Complex to interact with
Doesn’t add anything
14
Which student has more blogposts?
15
Which student has more blogposts?
15
Size & angle are not pre-attentive: difficult to compare
Limited Short term (visual) memory
Which student has more blogpost...
Size & angle are not pre-attentive: difficult to compare
Limited Short term (visual) memory
Save the pies for dessert (S.Fe...
Size & angle are not pre-attentive: difficult to compare
Limited Short term (visual) memory
Save the pies for dessert (S.Fe...
Verkiezingen
14/10/12
16
deredactie.be
Verkiezingen
14/10/12
16
deredactie.be
Verkiezingen
14/10/12
demorgen.be
16
deredactie.be
Verkiezingen
14/10/12
demorgen.be
vtm.be
16
deredactie.be
Verkiezingen
14/10/12
demorgen.be
vtm.be
16
17
17
17
17
17
0"
5"
10"
15"
20"
25"
30"
blogposts" tweets" comments"on"
blogs"
reports"
submi6ed"
Student'1'
Student"1"
Use common sense...
0" 10" 20" 30" 40" 50" 60"
Student"1"
Student"2"
Student"3"
Student"4"
blogposts"
tweets"
comments"on"blogs"
reports"submi...
http://wtfviz.net/
WTF visualisations
Use common sense
20
Coordinated graphs
Provides actual values
Choose correct graph
www.perceptualedge.com/articles/misc/Graph_Selection_Matrix...
http://www.perceptualedge.com/
Which graph makes it easier to focus on the pattern of change through time,
instead of the ...
Verkiezingen
14/10/12
Communicate the correct story
23
vtm.be
deredactie.be
nieuwsblad.be
Verkiezingen
14/10/12
Communicate the correct story
23
http://flowingdata.com/category/statistics/mistaken-data/
BP - leak in gulf of mexico
Don’t use visualizations to mislead
24
http://flowingdata.com/category/statistics/mistaken-data/
BP - leak in gulf of mexico
Don’t use visualizations to mislead
24
http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25
http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25
http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25
http://www.perceptualedge.com/
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
25
Source: Stephen Few
26
Source: Stephen Few 27
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
28
http://flowingdata.com/category/statistics/mistaken-data/
Don’t use visualizations to lie
28
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
29
opdracht
30
maak een

interactieve visualisatie

van gegevens of informatie

met toegevoegde waarde
31
publiek?
verhaal?
data?
32
data?
- http://www.onderwijskiezer.be/v2/hoger/hoger_studierendement.php
- http://nl.soccerway.com/national/belgium/pro-le...
supply or demand driven
data or story driven
34
http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435
http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435
http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435
http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131436
https://www.youtube.com/watch?v=ynRrGRr5k90#t=29
37
https://mumepeg.wordpress.com/2013/12/12/update-visualisation/rangefiltersizechange/#main
38
tegen volgende week
• publiek, data, verhaal
• data: ruwe feasibility voldoende voor nu
• visuele alternatieven
• 15” per ...
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
40
InfoVis1415: slides sessie 2, 16 Feb 2015
Nächste SlideShare
Wird geladen in …5
×

InfoVis1415: slides sessie 2, 16 Feb 2015

991 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Login to see the comments

  • Gehören Sie zu den Ersten, denen das gefällt!

InfoVis1415: slides sessie 2, 16 Feb 2015

  1. 1. Informatie-visualisatie les 2, 16 feb 2015 Erik Duval Dept. Computerwetenschappen, KULeuven http://erikduval.wordpress.com & @ErikDuval 1
  2. 2. http://www.slideshare.net/erik.duval 2
  3. 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. 4. http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414 4 Nogal erg last minute? blog: kort, feedback, opinie
  5. 5. ? @ErikDuval   h.p://erikduval.wordpress.com 5
  6. 6. opdracht 6
  7. 7. visualiseer “32” en “74”… 7
  8. 8. ? @ErikDuval   h.p://erikduval.wordpress.com 9
  9. 9. Guidelines 10
  10. 10. How many circles? 11
  11. 11. Humans have advanced perceptual abilities 12
  12. 12. Humans have advanced perceptual abilities Our brains make us extremely good at recognizing visual patterns 12
  13. 13. http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73 13
  14. 14. http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73 13
  15. 15. Real data is ugly and needs to be cleaned http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73 13
  16. 16. 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
  17. 17. 14
  18. 18. Forget about 3D graphs Occlusion Complex to interact with Doesn’t add anything 14
  19. 19. Which student has more blogposts? 15
  20. 20. Which student has more blogposts? 15
  21. 21. Size & angle are not pre-attentive: difficult to compare Limited Short term (visual) memory Which student has more blogposts? 15
  22. 22. 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
  23. 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. 24. Verkiezingen 14/10/12 16
  25. 25. deredactie.be Verkiezingen 14/10/12 16
  26. 26. deredactie.be Verkiezingen 14/10/12 demorgen.be 16
  27. 27. deredactie.be Verkiezingen 14/10/12 demorgen.be vtm.be 16
  28. 28. deredactie.be Verkiezingen 14/10/12 demorgen.be vtm.be 16
  29. 29. 17
  30. 30. 17
  31. 31. 17
  32. 32. 17
  33. 33. 17
  34. 34. 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
  35. 35. 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
  36. 36. http://wtfviz.net/ WTF visualisations Use common sense 20
  37. 37. Coordinated graphs Provides actual values Choose correct graph www.perceptualedge.com/articles/misc/Graph_Selection_Matrix.pdf21
  38. 38. 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
  39. 39. Verkiezingen 14/10/12 Communicate the correct story 23
  40. 40. vtm.be deredactie.be nieuwsblad.be Verkiezingen 14/10/12 Communicate the correct story 23
  41. 41. http://flowingdata.com/category/statistics/mistaken-data/ BP - leak in gulf of mexico Don’t use visualizations to mislead 24
  42. 42. http://flowingdata.com/category/statistics/mistaken-data/ BP - leak in gulf of mexico Don’t use visualizations to mislead 24
  43. 43. http://www.perceptualedge.com/ http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie 25
  44. 44. http://www.perceptualedge.com/ http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie 25
  45. 45. http://www.perceptualedge.com/ http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie 25
  46. 46. http://www.perceptualedge.com/ http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie 25
  47. 47. Source: Stephen Few 26
  48. 48. Source: Stephen Few 27
  49. 49. http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie 28
  50. 50. http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie 28
  51. 51. ? @ErikDuval   h.p://erikduval.wordpress.com 29
  52. 52. opdracht 30
  53. 53. maak een
 interactieve visualisatie
 van gegevens of informatie
 met toegevoegde waarde 31
  54. 54. publiek? verhaal? data? 32
  55. 55. 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
  56. 56. supply or demand driven data or story driven 34
  57. 57. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435
  58. 58. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435
  59. 59. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131435
  60. 60. http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course131436
  61. 61. https://www.youtube.com/watch?v=ynRrGRr5k90#t=29 37
  62. 62. https://mumepeg.wordpress.com/2013/12/12/update-visualisation/rangefiltersizechange/#main 38
  63. 63. tegen volgende week • publiek, data, verhaal • data: ruwe feasibility voldoende voor nu • visuele alternatieven • 15” per groep volgende week 39
  64. 64. ? @ErikDuval   h.p://erikduval.wordpress.com 40

×