dynamic insets for context-aware graph navigation
DESCRIPTION
Slides from IEEE EuroVis 2011 on dynamic insets for providing context in graphs, such as social networks, geographic maps, and UML diagrams.TRANSCRIPT
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/