introduction to information visualization

Introduction to Information VisualizationIntroduction to Information Visualization

Robert Putnam

putnam@bu.edu

Introduction to Information Visualization - Fall 2013

OutlineOutline

Introduction to Information Visualization - Fall 2013

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

Pre-historyPre-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

ExamplesExamples

Introduction to Information Visualization - Fall 2013

Network visualization

(vizster)

ExamplesExamples

Introduction to Information Visualization - Fall 2013

Geo data

mapping

Demo

ExamplesExamples

Introduction to Information Visualization - Fall 2013

Treemap

Demo

ExamplesExamples

Introduction to Information Visualization - Fall 2013

Circle chart

Demo

ExamplesExamples

Introduction to Information Visualization - Fall 2013

Population

“Trendalyzer”

Demo

Additional ExamplesAdditional 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

Visualization componentsVisualization components

Introduction to Information Visualization - Fall 2013

Color

Size

Texture

Proximity

Annotation

Interactivity

– Selection / Filtering

– Zoom

– Animation

Info vis workflow / pipeline*Info vis workflow / pipeline*

Introduction to Information Visualization - Fall 2013

Acquire

Parse

Filter

Mine

Represent

Refine

Interact

* Adapted from Fry, Visualizing Data

Info vis workflow / pipelineInfo vis workflow / pipeline

Introduction to Information Visualization - Fall 2013

Acquire

[p. 7, Fry, Visualizing Data]

Info vis workflow / pipelineInfo vis workflow / pipeline

Introduction to Information Visualization - Fall 2013

Parse

[p. 8, Fry, Visualizing Data]

Info vis workflow / pipelineInfo vis workflow / pipeline

Introduction to Information Visualization - Fall 2013

Filter/Mine

[p. 10, Fry, Visualizing Data]

Info vis workflow / pipelineInfo vis workflow / pipeline

Introduction to Information Visualization - Fall 2013

Represent

[p. 10, Fry, Visualizing Data]

Info vis workflow / pipelineInfo vis workflow / pipeline

Introduction to Information Visualization - Fall 2013

Refine

[p. 12, Fry, Visualizing Data]

Info vis workflow / pipelineInfo vis workflow / pipeline

Introduction to Information Visualization - Fall 2013

Interact

Demo[p. 12, Fry, Visualizing Data]

Visualization softwareVisualization 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)

Hands-onHands-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

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

– 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

ResourcesResources 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?Questions?

Tutorial survey:

- http://scv.bu.edu/survey/tutorial_evaluation.html

Introduction to Information Visualization - Fall 2013