dynamic insets for context-aware graph navigation

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: sghani@purdue.edu

http://engineering.purdue.edu/pivot/