fundamentals techniques selected...

Involving the ViewerInteraction

February 21, 2012 – Michael Porath

Tuesday, February 21, 12

Where Are We?

Fundamentals Techniques SelectedTopicsData

ImagePerception

Color

InteractionStorytelling

Types of visualizations

?

Assignment 1Working with data

Assignment 2Exploratory

data analysis

Assignment 3Interactive

VisualizationFinal Project

InteractiveVisualization Project


Where Are We?

Fundamentals Techniques SelectedTopicsData

ImagePerception

Color

InteractionStorytelling

Types of visualizations

?

You arehere

Assignment 1Working with data

Assignment 2Exploratory

data analysis

Assignment 3Interactive

VisualizationFinal Project

InteractiveVisualization Project


What’s Interaction?

DataAnalysis

GraphicDesign

StaticVisualization



DataAnalysis

GraphicDesign

InteractionDesign

StaticVisualization



DataAnalysis

GraphicDesign

InteractionDesign

StaticVisualization

ExploratoryData Analysis



DataAnalysis

GraphicDesign

InteractionDesign

StaticVisualization


?



Interactive DataVisualization

DataAnalysis

GraphicDesign

InteractionDesign

StaticVisualization


?


Why Interaction?

ScaleStorytelling

Exploration Learning

• Too many data points• Too many di!erent dimensions

When is (static) representation not enough?


User Intent


7 CategoriesBased on User Intent

Select Explore Recon!gure

Encode Abstract /Elaborate

Filter Connect

Yi et al, 2007


1. SelectMark something interesting


ExampleUS Presidents Job Approval Ratings


ExampleUS Presidents Job Approval Ratings

http://www.clusterize.com/comparisons/5-us-presidents-job-approval-ratings

Pick a detail from a larger dataset to keep track of it.


2. ExploreShow something different


ExampleNY Times: Mapping America

San Francisco New York Cityhttp://projects.nytimes.com/census/2010/explorer

Overcome limitations of display size


3. ReconfigureShow a different arrangement


ExampleOk Cupid Matrix plot (from last week’s lecture)

Other Examples

• Sorting and rearranging columns

• Changing attributes in scatter plot


4. EncodeShow a different representation


ExampleD3.js stacked / grouped bars

http://mbostock.github.com/d3/ex/stack.html

Change visual/retinal variables

• Colors• Sizes• Orientation

• Font• Shape


5. Abstract / ElaborateShow more or less detail


ExampleWorld Best Country (Newsweek Study)

http://www.thedailybeast.com/newsweek/2010/08/15/interactive-infographic-of-the-worlds-best-countries.html


6. FilterShow something conditionally


ExampleSan Francisco Crimespotting

http://sanfrancisco.crimespotting.org

Change the set of data items presented based on some condition


ExampleKeystroke filtering in ZipDecode

http://benfry.com/zipdecode/


ExampleKeystroke filtering in NameVoyager

http://www.babynamewizard.com/voyager


7. ConnectShow related items


ExampleOECD Regional eXplorer

http://stats.oecd.org/OECDregionalstatistics

Selecting or highlighting in one case generates

highlighting in anotherMultiple views of same data


Interaction vs RepresentationStatic representation, that is.


Analysis – CommmunicationInteraction has an exploratory aspect

Communication

Exploratory Explanatory

Analysis

SelectExplore

Recon"gure

Encode

Abstract/ElaborateFilter

Connect


Recap


Show & Tell



AnnouncementAssignment 3

Task Create an (small) interactive information visualization based on what we’ve learned so far Deliverable Interactive visualization and 2 page writeup (500 words)Due Tuesday March 6, 5:00PMGroup sizes Alone or in groups of 2

• Find a (small) data set you’re passionate about.• Sketch out interaction upfront and include in your writeup.• You can use any tool / framework you like

More information on the class blog


Announcement 2Lab next week

Javascript / Visualization frameworks Q&A




Send Questions to mike@ischool by

Saturday night




Send Questions to mike@ischool by

Saturday nightAttend o#ce hours!


Geoff McGheeOnline Journalist


fundamentals techniques selected...

Documents