Introduction to Information Visualization

Robert Putnam
putnam@bu.edu

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

[p. 10, Fry, Visualizing Data]

Introduction to Information Visualization - Fall 2013
 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 [p. 12, Fry, Visualizing Data]

Introduction to Information Visualization - Fall 2013

 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