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 1, 9 feb 2015
Erik Duval
Dept. Computerwetenschappen, KULeuven
http://erikduval.wordpress.com ...
2
http://www.slideshare.net/erik.duval
Human-Computer Interaction
technology enhanced learning
music
research
personal health
data journalism
3
http://datavislab.org
4
Dank aan:

KatrienVerbert & Joris Klerkx
(en het Internet)
5
Wie zijn jullie?
Waarom zitten jullie hier?
6
• inzicht verwerven in

de fundamenten van informatie-visualisatie

en hoe je die kan toepassen
• inzicht verwerven in

de...
hoorcolleges…
8
• project-vak, geen examen (evt. bespreking)
• 9 studenten = 3 groepen van 3
• beoordeling: visualisatie & paper (“50-50”)...
4 stp

= 120u

= 9u/week

= 6u buiten zitting!
10
laptop/tablet/gsm-met-internet?
11
toledo
blog + wiki + slack + spreadsheet
12
13
http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414
14
15
zittingen: verplicht
16
voorbeelden?
17
18
T. Nagel, L. Pschetz, M. Stefaner, M. Halkia, and B. Müller. Mæve – An Interactive Tabletop Installation for Exploring ...
http://tillnagel.com/2011/10/interactive-exploration-of-geospatial-network-visualization/
Nagel, T., Duval, E., Vande Moer...
Figure 4: Setting of the evaluation.20
B. Vandeputte, E. Duval, and J. Klerkx. Interactive sensemaking in authorship netwo...
B. Vandeputte, E. Duval, and J. Klerkx. Interactive sensemaking in
authorship networks. Proceedings of the ACM Internation...
22
B. Vandeputte, E. Duval, and J. Klerkx. Applying design principles in authorship networks-a case study. In CHI
EA’12: P...
algorithm
<>
human
23
data mining
<>
visual analytics
24
number crunching
<>
human perception
25
self driving car
<>
gps + dashboard
26
27
http://www.popsci.com/cars/article/2013-09/google-self-driving-car
64 laser beams
1 million measures/sec
11cm resolution
n...
http://senseable.mit.edu/livesingapore/visualizations.html
29
T. Nagel, M. Maitan, E. Duval,A.Vande Moere, J. Klerkx, K. Kloeckl, and C. Ratti.Touching transport - a case study on
visu...
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
31
Information Visualisation is

the use of

interactive visual representations
to amplify cognition
[Card. et. al]
32
Overview
Visualization
Slide	
  source:	
  John	
  Stasko
