Interactive Information Visualization CogSci 121 - HCI Programming - - PowerPoint PPT Presentation

Interactive Information Visualization

CogSci 121 - HCI Programming Studio

“If you are going to find out anything about a data set you must first understand the data”

Tukey, J.W. Exploratory data analysis. Addison-Wesley Series in Behavioral Science: Quantitative Methods, Reading, Mass 1, (1977).

Knowing Your Data

• Getting a feel for you numbers means that:

– It is easier to find mistakes – It is easier to guess what actually happened – It is easier to find odd values

• Often too much emphasis in statistics is placed
• n statistical hypothesis testing and more

emphasis needs to be placed on using data to suggest hypotheses to test

Classic vs. Exploratory

• Classical sequence

Problem > Data > Model > Analysis > Conclusions

• Exploratory

Problem > Data > Analysis > Model > Conclusions

Data-Driven vs. Model -Driven

Exploratory Data Analysis (EDA)

• Goal: get a general sense of the data
• Data-driven (model-free)
• Think interactive and visual

– Humans are the best pattern recognizers – Use more than 2 dimensions (x,y,z, space, color, time….)

• Especially useful in early stages of data mining

– detect outliers (e.g. assess data quality) – test assumptions (e.g. normal distributions or skewed?) Bottom line: it is always well worth looking at your data!

“Far better an approximate answer to the right question, which is often vague, than an exact answer to the wrong question, which can always be made precise.”

Tukey, J.W. Exploratory data analysis. Addison-Wesley Series in Behavioral Science: Quantitative Methods, Reading, Mass 1, (1977).

HOW?

(The art of) Information Visualization

• Problem

– Big datasets: How to understand them?

• Solution

– Take better advantage of human perceptual system – Convert information into a graphical representation.

Tufte, Edward R., and P. R. Graves-Morris. The visual display of quantitative information. Vol. 2. Cheshire, CT: Graphics press, 1983.

History

Pre-history Introduction to Information Visualization - Fall

• 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

9

William Playfair

• 250 years of the price of wheat, typical weekly wages, and the reigning monarch. “Never

at any former period was wheat so cheap, in proportion to mechanical labour, as it is at the present time.”

Charles Joseph Minard

The Greatest Ever Infographic

https://www.youtube.com/watch?v=3T7jMcstxY0

Information Visualization

• Clever Information Visualization helps in making

hidden connections apparent

Finding the cause of a cholera outbreak John Snow’s map of London of 1854 allowed to trace back an unexplainable outbreak to a malfunctioning water pump on Broad Street … just by superimposing cholera cases (in red) on the street map.

Goals of Information Visualization

Visualization should:

– Make large datasets coherent

(Present huge amounts of information compactly)

– Present information from various viewpoints – Present information at several levels of detail

(from overviews to fine structure)

– Support visual comparisons – Tell stories about the data

Relationship across and between Data

• Continuous data over time

– How do we visualize trends? – How can we identify significant snapshots?

• Unknown relationships between variables

– How do variable influence each other? – Different views on data highlight different relationships

• Different kind of networks

– Geographic – Social

Vizster Social Network Example

Vizster: Visualizing Online Social Networks, Jeffrey Heer, danah boyd, IEEE Information Visualization (InfoVis), 32–39, 2005

DEMO http://vis.stanford.edu/jheer/projects/vizster/

Ultra-Scale Visualization

Larry Smarr, Director of Calit2, Health Data Demo, January 2013

How do we approach this data?

Interactive Information Visualization

http://d3js.org/

Examples - Basic

http://prcweb.co.uk/lab/what-makes-us-happy/ http://bl.ocks.org/mbostock/4060606 http://mbostock.github.io/d3/talk/20111018/area-gradient.html http://bl.ocks.org/mbostock/3885705

Examples - Interactive

Obama Budget

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget- proposal-graphic.html

Congressional Influences

http://www.brightpointinc.com/interactive/political_influence/index.html 


Wealth of Nations

http://cesiumjs.org/d3cesium/

Examples - Exploratory

Parallel Coordinates

http://bl.ocks.org/mbostock/1341021

Cross-Filter

http://square.github.io/crossfilter/

Brush and Link

http://mbostock.github.io/d3/talk/20111116/iris-splom.html

Avant-Garde

23

DEMO

Tutorial

http://alignedleft.com/tutorials/d3

24

• 5. Data
• Generating Page Elements
• Binding Data
• 6. Drawing with Data
• Drawing divs
• The Power of data()
• Drawing SVGs
• Making a Bar Chart
• Making a Scatterplot
• Next Steps
• 10. Interactivity
• Binding Event Listeners
• Introducing Behaviors
• Grouping SVG Elements
• Tooltips
• Consideration for Touch Devices
• Moving Forward

Intro to D3

http://webholics.github.com/talk-munichjs-d3/#2.0 http://enja.org/2011/09/15/simple-d3-js-pie-chart-webcast/

Demo Tutorial - Jasmine

27

Next Steps

• Lecture: Thu 4/21

• More Interative Data Visualization and Design Exercise on DELPHI
• Technical Discussions (required), Fri 4/17

• Troubleshooting with Assignment 2

• Quiz on Week 4 Content
• Readings (required)

• Johnson (Designing With the Mind in Mind) - Chapter 13, 14

• Meirelles (Design for information: an introduction to the histories, theories, and the best

practices behind effective information visualizations) - Introduction + Chapter 1

• Next Week:

• Rapid Prototyping and Wireframing

• Assignment 3

Assignment #2: Andrew