cs b :: oct 2010 interaction

1

CS448B :: 12 Oct 2010

Interaction

Jeffrey Heer Stanford University

Interaction

[There is an] apparent challenge that computational artifacts pose to the longstanding distinction between the physical and the social, in the special sense of those things that one designs, builds, and uses, on the one hand, and those things with which one communicates, on the other.

“Interaction”– in a sense previously reserved for describing a uniquely interpersonal activity – seems appropriately to characterize what goes on between people and certain machines as well.

Lucy Suchman, Plans and Situated Actions

Interaction between people and machines requires mutual intelligibility

or shared understanding.

2

Gulfs of Execution & Evaluation

Real worldConceptual model

Evaluation

Execution

Gulfs

[Norman 1986]

Gulf of ExecutionThe difference between the user’s intentions and the allowable actions.

Gulf of EvaluationThe amount of effort that the person must exert to interpret the state of the system and to determine how well the expectations and intentions have been met.

[Norman 1986]

Gulf of Evaluation

Real world:

Conceptual model:x,y correlated?

Evaluation

Gulf

X Y0.67 0.790.32 0.630.39 0.720.27 0.850.71 0.430.63 0.090.03 0.030.20 0.540.51 0.380.11 0.330.46 0.46

Gulf of Evaluation

Real world:


Evaluation

Gulf

0

0.5

1

0 0.5 1

X

Y

3

Gulf of Evaluation

Real world:


Evaluation

Gulf

ρ = -.29

Gulf of Execution

Real world

Conceptual model:Draw a scatterplot

Execution

Gulf

Move 90 30Rotate 35Pen down…

0

0.5

1

0 0.5 1

X

Y

Gulf of ExecutionGulf

Execution

Conceptual model:Draw a scatterplot

0

0.5

1

0 0.5 1

X

Y

Real world

Topics

Early interactive visualizationBrushing and linkingDynamic queriesGeneralized selection

4

Interaction Techniques

Are there “essential” interactive operations for supporting exploratory data visualization?

Interaction Techniques

Are there “essential” interactive operations for supporting exploratory data visualization?

• View Specification (map data to visual vars)• View Adjustment (pan, zoom, scale, rotate)• Selection / Highlighting• Filtering• Sorting• Extract Data

Interactive Visualization

[Graphics and Graphic Information Processing, Bertin 81]

5

[Graphics and Graphic Information Processing, Bertin 81] [Graphics and Graphic Information Processing, Bertin 81]

[Graphics and Graphic Information Processing, Bertin 81] [Graphics and Graphic Information Processing, Bertin 81]

6

[Graphics and Graphic Information Processing, Bertin 81] PRIM-9, Tukey, Fisherkeller, Friedman 1972

7

Brushing and Linking

Highlighting / Brushing

Direct attention to a data subset within a graph [Wills 95]

Brushing and Linking

Interactively select subset of dataSee selected data in other viewsTwo components (normally views)

must be linked to allow for brushing

Brushing Scatterplots

Brushing Scatterplots, Becker & Cleveland 1982

8

Baseball Statistics [from Wills 95]

select highsalaries

avg careerHRs vs avg career hits(batting ability)

avg assists vsavg putouts (fielding ability)

how longin majors

distributionof positionsplayed

Linking Assists to Positions

GGobi: Brushing

http://www.ggobi.org/

Dynamic Queries

9

Query and ResultsSELECT house FROM palo_alto_homesWHERE price < 1,000,000 AND bedrooms > 2ORDER BY price

Issues

1. For programmers2. Rigid syntax3. Only shows exact matches4. Too few or too many hits5. No hint on how to reformulate the query6. Slow question-answer loop7. Results returned as table

[Williamson and Shneiderman 92]

HomeFinder Direct Manipulation

1. Visual representation of objects and actions2. Rapid, incremental and reversible actions3. Selection by pointing (not typing)4. Immediate and continuous display of results

10

FilmFinder

[Ahlberg and Shneiderman 94]

FilmFinder


Alphaslider


FilmFinder


11

Attribute Explorer [Spence and Tweedie 98]

Video Clip

