Making Visualization Work

Benjamin B. BedersonComputer Science Department/UMIACSHuman-Computer Interaction LabUniversity of Maryland

Information Visualization

Interactive visual display of abstract information to help users: Find patterns, outliers and trends Explore data to build intuition Develop specific questions to be asked

of more traditional mechanisms

Visuals help us think Provide a frame of reference, a temporary storage area

What’s the Big Deal?

Presentation is everything!

External Cognition

Recognize human limitations

External Cognition Role of external world in

thinking and reason

Excellent Pattern Recognition

1281736875613897654698450698560498286762980985845382245098564589450984509809658590910302099059595957725646750506789045678845789809821677654872664908560912949686

How many 3’s?

1281736875613897654698450698560498286762980985845382245098564589450984509809658590910302099059595957725646750506789045678845789809821677654872664908560912949686

Pitfalls

Complex navigation and occlusion Inappropriate use of 3D

Meaningless spatial dimensions Self-Organizing Maps

Unhelpful animation PowerPoint, Visual Thesaurus

Inefficient and confusing use of screen space Chart Junk

“Inventive, Imaginative, Ingenious, Fanciful!” => But is it useful?

Strategy Show more than fits on the screen:

Scrolling 3D Dense information design Overview+detail 2.5D (ZUIs) Distortion (fisheye) Careful animation

Techniques: Zoomable User Interfaces (ZUIs) Fisheye Distortion Transitional animations Work closely with users [Bederson & Shneiderman 2003 - Craft]

Goal: Support users tostay “in the flow”.

My Focus

Themes: Adults Children Mobile Devices Toolkits

Approaches: Systems Applications Studies

This talk is not about my other work on:• Voting Systems• Interaction & Input devices• Methodology

[Chipman, Bederson, Golbeck - Behaviour & Information Technology (submitted)] [Hutchinson, Bederson et al. - CHI 2003][Baudisch, Bederson et al. - Interact 2003][Bederson - CHI 2003][Gandhi, Kumar, Bederson, Shneiderman - WebVis 2000][Stewart, Bederson & Druin - CHI 1999][Hightower, Bederson, et al. - Hypertext 1998]

CounterPoint - [Good & Bederson - J. Information Visualization 2002]

PhotoMesa – Zoomable Image Browser

Browse large numbers of images See relationships among images Fast preview / detail

Stand-alone, or integrated w/ DB Local or web-deployed

ZUIs have excellent bandwidth characteristics – constant amount of information per view

Also working on Automatic thumbnail cropping Semi-autonomous annotation

Commercialized at www.photomesa.com

www.cs.umd.edu/hcil/photomesa

Demo

[Suh, Ling, Bederson & Jacobs - UIST 2003][Bederson - UIST 2001][Combs & Bederson - DL 1999]

Applying PhotoMesa- Visual Search Results

Shows search results Integrated with UMD Art

History Dept. DB9,000 images

Installed in slide library

Quantum Treemaps

Variation on treemaps: space-filling subdivision of a rectangle

Guarantees that each rectangle’s dimensions are an integral multiple of a constant

Lays out images so that all images are the same size and are aligned on a single grid across rectangles

[Bederson, Shneiderman & Wattenberg - TOG 2002]

Applicable to any treemap algorithm:1. After rectangles are generated, expand to next quantum size.2. Expand to match width/height of neighbors3. Translate to avoid overlap4. Accommodate larger size within parent

Quantum Treemaps II

Average Aspect Ratios

0.00

0.50

1.00

1.50

2.00

2.50

3.00

3.50

4.00

4.50

5.00

10 20 50 100 1000

Maximum # elements per rectangle

Ave

rag

e A

spec

t R

atio

Pivot Treemap

Quantum Pivot Treemap

Strip Treemap

Quantum Strip Treemap

Wasted Space

0%

5%

10%

15%

20%

25%

30%

35%

40%

45%

50%

10 20 50 100 1000

Maximum # elements per rectangle

Wa

ste

d S

pa

ce

Pivot Treemap

Quantum Pivot Treemap

Strip Treemap

Quantum Strip Treemap

Strip Treemaps

Want rectangles to be ordered Squarified alg. creates rows or columns,

and inserts in order of rectangle size. Based on any existing “Squarified” treemap algorithm

Strip approach:1. Add rectangle to current row (“strip”)

