Focus+Context Display and Navigation Techniques for Enhancing - - PowerPoint PPT Presentation

▶

Aug 23, 2022 101 likes •336 views

Focus+Context Display and Navigation Techniques for Enhancing Radial, Space-Filling Hierarchy Visualizations John Stasko Eugene Zhang Information Interfaces Research Group College of Computing / GVU Center Georgia Institute of Technology

SLIDE 1

Focus+Context Display and Navigation Techniques for Enhancing Radial, Space-Filling Hierarchy Visualizations

John Stasko Eugene Zhang

Information Interfaces Research Group College of Computing / GVU Center Georgia Institute of Technology

SLIDE 2

InfoVis ‘00 2

Hierarchies and Trees

CHEOPS Lamping & Rao Beaudoin, Parent & Vroomen Card, Mackinlay & Robertson Shneiderman & Johnson Node-link Hyperbolic tree Treemap ConeTree

SLIDE 3

InfoVis ‘00 3

Radial Space-Filling

Chuah Andrews & Heidegger InfoVis ‘98

SLIDE 4

InfoVis ‘00 4

SunBurst

SLIDE 5

InfoVis ‘00 5

Appears in: American Heritage Dictionary, 3rd Ed. Houghton Mifflin, 1992

SLIDE 6

InfoVis ‘00 6

Empirical Study

Compared SunBurst to Treemap (borderless)

n a variety of file browsing tasks

SunBurst performed as well (or better) in task accuracy and time Learning effect - Performance improved with Treemap on second session Strong subjective preference (51-9) for SunBurst Participants cited more explicit depiction of structure as an important reason

To appear: International Journal of Human-Computer Studies Special issue on Empirical Studies of InfoVis, 2000

SLIDE 7

InfoVis ‘00 7

SunBurst Negative

In large hierarchies, files at the periphery are usually tiny and very difficult to distinguish

Quick demo examples

SLIDE 8

InfoVis ‘00 8

Fix: Objectives

Make small slices bigger Maintain full circular space-filling idea Allow detailed examination of small files within context of entire hierarchy Don’t alter ratios of sizes Avoid use of multiple windows or lots of scrollbars Provide an aesthetically pleasing interface in which it is easy to track changes in focus

SLIDE 9

InfoVis ‘00 9

3 Solutions

Three visualization+navigation techniques developed to help remedy the shortcoming

Angular detail Detail outside Detail inside

SLIDE 10

InfoVis ‘00 10

Design 1 - Angular Detail

SLIDE 11

InfoVis ‘00 11

Design 2 - Detail Outside

SLIDE 12

InfoVis ‘00 12

Design 3 - Detail Inside

SLIDE 13

InfoVis ‘00 13

Video

4 minutes On conf tape

SLIDE 14

InfoVis ‘00 14

Angular Detail

Most “natural”
Least space-efficient
Most configurable by

user

SLIDE 15

InfoVis ‘00 15

Detail Outside

Exhibits non-distorted

miniature of overview

Somewhat visually

disconcerting

Focus is quite enlarged

(large circumference and 360°)

Relatively space

efficient

SLIDE 16

InfoVis ‘00 16

Detail Inside

Perhaps least intuitive

and most distorting

Items in overview are

more distinct (larger circumference)

Interior 360° for focus

is often sufficient

SLIDE 17

InfoVis ‘00 17

Key Components

Two ways to increase area for focus region: larger sweep angle and longer circumference Smooth transitions between overview and focus allow viewer to track changes Always display overview Allow focus selections from anywhere: normal display, focus or overview regions

SLIDE 18

InfoVis ‘00 18

Implementation

Utilizes fundamental animation update routine

Example: Detail Outside (called 3 times)

⌧Shrink global view ⌧Focus region grows out ⌧Focus regions wraps around global view

Smooth interpolation between start-end position and angle

SLIDE 19

InfoVis ‘00 19

Speed Considerations

Don’t draw small slices Cache small and large images of entire hierarchy, reload rather than draw During animation transitions, only draw the 100 largest slices (don’t use thresh- holding)

Consistent speed as hierarchy grows (really dependent on processor & graphics)

SLIDE 20

InfoVis ‘00 20

Preferences

Within our group, each method has its backers Needs more careful study Run study like our earlier one to identify performance benefits and subjective preferences

SLIDE 21

InfoVis ‘00 21

Potential Follow-on Work

Multiple foci Varying radii for different levels in hierarchy Use quick-keys to walk through neighboring files Smarter update when choosing new focus region from existing focus Fourth method: expand angle of focus in place by compressing all others

SLIDE 22

InfoVis ‘00 22