Zipdecode [Fry 04]

http://benfry.com/zipdecode/

NameVoyager

http://www.babynamewizard.com/voyager

TimeSearcher [Hochheiser & Shneiderman 02]

Based on Wattenberg’s [2001] idea for sketch-based queries of time-series data.

12

3D dynamic queries [Akers et al. 04] 3D dynamic queries [Akers et al. 04]

Pros and Cons

ProsControls useful for both novices and expertsQuick way to explore data

ConsSimple queriesLots of controlsAmount of data shown limited by screen space

Who would use these kinds of tools?

Administrivia

13

Assignment 2: Visual Data AnalysisUse visualization software (Tableau) to form & answer questionsFirst steps:

Step 1: Pick a domainStep 2: Pose questionsStep 3: Find DataIterate

Create visualizationsInteract with dataRefine your questions

Make wiki notebookKeep record of your analysisPrepare a final graphic and caption

Due by end of day onTuesday, October 12

Next Two Lectures: TutorialsIntroduction to tools for creating interactive visualizations. Tutorials led by Vadim.

Th 10/14 ProtovisA JavaScript language for browser-based visuslization (vis.stanford.edu/protovis)

Tu 10/19 Flash / FlareIntroduction to Adobe Flash development and the Flare visualization library (flare.prefuse.org)

Assign 3: Interactive Visualization

Create an interactive visualization application. Choose a data domain and select an appropriate visualization technique.

1. Choose a data set and storyboard your interface2. Implement the interface using tools of your choice3. Submit your application and produce a final write-up

You may work individually or in groups of 2.Due by end of day on Thursday, October 28

Generalized Selection

14

Visual Queries

Model selections as declarative queries.

(-118.371≤lon AND lon≤ -118.164)AND(33.915≤lat AND lat≤ 34.089)

Visual Queries

Model selections as declarative queries over the domain of visualized data.

Applicable to dynamic, time-varying data

Retarget selection across visual encodings

Perform operations on query structure

“Select items like this one.”


Point to an example and define an abstraction based on one or more properties [Clark, Brennan]

“Blue like this”“The same shape as that”

Abstraction may occur over multiple levels

15


Provide generalization mechanisms that enable users to expand a selection query along chosen dimensions of interest

Expand selections via query relaxation

Interactor

QueryBuilder

Query Builder

Click: Select Items(id = ‘China’)

Drag: Select Range(2000 < gni AND gni < 10000) AND(.1 < internet AND internet < .2)

Legend: Select Attributes(region = ‘The Americas’)

16

Interactor

QueryBuilder

QueryVisualizer

(id = ‘China’)

Interactor

QueryBuilder

QueryVisualizer

(id = ‘China’)

Interactor

QueryBuilder

QueryVisualizer

(id = ‘China’) Query Relaxer

Interactor

QueryBuilder

QueryVisualizer

(id = ‘China’) Query Relaxer

region IN SELECT region FROM data WHERE (id = ‘China’)

region

(region = ‘Asia’)

17

Query Relaxation

Generalize an input query to create an expanded selection, according to:

1. A semantic structure describing the data

2. A traversal policy for that structure

Time Relaxation

Relaxation using Hierarchies

Relax using abstraction hierarchies of the dataTraverse in direction of increasing generality

ExamplesA Priori: Calendar, Categories, GeographyData-Driven: Nearest-Neighbor, Clustering

Relaxation using Attributes

If no explicit semantic structure is available, treat data itself as a “flat” hierarchy

Select all items with matching values along the attributes chosen for relaxation

18

Relaxation of Networks Lesson

Consider how the structure and/or semantics of the data might be leveraged to aid analysis.

One extension: look beyond data features to incorporate perceptual features of the display.

Peaks,valleys,& slopes

Perceptual Annotation [Kong & Agrawala 09]

NHLGoals

per Year

Summary

Most visualizations are interactiveEven passive media elicit interactions

Good visualizations are task dependentPick the right interaction techniqueConsider the semantics of the data domain

Human factors are importantLeverage human strengthsAssist to get past human limitations

cs b :: oct 2010 interaction

Documents