2. If row’s average aspect ratio increases, start new row

Squarified => <= Strip

Strip Treemaps Squarified treemaps: avg aspect ratio: 1.75

Strip treemaps: avg aspect ratio: 2.6

User study examined “readability” 83% faster for strip than squarified search task w/ 100 rects

(2.5 sec vs 14.8 sec w/ 20 subjs).

SpaceTree / TaxonTree- Seeing Hierarchies in Context

Explore large hierarchies Gain understanding of

relationships among data Integrate search/browse

TaxonTree is specialized version of biodiversity Used in UMD Biodiversity

BSCI 224 Working on “SpaceGraph” to

view ontologies

Demo

www.cs.umd.edu/hcil/spacetree[Grosjean, Plaisant & Bederson - InfoVis 2002]

DateLens- Calendars on the Go

Support longer range tasks Scale up while maintaining

context: Uses 2D fisheye distortion Carefully designed

interaction Integrated search with or

without text entry High performance on low-

powered device

www.cs.umd.edu/hcil/datelens

Demo

[Bederson, Clamage, Czerwinski, Robertson - TOCHI submitted]

DateLens Studies

Two user studies at Microsoft Research First with non-PDA users Second with MSR PDA-

using employees Similar timing results Overall quite enthusiastic

Interaction between Calendar Type and Task Complexity

0

10

20

30

40

50

60

70

80

90

Condition

Ave

rag

e T

ask

Tim

e (S

eco

nd

s)

DateLens--Simple

PPC--Simple

DateLens--Complex

PPC--Complex

Commercialized at www.datelens.com

Fisheye Menus Problem: Selection from a long list Traditional approaches:

ArrowBars ScrollBars Hierarchies

Solution: Apply fisheye distortion Shows detail in context Reduces mouse presses / taps

[Bederson - UIST 2000]

Results —Task Times Tasks were performed faster using Fisheye Menus,

F(1,1206)=29.4, p<0.001 25% faster (4.0 vs 5.3 secs)

Difference more pronounced for longer menus

FISHEYE START

menutype

Dot/Lines show Means

Time vs. Menu Length

20 30 40 50

menuleng

0.00

1000.00

2000.00

3000.00

4000.00

5000.00

6000.00

7000.00

tim

e

And more pronounced for items near the end of the menus

Working With Children

KidPad – A story telling / authoring tool Focus on children’s abilities Made zooming & linking

accessible Collaboration through

Single Display Groupware

[Hourcade, Bederson, Druin - SPE 2003][Benford, Bederson, et al. - CHI 2000][Boltman, Druin, Bederson et al. - AERA 2002]

www.cs.umd.edu/hcil/kidpad

International Children’s Digital Library Largest freely available collection of

children’s books 23 languages, 260 books Exploring interface and accessibility

Enhanced version uses PhotoMesa Over 15,000 unique visitors / month

[Druin, Revelle, Bederson, et al. - JCAL 2003][Hourcade, Bederson, et al. - Interacting w/ Comp. 2003][Druin, Bederson, et al. - First Monday 2003][Revelle, Druin, Platner, Bedersonet al. - J. of Science, Education and Technology 2002][Druin, Bederson, et al. - JCDL 2001]

www.icdlbooks.org

Study of Children’s Mouse Use

0

50

100

16 32 64

Target Size (pixels)

Ac

cu

rac

y %

4 years

5 years

Adult

0

1

2

3

16 32 64

Target Size (Pixels)

Targ

et R

een

try

4 years

5 years

Adult

[Hourcade, Bederson, Druin, Guimbretiere - TOCHI submitted]

