Introduction to Information VisualizationIntroduction to Information Visualization
Robert Putnam
Introduction to Information Visualization - Fall 2012
OutlineOutline
Introduction to Information Visualization - Fall 2012
Introduction / Definition
History
Examples
Workflow / Pipeline
Software overview
Hands-on exercises
Resources
““Sci vis” versus “Info vis”Sci vis” versus “Info vis”
Introduction to Information Visualization - Fall 2012
*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 visualizationInformation visualization
Introduction to Information Visualization - Fall 2012
• Information visualization: concerned with data that does not have a well-defined representation in 2D or 3D space (i.e., “abstract data”).
Pre-historyPre-history
Introduction to Information Visualization - Fall 2012
Important figures– William Playfair (1821) – lines, areas for data display
– Charles Joseph Minard (1869) – Napoleon’s march, etc.
– 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
ExamplesExamples
Introduction to Information Visualization - Fall 2012
Network visualization
(vizster)
ExamplesExamples
Introduction to Information Visualization - Fall 2012
Population
“Trendalyzer”
Demo
Additional ExamplesAdditional Examples
Introduction to Information Visualization - Fall 2012
NY Times words, words
Visual Complexity (from book by Manuel Lima)
50 examples (from June 2009, somewhat dated)
D3 Gallery
Visualization componentsVisualization components
Introduction to Information Visualization - Fall 2012
Color
Size
Texture
Proximity
Annotation
Interactivity
– Selection / Filtering
– Zoom
– Animation
Info vis workflow / pipeline*Info vis workflow / pipeline*
Introduction to Information Visualization - Fall 2012
Acquire
Parse
Filter
Mine
Represent
– Visual structure for data
– View
Refine
Interact * Adapted from Fry, Visualizing Data
Info vis workflow / pipelineInfo vis workflow / pipeline
Introduction to Information Visualization - Fall 2012
Acquire
[p. 7, Fry, Visualizing Data]
Info vis workflow / pipelineInfo vis workflow / pipeline
Introduction to Information Visualization - Fall 2012
Parse
[p. 8, Fry, Visualizing Data]
Info vis workflow / pipelineInfo vis workflow / pipeline
Introduction to Information Visualization - Fall 2012
Filter/Mine
[p. 10, Fry, Visualizing Data]
Info vis workflow / pipelineInfo vis workflow / pipeline
Introduction to Information Visualization - Fall 2012
Represent
[p. 10, Fry, Visualizing Data]
Info vis workflow / pipelineInfo vis workflow / pipeline
Introduction to Information Visualization - Fall 2012
Refine
[p. 12, Fry, Visualizing Data]
Info vis workflow / pipelineInfo vis workflow / pipeline
Introduction to Information Visualization - Fall 2012
Interact
Demo[p. 12, Fry, Visualizing Data]
Visualization softwareVisualization software
Introduction to Information Visualization - Fall 2012
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)
Hands-onHands-on
Introduction to Information Visualization - Fall 2012
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
ResourcesResources 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
Websites– http://processingjs.org/
– http://d3js.org/, https://github.com/mbostock/d3/wiki/API-Reference
– http://code.google.com/apis/ajax/playground/
– http://infosthetics.com/
– 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 2012
ResourcesResources Conferences
– VisWeek 2012, October 14-19, 2012, Seattle, WA
– 17th 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 - Fall 2012