Introduction to Information Visualization Robert Putnam Introduction to Information Visualization - Spring 2013

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

“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).

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”).

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

Introduction to Information Visualization - Spring 2013

Examples Network visualization (vizster)vizster

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

Examples Introduction to Information Visualization - Spring 2013 Treemap Demo

Examples Introduction to Information Visualization - Spring 2013 Circle chart Demo

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

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

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

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

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

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

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

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

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

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

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)

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

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 – – – – – – Introduction to Information Visualization - Spring 2013

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

Questions? Tutorial survey: - Introduction to Information Visualization - Spring 2013