HCI

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

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

3. “Sci vis” versus “Info vis”
Introduction to Information Visualization - Fall 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 - Fall 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 - Fall 2013
 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

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

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

8. Examples
Introduction to Information Visualization - Fall 2013
 Treemap
 Demo

9. Examples
Introduction to Information Visualization - Fall 2013
 Circle chart
 Demo

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

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

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

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

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

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

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

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

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

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

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

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

22. 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

23. 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

24. Questions?
 Tutorial survey:
- http://scv.bu.edu/survey/tutorial_evaluation.html
Introduction to Information Visualization - Fall 2013