introduction to information visualization

Introduction to Information VisualizationIntroduction to Information Visualization

Robert Putnam

[email protected]

Introduction to Information Visualization - Fall 2013

OutlineOutline


Introduction / Definition

History

Examples

Workflow / Pipeline

Software overview

Hands-on exercises

Resources

““Sci vis” versus “Info vis”Sci vis” versus “Info vis”


*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


• 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


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


Network visualization

(vizster)

ExamplesExamples


Geo data

mapping

Demo

ExamplesExamples


Treemap

Demo

ExamplesExamples


Circle chart

Demo

ExamplesExamples


Population

“Trendalyzer”

Demo

Additional ExamplesAdditional Examples


NY Times words, words, numbers

Visual Complexity (from book by Manuel Lima)

50 examples (from June 2009, somewhat dated)

D3 Gallery

Visualization componentsVisualization components


Color

Size

Texture

Proximity

Annotation

Interactivity

– Selection / Filtering

– Zoom

– Animation

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


Acquire

Parse

Filter

Mine

Represent

Refine

Interact

* Adapted from Fry, Visualizing Data

Info vis workflow / pipelineInfo vis workflow / pipeline


Acquire

[p. 7, Fry, Visualizing Data]



Parse




Filter/Mine




Represent




Refine




Interact

Demo[p. 12, Fry, Visualizing Data]

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

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

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/


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)


Questions?Questions?

Tutorial survey:

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


introduction to information visualization

Documents