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

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

Embed Size (px)

Citation preview

Introduction to Information VisualizationIntroduction to Information Visualization

Robert Putnam

[email protected]

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

Geo data

mapping

Demo

ExamplesExamples

Introduction to Information Visualization - Fall 2012

Treemap

Demo

ExamplesExamples

Introduction to Information Visualization - Fall 2012

Circle chart

Demo

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

Questions?Questions?

Tutorial survey:

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

Introduction to Information Visualization - Fall 2012