1. Introduction to Information Visualization Robert Putnam putnam@bu.edu Introduction to Information Visualization - Spring 2013

2. Outline Introduction / Definition History Examples Workflow / Pipeline Software overview Hands-on exercises Resources

3. “Sci vis” versus “Info vis” Introduction to Information Visualization - Spring 2013 * Adapted from The ParaView Tutorial, Moreland Visualization: converting raw data to a form that is viewable and understandable to humans. Scientific visualization: specifically concerned with data that has a well-defined representation in 2D or 3D space (e.g., from simulation mesh or scanner).

4. Information visualization Introduction to Information Visualization - Spring 2013 Information visualization: concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”).

5. Pre-history Introduction to Information Visualization - Spring 2013 Important figures –William Playfair (1821) – line, bar charts, etc.1821 –Charles Joseph Minard (1869) – Napoleon’s march, etc.1869 –Jacques Bertin (1967) – theoretical basis for infographics –John Tukey (1977) – “exploratory data analysis” –Edward Tufte (1983) – statistical graphics standards/practices 1985 NSF Workshop on Scientific Visualization 1990: S.K.Card, et al. Readings in Information Visualization: Using Vision to Think

6. Introduction to Information Visualization - Spring 2013

8. Examples Network visualization (vizster)vizster

9. Examples Introduction to Information Visualization - Spring 2013 Geo data mapping Demo

10. Examples Introduction to Information Visualization - Spring 2013 Treemap Demo

11. Examples Introduction to Information Visualization - Spring 2013 Circle chart Demo

12. Examples Introduction to Information Visualization - Spring 2013 Population “Trendalyzer ” Demo

13. Additional Examples Introduction to Information Visualization - Spring 2013 NY Times words, wordswords Visual Complexity (from book by Manuel Lima) Visual Complexity 50 examples (from June 2009, somewhat dated) 50 examples D3 Gallery

14. Visualization components Introduction to Information Visualization - Spring 2013 Color Size Texture Proximity Annotation Interactivity –Selection / Filtering –Zoom –Animation

15. Info vis workflow / pipeline* Introduction to Information Visualization - Spring 2013 Acquire Parse Filter Mine Represent –Visual structure for data –View Refine Interact * Adapted from Fry, Visualizing Data

16. Info vis workflow / pipeline Introduction to Information Visualization - Spring 2013 Acquire [p. 7, Fry, Visualizing Data]

17. Info vis workflow / pipeline Introduction to Information Visualization - Spring 2013 Parse [p. 8, Fry, Visualizing Data]

18. Info vis workflow / pipeline Introduction to Information Visualization - Spring 2013 Filter/Mine [p. 10, Fry, Visualizing Data]

19. Info vis workflow / pipeline Introduction to Information Visualization - Spring 2013 Represent [p. 10, Fry, Visualizing Data]

20. Info vis workflow / pipeline Introduction to Information Visualization - Spring 2013 Refine [p. 12, Fry, Visualizing Data]

21. Info vis workflow / pipeline Introduction to Information Visualization - Spring 2013 Interact Demo [p. 12, Fry, Visualizing Data]

22. Visualization software Introduction to Information Visualization - Spring 2013 Host language (C/C++/Java/Python) plus OpenGL Stat/math package with graphics –R –MATLAB Special-purpose info viz software –Earth mapping, biological network visualization, etc. Browser-enabled graphics/info viz packages –Google ChartsGoogle Charts –Processing / Processing.jsProcessingProcessing.js –D3D3 –Java + Flash (becoming rarer)

23. Hands-on Introduction to Information Visualization - Spring 2013 HTML intro* HTML intro Google charts D3 *Enabling software: - JavaScript: “the language** of the web” - JSON: JavaScript Object Notation - SVG: Scalable Vector Graphics - CSS: Cascading Style Sheets **currently

24. Resources Books –Visual Complexity, Mapping Patterns of Information, Manuel Lima –The Visual Display of Quantitative Information, Edward Tufte –Information Visualization: Beyond the Horizon, Chaomei Chen –JavaScript: The Definitive Guide, David Flanagan –Getting Started with D3, Mike Dewar –Visualizing Data, Ben Fry –Interactive Data Visualization for the Web, Scott Murray Websites – h ttp://processingjs.org/ h ttp://processingjs.org –http://d3js.org/, https://github.com/mbostock/d3/wiki/API-Referencehttp://d3js.org/https://github.com/mbostock/d3/wiki/API-Reference –http://code.google.com/apis/ajax/playground/http://code.google.com/apis/ajax/playground/ –http://infosthetics.com/http://infosthetics.com/ –http://www.edwardtufte.com/tufte/http://www.edwardtufte.com/tufte/ –http://www.visualcomplexity.com/http://www.visualcomplexity.com/ –http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/ Introduction to Information Visualization - Spring 2013

25. Resources Conferences –17 th International Conference: Information Visualisation, July 15-18 2013, London Groups –d3-js (Google) –Greater Boston useR Group (R Programming Language) –Local meetups (see www.meetup.com) Introduction to Information Visualization - Spring 2013

26. Questions? Tutorial survey: - http://scv.bu.edu/survey/tutorial_evaluation.htmlhttp://scv.bu.edu/survey/tutorial_evaluation.html Introduction to Information Visualization - Spring 2013