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 on 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 • 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 Introduction to Information Visualization - Fall

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 DEMO http://vis.stanford.edu/jheer/projects/vizster/ Vizster: Visualizing Online Social Networks, Jeffrey Heer, danah boyd, IEEE Information Visualization (InfoVis), 32–39, 2005

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 proposal-graphic.html http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget- 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 DEMO 23

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