Upload
niklas-elmqvist
View
644
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Slides from IEEE EuroVis 2011 on dynamic insets for providing context in graphs, such as social networks, geographic maps, and UML diagrams.
Citation preview
Dynamic Insets for Context-Aware Graph
Navigation
Sohaib GhaniPurdue UniversityWest Lafayette, IN
USA
Nathalie RicheMicrosoft Research
Redmond, WAUSA
Niklas ElmqvistPurdue UniversityWest Lafayette, IN
USA
IEEE EuroVis 2011June 1-3, 2011 ▪ Bergen, Norway
2
(realistic) graphs are big…
…but screens are small!
3
The Case for Context-Aware Graph Navigation:What is outside the screen is just as important as whatis on it!
Source: sean dreilinger, Flickr
4
Recent TrendUse the graph topology to
inform navigation
[Moscovich et al 2009]
5
DEMO
6
Outline
Motivation Dynamic Insets
Design Interaction
Evaluation Application Examples Conclusions & Future Work
7
Dynamic Insets: Basic Idea
8
Degree of Interest (DOI)
Rank off-screen nodes Show N nodes with highest DOI in
inset DOI functions
Neighbors (DOI = 1) Neighbors divided by distance
(DOI=1/d) GPS: nearby gas stations Airline: ticket price, travel time, #stops,
etc Social network: graph metrics
9
Flipping Insets
10
Drag-to-Fan
11
Distance Visualization
12
Evaluation (1)
Participants: 12 Techniques: 2
BG – Bring & Go [Moscovich et al 2009] DI – Dynamic Insets
Tasks: 3 Count neighbors Close context Distant context
Densities: 2 (next)
13
Tasks (1)
Sparse Dense
14
Results (1)
RM-ANOVA, p < .05
Close Distant Count
BG
DI
BG DI
15
Evaluation (2)
Follow-up qualitative evaluation Usability and scalability of DI
Two scenarios Geographic maps (road networks) Social network (AVI co-authorship)
Participants: 6 Tasks: 20 graph-related (Lee et al
2006) Duration: 30 (map) + 30 (soc)
minutes
16
Example 1: Road Networks
17
Example 2: Social Network
18
Results (2)
Efficiency Enjoyability Ease of use Visual clutter Aids mental map
Context utility Use in daily work?
0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
5
GeoMap SocNet
19
Example 3: UML Editor
20
Conclusions
Dynamic insets provide context-aware graph navigation Insets show destination of edges leaving
border of screen Design parameters include DOI
functions, layout, occlusion Applications: map, networks, UML,
etc User studies confirm usefulness
21
Turn left onto I-94W
22
Thank You!
Contact Information:Sohaib GhaniSchool of Electrical & Computer EngineeringPurdue UniversityWest Lafayette, IN, USA
E-mail: [email protected]
http://engineering.purdue.edu/pivot/