Scientific
visualization
Information
visualization
33
InformationVisualisation
Concerned with data that does not have a well-defined
representation in 2D or 3D space (i.e.,“abst...
Scientific visualisation
Specifically concerned with data that has a well-defined representation in 2D or 3D space
(e.g., fro...
Also: visual analytics
http://www.visual-­‐analytics.eu/faq/	
   36
Anscombe’s quartet
http://en.wikipedia.org/wiki/Anscombe's_quartet
37
Discover patterns in the data
38
Communicate data
World Population Growth
At the dawn of agriculture, about 8000 B.C., the population of the world was appr...
Tell the story behind the data
Will there be enough food?
Communicate data
40
http://www.footprintnetwork.org/en/index.php...
Facilitate human interaction for exploration and understanding
World Population Growth
http://www.bbc.co.uk/news/world-153...
What are the stories behind the data?
42
Empower users to make informed decisions43
Further Examples
http://infosthetics.com/
http://visualizing.org
http://www.visualcomplexity.com/vc/
http://visual.ly/
htt...
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
45
D3.js
Joris Klerkx - @jkofmsk
http://d3js.org/
Data-Driven Documents
46
Intro tot...
47
http://d3js.org/
What?
Bind arbitrary data do a
Document Object Model (DOM)
Apply data-driven
transformations to the DOM
48
Advantages
Web standards
HTML, SVG, CSS
All (modern) browsers & platforms
Well-known web technologies
javascript, json, CS...
Who knows?
• HTML?
• CSS?
• http://www.w3schools.com/css/
• Javascript?
• http://www.w3schools.com/js/
• SVG?
• http://www...
Look out
51
Quite a learning curve
Tools you need
• Text Editor or IDE
• Browser(s)
• Developer Tools - embedded in Chrome
(or firebug in FF)
52
Further Reading
53
http://mbostock.github.com/d3
http://www.jeromecukier.net/blog/2012/09/04/getting-to-hello-world-with-d...
tegen volgende week
• d3.js aanleren
• d3.js van spreadsheet als simpele case study
• blog opzetten en op slack aankondige...
?
@ErikDuval	
  
h.p://erikduval.wordpress.com
55
Nächste SlideShare
Wird geladen in …5
×

InfoVis1415: slides sessie 1, 10 Feb 2015

989 Aufrufe

Veröffentlicht am

Presented to the students in our infovis course

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

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

InfoVis1415: slides sessie 1, 10 Feb 2015

  1. 1. Informatie-visualisatie les 1, 9 feb 2015 Erik Duval Dept. Computerwetenschappen, KULeuven http://erikduval.wordpress.com & @ErikDuval 1
  2. 2. 2 http://www.slideshare.net/erik.duval
  3. 3. Human-Computer Interaction technology enhanced learning music research personal health data journalism 3
  4. 4. http://datavislab.org 4
  5. 5. Dank aan:
 KatrienVerbert & Joris Klerkx (en het Internet) 5
  6. 6. Wie zijn jullie? Waarom zitten jullie hier? 6
  7. 7. • inzicht verwerven in
 de fundamenten van informatie-visualisatie
 en hoe je die kan toepassen • inzicht verwerven in
 de toepassingsgebieden
 van informatie visualisatie • concrete vaardigheden verwerven
 voor het ontwerpen, implementeren en evalueren
 van toepassingen die steunen op informatie visualisatie 7
  8. 8. hoorcolleges… 8
  9. 9. • project-vak, geen examen (evt. bespreking) • 9 studenten = 3 groepen van 3 • beoordeling: visualisatie & paper (“50-50”) • inzicht & concrete vaardigheden • ieder van jullie moet
 ontwerpen, programmeren en tekst schrijven! 9
  10. 10. 4 stp
 = 120u
 = 9u/week
 = 6u buiten zitting! 10
  11. 11. laptop/tablet/gsm-met-internet? 11
  12. 12. toledo blog + wiki + slack + spreadsheet 12
  13. 13. 13 http://ariadne.cs.kuleuven.be/wiki/index.php/InfoVis-1414
  14. 14. 14
  15. 15. 15
  16. 16. zittingen: verplicht 16
  17. 17. voorbeelden? 17
  18. 18. 18 T. Nagel, L. Pschetz, M. Stefaner, M. Halkia, and B. Müller. Mæve – An Interactive Tabletop Installation for Exploring Background Information in Exhibitions. Human-Computer Interaction. Ambient, Ubiquitous and Intelligent Interaction, Vol. 5612, LNCS, pages 483–491. 2009.
  19. 19. http://tillnagel.com/2011/10/interactive-exploration-of-geospatial-network-visualization/ Nagel, T., Duval, E., Vande Moere, A., Interactive Exploration of a Geospatial Network Visualization. CHI 2012, May 5-10, Austin, USA19
  20. 20. Figure 4: Setting of the evaluation.20 B. Vandeputte, E. Duval, and J. Klerkx. Interactive sensemaking in authorship networks. Proceedings of the ACM International Conference on Interactive Tabletops and Surfaces, ITS11, pp. 246–247, 2011.
  21. 21. B. Vandeputte, E. Duval, and J. Klerkx. Interactive sensemaking in authorship networks. Proceedings of the ACM International Conference on Interactive Tabletops and Surfaces, ITS11, pp. 246–247, 2011. 21
  22. 22. 22 B. Vandeputte, E. Duval, and J. Klerkx. Applying design principles in authorship networks-a case study. In CHI EA’12: Proceedings of the 2012 ACM annual conference extended abstracts on Human Factors in Computing Systems, pages 741–744, 2012. (https://www.youtube.com/watch?v=R5CeTEejdBA)
  23. 23. algorithm <> human 23
  24. 24. data mining <> visual analytics 24
  25. 25. number crunching <> human perception 25
  26. 26. self driving car <> gps + dashboard 26
  27. 27. 27
  28. 28. http://www.popsci.com/cars/article/2013-09/google-self-driving-car 64 laser beams 1 million measures/sec 11cm resolution navmap for static objects 28
  29. 29. http://senseable.mit.edu/livesingapore/visualizations.html 29
  30. 30. T. Nagel, M. Maitan, E. Duval,A.Vande Moere, J. Klerkx, K. Kloeckl, and C. Ratti.Touching transport - a case study on visualizing metropolitan public transit on interactive tabletops. In AVI2014: 12th ACM International Working Conference on AdvancedVisual Interfaces, pages 281–288, 2014. 
 http://www.youtube.com/watch?v=wQpTM7ASc-w 30
  31. 31. ? @ErikDuval   h.p://erikduval.wordpress.com 31
  32. 32. Information Visualisation is
 the use of
 interactive visual representations to amplify cognition [Card. et. al] 32
  33. 33. Overview Visualization Slide  source:  John  Stasko Scientific visualization Information visualization 33
  34. 34. InformationVisualisation Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e.,“abstract data”) Slide  source:  Robert  Putman 34
  35. 35. Scientific visualisation Specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner). Slide  source:  Robert  Putman 35
  36. 36. Also: visual analytics http://www.visual-­‐analytics.eu/faq/   36
  37. 37. Anscombe’s quartet http://en.wikipedia.org/wiki/Anscombe's_quartet 37
  38. 38. Discover patterns in the data 38
  39. 39. Communicate data World Population Growth At 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. 39
  40. 40. Tell the story behind the data Will there be enough food? Communicate data 40 http://www.footprintnetwork.org/en/index.php/gfn/page/earth_overshoot_day/
  41. 41. Facilitate human interaction for exploration and understanding World Population Growth http://www.bbc.co.uk/news/world-15391515 41
  42. 42. What are the stories behind the data? 42
  43. 43. Empower users to make informed decisions43
  44. 44. Further Examples http://infosthetics.com/ http://visualizing.org http://www.visualcomplexity.com/vc/ http://visual.ly/ http://flowingdata.com http://www.infovis-wiki.net 44
  45. 45. ? @ErikDuval   h.p://erikduval.wordpress.com 45
  46. 46. D3.js Joris Klerkx - @jkofmsk http://d3js.org/ Data-Driven Documents 46 Intro tot...
  47. 47. 47 http://d3js.org/
  48. 48. What? Bind arbitrary data do a Document Object Model (DOM) Apply data-driven transformations to the DOM 48
  49. 49. Advantages Web standards HTML, SVG, CSS All (modern) browsers & platforms Well-known web technologies javascript, json, CSV, ... Extensive API + examples https://github.com/mbostock/d3/wiki/API-Reference IE9, Chrome, FF, Safari, ... mobile, desktop https://github.com/mbostock/d3/wiki/Gallery 49
  50. 50. Who knows? • HTML? • CSS? • http://www.w3schools.com/css/ • Javascript? • http://www.w3schools.com/js/ • SVG? • http://www.w3schools.com/svg/50
  51. 51. Look out 51 Quite a learning curve
  52. 52. Tools you need • Text Editor or IDE • Browser(s) • Developer Tools - embedded in Chrome (or firebug in FF) 52
  53. 53. Further Reading 53 http://mbostock.github.com/d3 http://www.jeromecukier.net/blog/2012/09/04/getting-to-hello-world-with-d3/ http://christopheviau.com/d3_tutorial/ http://alignedleft.com/tutorials/d3/fundamentals/ ... If you find other resources, please share via slack!
  54. 54. 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) 54
  55. 55. ? @ErikDuval   h.p://erikduval.wordpress.com 55

×