Information visualization - introduction
8 likes6,667 views
This document is a slide presentation on information visualization given by Katrien Verbert. It covers examples of historical and modern information visualizations, definitions of the field, design principles from Tufte, and visualization tools and APIs. The presentation provides examples to illustrate key concepts in information visualization history, best practices for design based on Tufte's principles, and different types of visualizations and their appropriate uses. It aims to give an overview of the topic to students taking an information visualization course.
![information visualization
the use of computer-supported, interactive, visual
representations of abstract data to amplify cognition
[Card et al. 1999]
20/02/14
pag. 18](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-18-320.jpg)
![Workflow
• Acquire
[p. 7, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 85](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-85-320.jpg)
![Workflow
• Parse
[p. Introduction to Information Visualization - Fall 2013
8, Fry, Visualizing Data]
20/02/14
pag. 86](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-86-320.jpg)
![Workflow
• Filter/Mine
Introduction to Information Visualization - Fall 2013
[p. 10, Fry, Visualizing Data]
20/02/14
pag. 87](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-87-320.jpg)
![Workflow
• Represent
[p. 10, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 88](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-88-320.jpg)
![Workflow
• Refine
[p. Introduction to Information Visualization - Fall 2013
12, Fry, Visualizing Data]
20/02/14
pag. 89](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-89-320.jpg)
![Workflow
• Interact
• Demo
[p. 12, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 90](https://image.slidesharecdn.com/lecture1-introduction-20140220-1-140220095835-phpapp02/85/Information-visualization-introduction-90-320.jpg)
Information visualization - introduction
- 1. Information Visualization Katrien Verbert Department of Computer Science Faculty of Science Vrije Universiteit Brussel katrien.verbert@vub.ac.be 20/02/14 pag. 1
- 2. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 2
- 3. Where people run? hJp://flowingdata.com/2014/02/05/where-‐people-‐run/ pag. 3 20/02/14
- 4. visual explorations of urban mobility hJp://senseable.mit.edu/visual-‐explora7ons-‐urban-‐mobility/touching-‐bus-‐rides.html 20/02/14 pag. 4
- 6. Immersion hJps://immersion.media.mit.edu/demo# pag. 6 20/02/14
- 7. Last.fm music history hJp://www.frederikseiffert.de/lasthistory/ pag. 7 20/02/14
- 9. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 9
- 10. Napoleon’s army drawn by Minard (1781-1870) Source: http://www.napoleanic-literature.com, © John Schneider 20/02/14 pag. 10
- 11. • Thickness of brown line is proportional to number of soldiers (422,00 soldiers started out). • Black similarly encodes the retreat (10,000 returned). • Crossing of Berezina river. • Temperature plot at the bottom. Source: Information Visualization Course, Katy Börner, Indiana University
- 12. William Playfair … and the line/area chart based on time series 20/02/14 pag. 12
- 13. William Playfair …and the bar chart 20/02/14 pag. 13
- 14. Florence Nightingale’s diagram showing the dramatic reduction in death rates in the hospitals of Scutari following the changes she introduced Source: Nightingale (1858)
- 15. 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 20/02/14 pag. 15
- 16. 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 20/02/14 pag. 16
- 17. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 17
- 18. information visualization the use of computer-supported, interactive, visual representations of abstract data to amplify cognition [Card et al. 1999] 20/02/14 pag. 18
- 19. How many circles? Slide source: Joris Klerkx 20/02/14 pag. 19
- 20. How many circles? Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Slide source: Joris Klerkx 20/02/14 pag. 20
- 21. Overview Visualization Scientific visualization Slide source: John Stasko Information visualization 20/02/14 pag. 21
- 22. Information visualization Concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”) Introduction to Information Visualization - Fall 2013 Slide source: Robert Putman 20/02/14 pag. 22
- 23. Scientific visualization Specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner). Introduction to Information Visualization - Fall 2013 Slide source: Robert Putman 20/02/14 pag. 23
- 24. Also: visual analytics hJp://www.visual-‐analy7cs.eu/faq/ 20/02/14 pag. 24
- 26. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 26
- 28. What’s wrong with this graph? Source: Stephen Few 20/02/14 pag. 28
- 29. Bar values should start at zero Source: Stephen Few 20/02/14 pag. 29
- 30. Bad examples hJp://flowingdata.com/category/sta7s7cs/mistaken-‐data/ Source: Joris Klerkx 20/02/14 pag. 30
- 31. Bad examples hJp://flowingdata.com/category/sta7s7cs/mistaken-‐data/ Source: Joris Klerkx 20/02/14 pag. 31
- 32. What about 3D? Source: Stephen Few 20/02/14 pag. 32
- 33. But what if there is a 3rd variable Source: Stephen Few 20/02/14 pag. 33 20/0 PAG
- 34. How to display additional variables? Source: Stephen Few 20/02/14 pag. 34
- 35. What about pie charts? “Save the pies for dessert” (Stephen Few) Source: Stephen Few 20/02/14 pag. 35
- 36. What makes these graphics bad? 20/02/14 pag. 36
- 37. Summary of Tufte’s Principles "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 – Graphical integrity • Do it effectively with clarity, precision... – Design aesthetics Source: Information Visualization Course, Katy Börner, Indiana University 20/02/14 pag. 37
- 39. design aesthetics: five principles 1. 2. 3. 4. 5. Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data ink, within reason. Erase redundant data-ink. Revise and edit. 20/02/14 pag. 39
- 40. Above all else, show the data 20/02/14 pag. 40
- 41. Above all else, show the data 20/02/14 pag. 41
- 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) 20/02/14 pag. 42
- 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 datainformation. = 1.0 – proportion of graphic that can be erased without the loss of information 20/02/14 pag. 43
- 45. What is the data-ink ratio? 20/02/14 pag. 45
- 46. What is the data-ink ratio? < 0.05 20/02/14 pag. 46
- 47. What is the data-ink ratio of this graphic? < 0.001 20/02/14 pag. 47
- 48. Five Principles 1. Above all else show the data. 2. Maximize the data-ink ratio. – Within reason – 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. 20/02/14 pag. 48
- 49. Maximize the data-ink ratio, within reason (Tufte) “A pixel is a terrible thing to waste.” (Shneiderman) Slide source: Chris North, Virginia Tech 20/02/14 pag. 49
- 50. Five Principles 1. 2. 3. 4. 5. Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data ink, within reason. Erase redundant data-ink. Revise and edit. 20/02/14 pag. 50
- 51. Erase non-data ink source: Joey Cherdarchuk 20/02/14 pag. 51
- 52. Erase non-data ink source: Joey Cherdarchuk 20/02/14 pag. 52
- 53. Erase non-data ink source: Joey Cherdarchuk 20/02/14 pag. 53
- 54. Erase redundant data-ink source: Joey Cherdarchuk 20/02/14 pag. 54
- 55. Erase non-data ink source: Joey Cherdarchuk 20/02/14 pag. 55
- 56. Erase redundant data-ink source: Joey Cherdarchuk 20/02/14 pag. 56
- 57. Erase redundant data-ink source: Joey Cherdarchuk 20/02/14 pag. 57
- 59. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 59
- 60. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 60
- 61. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 61
- 62. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 62
- 63. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 63
- 64. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 64
- 65. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 65
- 66. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 66
- 67. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 67
- 68. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 68
- 69. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 69
- 70. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 70
- 71. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 71
- 72. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 72
- 74. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 74
- 75. Revise and edit source: Joey Cherdarchuk 20/02/14 pag. 75
- 76. “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away” – Antoine de Saint-Exupery 20/02/14 pag. 76
- 79. Lie factor Size of effect shown in graphic Lie Factor = --------------------------Size of effect in data Edward Tu)e The Visual Display of Quan7ta7ve Informa7on 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 20/02/14 pag. 79
- 80. Same data, simple graphic 20/02/14 pag. 80
- 81. Lie factor • Use of area to portray 1D data can be confusing – Area has 2 dimensions • The ‘incredible’ shrinking family doctor – Lie factor of 2.8 – Plus perspec7ve distor7on – Plus incorrect horizontal spacing 20/02/14 pag. 81
- 82. Lie factor • Use of area to portray 1D data can be confusing – Area has 2 dimensions • The ‘incredible’ shrinking dollar • A more accurate representation of the 1978 dollar would be about twice the size of the one in this chart 20/02/14 pag. 82
- 83. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 83
- 84. Workflow • • • • • • • Acquire Parse Filter Mine Represent Refine Interact Adapted from Fry, Visualizing Data Available at: hJp://it-‐ebooks.info/book/143/ Introduction to Information Visualization - Fall 2013 20/02/14 pag. 84
- 85. Workflow • Acquire [p. 7, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 85
- 86. Workflow • Parse [p. Introduction to Information Visualization - Fall 2013 8, Fry, Visualizing Data] 20/02/14 pag. 86
- 87. Workflow • Filter/Mine Introduction to Information Visualization - Fall 2013 [p. 10, Fry, Visualizing Data] 20/02/14 pag. 87
- 88. Workflow • Represent [p. 10, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 88
- 89. Workflow • Refine [p. Introduction to Information Visualization - Fall 2013 12, Fry, Visualizing Data] 20/02/14 pag. 89
- 90. Workflow • Interact • Demo [p. 12, Fry, Visualizing Data] Introduction to Information Visualization - Fall 2013 20/02/14 pag. 90
- 91. Not the entire story! 20/02/14 pag. 91
- 92. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 92
- 93. Visualization tools and APIs! • • • • • • • Many Eyes http://www-958.ibm.com/software/data/cognos/manyeyes/ Ggplot2 http://ggplot2.org/ Tableau public http://www.tableausoftware.com/public/ Google Charts http://code.google.com/apis/chart/interactive/docs/gallery.html Simile Widgets http://www.simile-widgets.org/ Processing.js http://processingjs.org/ D3.js http://d3js.org/ 20/02/14 pag. 93
- 94. Many Eyes http://www-958.ibm.com/software/ data/cognos/manyeyes/" / name of department 20/02/14 pag. 94
- 95. Tableau public hJp://www.tableausocware.com/public/community 20/02/14 pag. 95
- 96. Google chart: treemap example hJps://developers.google.com/chart/ interac7ve/docs/gallery/treemap 20/02/14 pag. 96 20/0 PAG
- 100. D3.js! • http://d3js.org/ • demo: http://vimeo.com/29862153 20/02/14 pag. 100
- 101. D3 example treemap hJp://bl.ocks.org/mbostock/4063582 / name of department 20/02/14 pag. 101 20/0 PAG
- 102. D3 resources • • • • • • • • • • • • http://vimeo.com/m/35005701 - nice overview and run-through video/talk http://alignedleft.com/tutorials/d3/ - thorough d3 tutorials from an academic instructor and the author of the open OReilly book, "Interactive Data Visualization for the Web" (look for free preview link for the actual book draft https://github.com/mbostock/d3/wiki/Tutorials - big list of resources from the author of D3 https://github.com/mbostock/d3/wiki/API-Reference - well-done D3 documentation http://www.d3noob.org - free ebook with lots of tips and tricks, actively update http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf - cheat sheet for D3, also see parent site for blog post https://groups.google.com/forum/?fromgroups=#!forum/d3-js - D3 Google group http://bost.ocks.org/mike/selection/ - Guide to understanding selections, key part of D3. http://benclinkinbeard.com/talks/2012/NCDevCon/ - A talk, with interactive examples and code snippets, explaining d3 http://enjalot.github.com/dot-enter/ - A live-coding set of videos to walk through a lot of the basics http://enjalot.github.com/dot-append/ - A live-coding set of videos to walk through a lot of the basics (part 2) http://tributary.io/ - A fast prototyping lounge similar to CodePen to let you test your ideas out. Used by the enjalot fellow. Source: John Stasko 20/02/14 pag. 102
- 103. D3 support • Active community online – hJps://github.com/mbostock/d3/wiki – Including Mike Bostock ocen answering ques7ons • In active development – Though the cri7cal features are unlikely to change 20/02/14 pag. 103
- 104. hJp://blog.profitbricks.com/39-‐data-‐visualiza7on-‐tools-‐for-‐big-‐data/ 20/02/14 pag. 104
- 105. overview 1. Examples 2. History 3. Defini7on 4. Principles 5. Workflow 6. Tools and APIs 7. Course overview 20/02/14 pag. 105
- 108. Teaching assistant • Sandra Trullemans http://wise.vub.ac.be/sandra-trullemans 20/02/14 pag. 108
- 109. Required text book 20/02/14 pag. 109
- 110. Course goals know the founda1ons learn the principles of informa7on visualiza7on Learn about exis1ng techniques and systems learn about exis7ng techniques and systems, and their effec7veness develop the knowledge to select appropriate visualiza7on techniques for par7cular tasks build build your own visualiza7ons apply theore7cal founda7ons 20/02/14 pag. 110
- 111. Grading Team project build an interac7ve visualiza7on in teams Research paper present research paper during WPO hours + prepare 3 ques7ons about a second paper 40% 20% Exam Oral exam Closed book 40% 20/02/14 pag. 111
- 112. Grading Team project build an interac7ve visualiza7on in teams Research paper present research paper during WPO hours + prepare 3 ques7ons about a second paper 40% 20% Exam Oral exam Closed book 40% 20/02/14 pag. 112
- 113. Team project: an interactive visualization • Teams of 3-4 • Limited number of restrictions • Be creative! 20/02/14 pag. 113
- 114. Team project • hands-on experience of building interactive visualizations • using D3 20/02/14 pag. 114
- 115. Inspiration • • Related courses KU Leuven: http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314 Berkeley: http://blogs.ischool.berkeley.edu/i247s13/ Columbia university: http://columbiadataviz.wordpress.com/student-work/ Other examples Information is beatiful: http://www.informationisbeautiful.net/2013/over-300-of-the-best-datavisualization/?utm_source=feedly Gap Minder World: http://www.gapminder.org/world Netflix Map http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110netflix-map.html NYC Parking Map http://www.nytimes.com/interactive/2008/11/26/nyregion/ 20081128_PARKING.html How people spend their day http://www.nytimes.com/interactive/2009/07/31/business/20080801metrics-graphic.html 20/02/14 pag. 115
- 116. hJp://nycusefuldata.com/ 20/02/14 pag. 116
- 117. hJp://bit.ly/1fqy8yy 20/02/14 pag. 117
- 119. Team project milestones 1. 2. 3. 4. 5. due 27 Feb. Form teams due 13 March Project proposal due 3 April Intermediate presentation Final presentation Short report 22 May due 29 May 20/02/14 pag. 119
- 120. Project proposal 1 page description of your intended project: – mo7va7on – which datasets you will use – current status. If available, first designs. – problems/ques7ons due 13 March If you want earlier feedback, send us your proposal earlier ;-) 20/02/14 pag. 120
- 121. Intermediate and final presentation • • • • 20 mins (15 mins presentations + 5 mins questions) What is your project about? Most important part final presentation: demo What have you learned when implementing the project? 20/02/14 pag. 121
- 122. Short report (max. 3 pages) Motivation Dataset Visualization design and implementation Reflection – How is your work related to the topics taught in the course? – If you would start over, what would you do differently? • Effort – How much effort did it take to implement the project? – how did you distribute it in your group? • • • • 20/02/14 pag. 122
- 123. Grading Team project build an interac7ve visualiza7on in teams Research paper present research paper during WPO hours + prepare 3 ques7ons about a second paper 40% 20% Exam Oral exam Closed book 40% 20/02/14 pag. 123
- 124. Research paper • Select papers from list available on pointcarré – Present a paper of your choice in class – Prepare 3 ques7on about a second paper • Topics: – – – – – – – – – Trees Hierarchies Focus + context Graphs Time series Interac7on Documents Social media … • Individual assignment 20/02/14 pag. 124
- 125. Research presentation • Selected papers available on PointCarré • Select paper at: http://doodle.com/3ubzmy6fid4baqgk • When all presentations are scheduled: select a second paper for questions. 20/02/14 pag. 125
- 126. Grading Team project build an interac7ve visualiza7on in teams Research paper present research paper during WPO hours + prepare 3 ques7ons about a second paper 40% 20% Exam Oral exam Closed book 40% 20/02/14 pag. 126
- 127. Oral exam • 40% of the grade • Closed book • Material: – Robert Spence. Informa7on visualiza7on: design for interac7on – Lecture slides – Two research papers • Paper from presenta7on • Paper you asked ques7ons about • Example questions will be posted 20/02/14 pag. 127
- 128. Tentative schedule week date Lecture 14:00-‐16:00 WPO 16:00-‐18:00 23 20 Feb. Introduc7on: defini7on, examples, toolkits, overview assignments 24 27 Feb. Percep7on and principles 25 6 March Representa7on: values and rela7ons 26 13 March Presenta7on presenta7ons 27 20 March Interac7on presenta7ons 28 27 March Case studies presenta7ons 29 3 April 32 24 April Informa7on dashboards presenta7ons 34 8 May Visual analy7cs presenta7ons 35 15 May No lecture: work on team projects 36 22 May Final team project presenta7ons Intermediate team project presenta7ons 20/02/14 pag. 128
- 129. Contact Office Katrien: 10F721 Sandra: 10G731e Email Katrien: katrien.verbert@vub.ac.be Sandra: sandra.trullemans@vub.ac.be 20/02/14 pag. 129
- 131. 5 minute paper What do YOU expect from this course? 20/02/14 pag. 131
- 132. Additional examples • • • • • • http://infosthetics.com/ http://visualizing.org http://www.visualcomplexity.com/vc/ http://visual.ly/ http://flowingdata.com http://www.infovis-wiki.net Introduction to Information Visualization - Fall 2013 20/02/14 pag. 132
- 133. Readings • Chapter 1 – 2 20/02/14 pag. 133
- 134. The beauty of data visualization - David McCandless hJp://www.youtube.com/watch?v=5Zg-‐C8AAIGg 20/02/14 pag. 134
- 135. Don’t forget Form teams by 27 February 20/02/14 pag. 135
- 136. Next lecture: perception and principles 20/02/14 pag. 136
- 137. References • Stuart K. Card, Jock D. Mackinlay, and Ben Scheiderman, Academic Press, San Diego CA, 1999, p. 7 20/02/14 pag. 137