Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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:
Conceptual model:x,y correlated?
Evaluation
Gulf
0
0.5
1
0 0.5 1
X
Y
3
Gulf of Evaluation
Real world:
Conceptual model:x,y correlated?
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
[Ahlberg and Shneiderman 94]
Alphaslider
[Ahlberg and Shneiderman 94]
FilmFinder
[Ahlberg and Shneiderman 94]
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.”
Generalized Selection
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
Generalized Selection
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