Piccolo- A Zoomable User Interface Toolkit For Java programmers (porting to C#) Offers a structured canvas Supports 2D object-oriented graphics

layers hierarchies (transformation, transparency, etc.) cameras efficiency mechanisms

=> Extensible and Efficient

www.cs.umd.edu/hcil/piccolo

History Lesson – ZUI Toolkits

First there was Pad++ Designed for prototyping Used C++ and Tcl/Tk and

X or OpenGL graphics

It was useful, but didn’t scale up well The API was defined in Tcl and the C++ code

was efficient, but messy…[Bederson & Meyer - SPE 1998]

Then There Was Jazz

We wanted to spend less time on the toolkit Goals became clear:

Small and easy to learn, use within existing GUI framework

Manage painting, picking and event dispatch - customizable

Interaction handlers on elements and groups Non-rectangular, transparent, scaled, translated and

rotated graphics Large numbers of objects in complex scenes. Animated view navigations (pans and zooms) Multiple views Fast model manipulation

[Bederson, Meyer & Good - CHI 2000]

Inspired by 3D Graphics

We built “polylithic” scene graph Different than “monolithic” GUI toolkits

[Bederson, Grosjean, Meyer - TSE submitted]

Node

Rectangle

Node

FadeRectangle

FadeRectangle

MonolithicPolylithic

Root

FadeRectangle

Monolithic

FadeRectangle

FadeRectangle ...

Root

Polylithic

Fade FadeFade ...

Rectangle Rectangle Rectangle...

Polylithic Potential

Simpler objects, easier to maintain More de-coupled objects, easier to extend More run-time control

Could better support design environments

But … More objects to control was significant problem Introduced “editor” to manage object chains Still not good enough for app programmers

Now there is Piccolo Our “last” toolkit In Java, and now also in C# Same feature set as Jazz,

but monolithic Biggest lesson: KISS

PNode

PRoot PLayer PCamera

PText

PPath

PImage

piccolo piccolo.nodes

1.n

Class Hierarchy

PRoot

PLayer PCamera

PNode PImage

PText PPath

Typical run-time structure

import edu.umd.cs.piccolo.nodes.*;import edu.umd.cs.piccolox.*;public class PHelloWorld extends PFrame { public void initialize() { PText text = new PText("Hello World!"); getCanvas().getLayer().addChild(text); } public static void main(String args[]) { new PHelloWorld(); }}

How do they compare?

Tough comparison – many design differences aside from polylithic / monolithic architectures

Did case studies and a performance analysis

Custom Piccolo Jazz Scene render time 1.5 msec 2.1 msec 2.2 msec Lines of Code 272 lines 171 lines 219 lines Class file size 10.4 kbytes 10.4 kbytes 13.2 kbytes Memory usage our code (full application)

7.5 k (484k) 8.0 k (516k) 10.2 k (535k)

DateLens Mockup

Task Custom Piccolo Scene graph Overhead

Jazz Scene graph Overhead

10,000 rectangles 265.0 msec 270.3 msec 2 % 282.8 msec 7 % 1,000 groups of 10 rectangles

273.4 msec 3 % 281.2 msec 6 %

100 groups of 10 groups of 10 rectangles

267.2 msec 1 % 281.3 msec 6 %

10 groups of 10 groups of 10 groups of 10 rectangles

270.4 msec 2 %

278.1 msec 5 %

Performance Analysis

Task Piccolo Jazz 10,000 rectangles Build 10,000 nodes 16.0 msec 219.0 msec Translate 10,000 nodes 0.4 msec 23.5 msec Remove 10,000 nodes 5.3 msec 5.3 msec 1,000 x 10 rects Build 10,000 nodes 16.0 msec 218.0 msec Translate 10,000 nodes 0.4 msec 50.8 msec Remove 10,000 nodes 5.3 msec 5.3 msec 100 x 10 x 10 rects Build 10,000 nodes 15.0 msec 226.5 msec Translate 10,000 nodes 0.4 msec 62.5 msec Remove 10,000 nodes 5.0 msec 10.6 msec 10 x 10 x 10 x 10 rects Build 10,000 nodes 16.0 msec 226.5 msec Translate 10,000 nodes 0.4 msec 82.3 msec Remove 10,000 nodes 5.0 msec 10.3 msec

Rendering Speed

Scene graph manipulation speed

Architecture Reflections

Polylithic and Monolithic approachs each have merits

Similar performance and code sizes Base architecture on toolkit users and

expected life cycle of toolkit More static => monolithic More dynamic => polylithic

Piccolo in Use Poseidon –

UML modeling, Gentleware.com

Java Digital Album Infrastructure

SimBrain – Neural Network

TimeSearcher

1,300 messages in public email list

U. Victoria – Ontology Visualization

Conclusions

Does zooming work? Is animation helpful? Are toolkits beneficial? => Clearly yes (sometimes)

Good small representations needed Animation to help maintain object constancy best Understanding of domain and users crucial

Like all interfaces, good visualizations remain hard[Hornbaek, Bederson & Plaisant - TOCHI 2002][Bederson & Boltman - InfoVis 1999]