Information Visualisation: Introduction
1 like301 views
The document outlines an information visualization course, detailing its components such as examples, history, definitions, principles, workflows, and tools. It emphasizes critical principles for effective data representation and includes hands-on project work, requiring students to apply their knowledge in developing interactive visualizations using datasets of personal or research interest. Additionally, key project milestones and goals are specified for student teams throughout the course.
Information Visualisation: Introduction
- 2. Overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 3. visual explorations of urban mobility http://senseable.mit.edu/visual-explorations-urban-mobility/touching-bus-rides.html
- 8. AcademyScope https://www.youtube.com/watch?feature=pla yer_embedded&v=m_TwZXnZrkg
- 9. Two centuries of US migration http://metrocosm.com/us-immigration-history-map.html
- 10. Overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 11. Napoleon’s army drawn by Minard (1781-1870) Source: http://www.napoleanic-literature.com, © John Schneider
- 12. Source: Information Visualization Course, Katy Börner, Indiana University • Thickness of brown line is proportional to number of soldiers (422,000 soldiers started out). • Black similarly encodes the retreat (10,000 returned). • Crossing of Berezina river. • Temperature plot at the bottom.
- 13. William Playfair … and the line/area chart based on time series
- 14. William Playfair …and the bar chart
- 15. Florence Nightingale’s diagram showing the dramatic reduction in death rates in the hospitals of Scutari following the changes she introduced.
- 16. Map of Cholera by John Snow in 1854 • link between cholera and water • cholera occurred among those near the Broad Street water pump • removing the handle of the pump ended the neighborhood epidemic Source: Information Visualization Course, Katy Börner
- 17. London Underground Map by Harry Beck in 1933 • Harry Beck’s London Underground’s way finding system is an extraordinary example of directional signage. • Note the stylized angles (90 and 45 degrees) and the regular spacing between station stops. Source: Information Visualization Course, Katy Börner
- 18. overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 19. Data visualization Slide source: John Stasko Scientific visualization Information visualization
- 20. How many circles? Slide source: Joris Klerkx
- 21. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns How many circles? Slide source: Joris Klerkx
- 23. Introduction to Information Visualization - Fall 2013 Information visualization Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”) Slide source: Robert Putman
- 24. Scientific visualization 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
- 26. overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 28. What’s wrong with this graph? Source: Stephen Few
- 29. Bar values should start at zero Source: Stephen Few
- 31. http://flowingdata.com/category/statistics/mistaken-data/ Bad examples Source: Joris Klerkx
- 32. What about 3D? Source: Stephen Few
- 33. But what if there is a 3rd variable Source: Stephen Few
- 34. How to display additional variables? Source: Stephen Few
- 35. What about pie charts? “Save the pies for dessert” (Stephen Few) Source: Stephen Few
- 36. What makes these graphics bad?
- 37. Summary of Tufte’s Principles Source: Information Visualization Course, Katy Börner, Indiana University "The success of a visualization is based on deep knowledge and care about the substance, and the quality, relevance and integrity of the content." (Tufte, 1983) • Tell the truth o Graphical integrity • Do it effectively with clarity, precision... o Design aesthetics
- 39. Design aesthetics: five principles 1. Above all else show the data. 2. Maximize the data-ink ratio, within reason. 3. Erase non-data ink, within reason. 4. Erase redundant data-ink. 5. Revise and edit.
- 40. Above all else, show the data
- 41. Above all else, show the data
- 42. Data-ink ratio “A large share of ink on a graphic should present data information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic...” (Tufte, 1983)
- 43. Data-Ink Ratio Data-ink ratio = data-ink Total ink used to print graphic = Proportion of a graphic’s ink devoted to the non-redundant display of data- information. = 1.0 – proportion of graphic that can be erased without the loss of information
- 44. Data-ink ratio
- 45. What is the data-ink ratio?
- 46. What is the data-ink ratio? < 0.05 What is the data-ink ratio?
- 47. What is the data-ink ratio of this graphic? < 0.001
- 48. Five Principles 1. Above all else show the data. 2. Maximize the data-ink ratio. o Within reason o Every bit of ink on a graphic requires a reason 3. Erase non-data ink, within reason. 4. Erase redundant data-ink. 5. Revise and edit.
- 49. Maximize the data-ink ratio, within reason A pixel is a terrible thing to waste. (Shneiderman) Slide source: Chris North, Virginia Tech
- 50. Five Principles 1. Above all else show the data. 2. Maximize the data-ink ratio, within reason. 3. Erase non-data ink, within reason. 4. Erase redundant data-ink. 5. Revise and edit.
- 51. Erase non-data ink source: Joey Cherdarchuk
- 52. Erase non-data ink source: Joey Cherdarchuk
- 53. Erase non-data ink source: Joey Cherdarchuk
- 54. Erase redundant data-ink source: Joey Cherdarchuk
- 55. Erase redundant data-ink source: Joey Cherdarchuk
- 56. Erase redundant data-ink source: Joey Cherdarchuk
- 57. Revise and edit source: Joey Cherdarchuk
- 58. Revise and edit source: Joey Cherdarchuk
- 59. Revise and edit
- 60. Revise and edit source: Joey Cherdarchuk
- 61. Revise and edit source: Joey Cherdarchuk
- 62. Revise and edit source: Joey Cherdarchuk
- 63. Revise and edit source: Joey Cherdarchuk
- 64. Revise and edit source: Joey Cherdarchuk
- 65. Revise and edit source: Joey Cherdarchuk
- 66. Revise and edit source: Joey Cherdarchuk
- 67. Revise and edit source: Joey Cherdarchuk
- 68. Revise and edit source: Joey Cherdarchuk
- 69. Revise and edit source: Joey Cherdarchuk
- 70. Revise and edit
- 71. Revise and edit
- 72. Revise and edit
- 73. Revise and edit source: Joey Cherdarchuk
- 74. “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away” – Antoine de Saint-Exupery
- 76. Pseudo-decline
- 77. Lie factor Size of effect shown in graphic Lie Factor = --------------------------- Size of effect in data Edward Tufte The Visual Display of Quantitative Information page 57 (27.5-18.0)/18=53% actual increase (5.3-0.6)/0.6=783% visual increase Lie factor=783/53=14.8
- 78. Same data, simple graphic
- 79. Lie factor • Use of area to portray 1D data can be confusing o Area has 2 dimensions • The ‘incredible’ shrinking family doctor o Lie factor of 2.8 o Plus perspective distortion o Plus incorrect horizontal spacing
- 80. Overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 81. Workflow • Acquire • Parse • Filter • Mine • Represent • Refine • Interact Adapted from Fry, Visualizing Data Available at: http://it-ebooks.info/book/143/
- 82. Workflow Acquire / Parse / Filter / Mine
- 85. Not the entire story!
- 86. Overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 90. Google chart: treemap example 06-02-19 PAGE 90 https://developers.google.com/chart/interac tive/docs/gallery/treemap
- 94. D3.js • https://d3js.org/ • demo: http://vimeo.com/29862153
- 95. D3 example treemap 06-02-19 / name of department PAGE 95 http://bl.ocks.org/mbostock/4063582
- 96. Overview 1. Examples 2. History 3. Definition 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview
- 97. Course goals know the foundations learn the principles of information visualization learn about existing techniques and tools learn about existing techniques and systems, and their effectiveness develop the knowledge to select appropriate visualization techniques for particular tasks build build your own visualizations apply theoretical foundations
- 99. Grading Team project build an interactive visualization in teams 100%
- 100. Team project: an interactive visualization • Teams of 2-3 • Limited number of restrictions • Be creative!
- 101. Team project BYOD (Bring Your Own Data) you (or your teammates) have your own data to analyze • thesis/research topic • personal interest FDOI (Find Data Of Interest) • many existing datasets o https://datavisualisationcourse.wordpress.com/data/ o http://www.cs.ubc.ca/group/infovis/resources.shtml#data -repos • can be tricky to find reasonable/interesting task
- 102. Team project • hands-on experience of building interactive visualizations • using D3.js
- 103. Inspiration • Related courses UBC: https://www.cs.ubc.ca/~tmm/courses/547-17/projects.html Berkeley: http://blogs.ischool.berkeley.edu/i247s13/ Columbia university: http://columbiadataviz.wordpress.com/student-work/ • Other examples Gap Minder World: http://www.gapminder.org/world Netflix Map http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110- netflix-map.html NYC Parking Map http://www.nytimes.com/interactive/2008/11/26/nyregion/20081128_PARK ING.html How people spend their day http://www.nytimes.com/interactive/2009/07/31/business/20080801- metrics-graphic.html
- 107. Team project milestones 1. Form teams 2. Project proposal 3. Intermediate presentation 4. Final presentation 5. Report Due 25 Feb Due 19 March Due 25 April Due 20 May Due 27 May
- 108. Project proposal 1 page description of your intended project: o motivation o which datasets you will use o current status. If available, first designs. o problems/questions Due 19 March If you want earlier feedback, send us your proposal earlier ;-)
- 109. Intermediate and final presentation • 15 mins (10 mins presentations + 5 mins questions) • What is your project about? • Most important part final presentation: demo • What have you learned when implementing the project?
- 110. Report • Motivation • Dataset • Visualization design and implementation • Reflection o How is your work related to the topics taught in the course? o If you would start over, what would you do differently? • Effort o How much effort did it take to implement the project? o how did you distribute it in your group?
- 111. Tentative schedule date Monday (16:00-18:00) date Thursday (8:30-10:30) 11 Feb. Introduction 14 feb Exercise session: D3.js (Martijn) 18 Feb. Perception and principles 21 Feb. Exercise session: D3.js (Martijn) 25 Feb. Representation 4 March No Lecture 11 March Presentation, Interaction 18 March Information dashboards 25 March Project implementation + feedback 1 April Project implementation + feedback 22 April No Lecture 25 April Intermediate presentations 29 April Project implementation + feedback 6 May No Lecture 13 May Project implementation + feedback 20 May Final team project presentations
- 112. Teaching assistant • Martijn Millecamp • Office Dept. CW 03.10 • Email: martijn.millecamp@cs.kuleuven.be
- 113. Contact Office Katrien: Dept. CW 04.49 Martijn: Dept. CW 03.10 Email katrien.verbert@cs.kuleuven.be martijn.millecamp@cs.kuleuven.be
- 114. Additional examples • http://infosthetics.com/ • http://www.visualcomplexity.com/vc/ • http://visual.ly/ • http://flowingdata.com • http://www.infovis-wiki.net
- 115. Readings • Chapter 1 – 2
- 116. The beauty of data visualization - David McCandless http://www.youtube.com/watch?v=5Zg-C8AAIGg https://www.youtube.com/watch?v=5Zg-C8AAIGg
- 117. Don’t forget Form teams by 25 Feb Send names to Martijn
- 118. Next lecture: perception and principles
- 119. References • Card, S. K., Mackinlay, J. D., & Shneiderman, B. (1999). Readings in information visualization: using vision to think. Morgan Kaufmann. • Tufte, E. R., & Graves-Morris, P. R. (1983). The visual display of quantitative information (Vol. 2, No. 9). Cheshire, CT: Graphics press.