Multimedia les - intro tot informatie visualisatie

3,503 views

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,503
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Multimedia les - intro tot informatie visualisatie

  1. 1. INFORMATION VISUALISATION Joris Klerkx @jkofmsk Multimedia 27/09/2013 Monday 30 September 13
  2. 2. There exists a lot of data Monday 30 September 13
  3. 3. http://visual.ly/open-data-movement How do you make sense out of this data? Monday 30 September 13
  4. 4. Information Visualisation is the use of interactive visual representations to amplify cognition [Card. et. al] Monday 30 September 13
  5. 5. Anscombe’s quartet uX = 9.0 uY = 7.5 sigma X = 3.317 sigma Y = 2.03 Y = 3 + 0.5X Discover patterns in the data http://en.wikipedia.org/wiki/Anscombe's_quartet Monday 30 September 13
  6. 6. 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. Monday 30 September 13
  7. 7. Tell the story behind the data Will there be enough food? Communicate data http://www.footprintnetwork.org/en/index.php/gfn/page/earth_overshoot_day/ Monday 30 September 13
  8. 8. Facilitate human interaction for exploration and understanding World Population Growth http://www.bbc.co.uk/news/world-15391515 Monday 30 September 13
  9. 9. What are the stories behind the data? Monday 30 September 13
  10. 10. Empower users to make informed decisions Monday 30 September 13
  11. 11. Further Examples http://infosthetics.com/ http://visualizing.org http://www.visualcomplexity.com/vc/ http://visual.ly/ http://flowingdata.com http://www.infovis-wiki.net Monday 30 September 13
  12. 12. Monday 30 September 13
  13. 13. How many circles? Monday 30 September 13
  14. 14. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Monday 30 September 13
  15. 15. Humans have little short term memory Our brain remembers relatively little of what we perceive http://www.youtube.com/watch?v=OVlJv7ZkvGA Monday 30 September 13
  16. 16. Real data is ugly and needs to be cleaned http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73 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 Monday 30 September 13
  17. 17. Forget about 3D graphs Occlusion Complex to interact with Doesn’t add anything Monday 30 September 13
  18. 18. 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? Monday 30 September 13
  19. 19. deredactie.be Verkiezingen 14/10/12 demorgen.be vtm.be Monday 30 September 13
  20. 20. Monday 30 September 13
  21. 21. 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" Monday 30 September 13
  22. 22. 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 Monday 30 September 13
  23. 23. http://wtfviz.net/ WFT visualizations Use common sense Monday 30 September 13
  24. 24. Coordinated graphs Provides actual values Choose correct graph www.perceptualedge.com/articles/misc/Graph_Selection_Matrix.pdf‎ Monday 30 September 13
  25. 25. 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 Monday 30 September 13
  26. 26. vtm.be deredactie.be nieuwsblad.be Verkiezingen 14/10/12 Communicate the correct story Monday 30 September 13
  27. 27. http://flowingdata.com/category/statistics/mistaken-data/ BP - leak in gulf of mexico Don’t use visualizations to mislead Monday 30 September 13
  28. 28. Don’t use visualizations to mislead (?) Monday 30 September 13
  29. 29. http://www.perceptualedge.com/ http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie Monday 30 September 13
  30. 30. http://flowingdata.com/category/statistics/mistaken-data/ Don’t use visualizations to lie Monday 30 September 13
  31. 31. But... where to start? How to design a visualization (application)? Monday 30 September 13
  32. 32. The visualization pipeline Monday 30 September 13
  33. 33. Step 1: Gather your dataset “where” “when’’ “how much” “how often” (“why”) Who are your intended users? Formulate questions you have Monday 30 September 13
  34. 34. Step 2: Gather the dataset eg. open data, census.gov, NY Times API, etc Define the characteristics of the data Time? hierarchical? 1D? 2D? nD? network data? Quantitive, ordinal, categorical? S. Stevens “On the theory of scales and measurements” (1946) Monday 30 September 13
  35. 35. Encode data characteristics into visual form Step 3: Apply a visual mapping Simplicity is the ultimate sophistication. Leonardo da Vinci Each mark (point, line, are, ...) represents a data element Think about relationships between elements Monday 30 September 13
  36. 36. Size most commonly used (?) Monday 30 September 13
  37. 37. used for identifying patterns & anomalies in big datasets Colors Color Principles - Hue, Saturation, andValue Use maximum +/- 5 colors (for categories,.. ) Use colorbrewer2.org to select appropriate color scheme Monday 30 September 13
  38. 38. http://www.xrite.com/custom_page.aspx?pageid=77&lang=en Colorblindness Monday 30 September 13
  39. 39. ¡ Law  of    Proximity The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004) ¡ Law  of  Symmetry Objects must be balanced or symmetrical to be seen as complete or whole (Chang, 2002). Gestalt Principles http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation Eg. Students interest Monday 30 September 13
  40. 40. ¡ Law  of    Similarity Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows because of their similar attributes. ¡ Law  of  Common  Fate Objects with a common movement, that move in the same direction, at the same pace , at the same time are organised as a group (Ehrenstein, 2004). Gestalt Principles http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation Monday 30 September 13
  41. 41. ¡ Law  of    Continuation Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001). ¡ Law  of  Isomorphism Is similarity that can be behavioural or perceptual, and can be a response based on the viewers previous experiences (Luchins & Luchins, 1999; Chang, 2002). This law is the basis for symbolism (Schamber, 1986). There are more! Gestalt Principles http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation Monday 30 September 13
  42. 42. Example... Which visual encodings do you see? LondonTube Map Monday 30 September 13
  43. 43. SOME HELP Monday 30 September 13
  44. 44. SOME HELP Monday 30 September 13
  45. 45. Offer precise controls for sharing on the Internet... Users should navigate through 50 settings with more than 170 options Example Facebook privacy statement Questions? How did its complexity change over time? How does its length compare to privacy statements of other tools? Monday 30 September 13
  46. 46. How did its complexity change over time? http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html Monday 30 September 13
  47. 47. How does its length compare to privacy statements of other tools? http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html Monday 30 September 13
  48. 48. How would you http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html Monday 30 September 13
  49. 49. Example: What will the weather be today? http://www.visualisingdata.com/index.php/2012/07/partly-cloudy-weather-app/ Monday 30 September 13
  50. 50. Step 3: Apply a visual mapping to your dataset e.g. sketch on paper Step 4: Think about interaction of visualisation app e.g. what kind of filtering mechanisms? Monday 30 September 13
  51. 51. Build Usable & Useful Visualisations Step 5: How to evaluate visualisations? How to measure if your visualization amplifies cognition? Monday 30 September 13
  52. 52. TimeRapid Prototyping Iteration 1 ... Iteration 2 Iteration 3 Iteration N • Design focus on usefulness & usability • Evaluate ideas in short iteration cycles • with real users • Evaluate in real-life settings • with real users 52 Monday 30 September 13
  53. 53. Think aloud Usability lab Eye-tracking questionnaires (SUS,TAM, ...) Monday 30 September 13
  54. 54. Not that new www.datavis.ca/milestones/ Monday 30 September 13
  55. 55. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Humans have little short term memory Our brains remember relatively little of what we perceive Make Use of Gestalt principles Make it interactive, provide visual help Monday 30 September 13
  56. 56. POINTERS • http://wearecolorblind.com/articles/quick-tips/ • http://infosthetics.com • http://www.visualcomplexity.com/vc/ • http://bestario.org/research/remap • ... (a lot more online! ) Monday 30 September 13
  57. 57. LIBRARIES • D3.js • http://www.jerryvermanen.nl/datajournalismlist/ • Processing • http://wiki.okfn.org/OpenVisualisation • http://flare.prefuse.org/ • http://iv.slis.indiana.edu/sw/ • http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/ • Tableau software • R • Multitouch4J • Manyeyes... • ... Monday 30 September 13
  58. 58. FURTHER READINGS • “Readings in InformationVisualization: UsingVision toThink”, Card, S et al • “Now i see”,“Show Me the Numbers”, Few, S. • “Beautiful Evidence”,Tufte, E. • “InformationVisualization. Perception for design”,Ware, C. • BeautifulVisualization: Looking at Data through the Eyes of Experts (Theory in Practice): Julie Steele, Noah Iliinsky Monday 30 September 13
  59. 59. THANKYOU FORYOUR ATTENTION! joris.klerkx@cs.kuleuven.be @jkofmsk 59 Monday 30 September 13

×