Introduction to Information Visualization Robert Putnam putnam@bu

Introduction to Information Visualization Robert Putnam [email protected] Introduction to Information Visualization - Fall 2013

Outline Introduction / Definition History Examples Workflow / Pipeline Software overview Hands-on exercises Resources Introduction to Information Visualization - Fall 2013

“Sci vis” versus “Info vis” 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). *Adapted from The ParaView Tutorial, Moreland Introduction to Information Visualization - Fall 2013

Information visualization 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

Pre-history Selected figures – William Playfair (1821) – line, bar charts, etc. – Charles Joseph Minard (1869) – Napoleon’s march, etc. – Jacques Bertin (1967) – “semiology of graphics” – 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 - Fall 2013

Examples Network visualization (vizster) Introduction to Information Visualization - Fall 2013

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

Examples Treemap Demo Introduction to Information Visualization - Fall 2013

Examples Introduction to Information Visualization - Fall 2013

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

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

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

Info vis workflow / pipeline* Acquire Parse Filter Mine Represent Refine Interact * Adapted from Fry, Visualizing Data Introduction to Information Visualization - Fall 2013

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

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

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

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

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

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

Visualization software 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 Charts – Processing / Processing.js – D3 – Java Flash (becoming rarer) Introduction to Information Visualization - Fall 2013

Hands-on 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 Introduction to Information Visualization - Fall 2013

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 – – – – – – http://processingjs.org/ http://d3js.org/, https://github.com/mbostock/d3/wiki/API-Reference http://code.google.com/apis/ajax/playground/ http://www.edwardtufte.com/tufte/ http://www.visualcomplexity.com/ http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/ Introduction to Information Visualization - Fall 2013

Resources Web sites (cont.) – http://fellinlovewithdata.com/ – http://infosthetics.com/ – http://visual.ly/ Conferences – 17th International Conference: Information Visualisation, July 15-18 2013, London – IEEE VIS 2013, October 13-18, Atlanta Groups – d3-js (Google) – Greater Boston useR Group (R Programming Language) – Local meetups (see www.meetup.com) Introduction to Information Visualization - Fall 2013

Questions? Tutorial survey: - http://scv.bu.edu/survey/tutorial evaluation.html Introduction to Information Visualization - Fall 2013