prefuse: A Toolkit for Interactive Information Visualization

Heer, J., Card, S.K., Landay, J.A.

Presented by Julia West

A familiar visualization…

Problems

Not customizedNeed novel visualizations

Could write our own Choose a visualization Find/write algorithms for visualization and interaction Spend weeks coding

Could utilize existing visualization “widgets” Granularity at the level of the visualization Same problem!

Earlier Work

Information Visualization WorkTreeMaps Bruks, M., Huizing, K., van Wijk,

J.J. (2000)

Cone Trees Robertson, G.G., Mackinlay, J.D., Card, S.K. (1991)

Perspective Walls Mackinlay, J.D., Robertson, G.G., Card, S.K. (1990)

StarField displays Ahlberg, C. & Shneiderman, B. (1994)

Hyperbolic trees Lamping, J., Rao, R. (1996)

DOITrees Card, S.K. & Nation, D (2002)

SpaceTrees Plaisant, C., Grosjean, J., Bederson, B. (2002)

Earlier Work (continued)

Selection, Transformation & Navigation Techniques

Focus+context schemes Furnas, G.W. (1981)

Space distortion Leung, Y.K. & Apperley, M.D. (1994)

Point-of-interest navigation Mackinlay, J.D., Card, S.K. & Robertson, G.G. (1990)

Panning & zooming Igarshi, T. & Hinckley, K. (2000); Perlin, K. & Fox, D. (1993)

Infovis Frameworks

Information Visualizer (IV) Card, S.K. Robertson, G.G. & Mackinlay, J.D. (1991)

Earlier Work (continued)

Graph Drawing graphviz package http://www.research.att.com/sw/tools/

graphviz

Graph Visualization Framework (GVF) Marshall, M.S., Herman, I. & Melancon, G. (2001)

Pajek Batagelj, V. & Mrvar, A. (2003)

Tom Sawyer software http://www.tomsawyer.com

yWorks software http://www.yworks.com

Similar productsInfoVis toolkit Fekete, J.D. (2004)

XML toolkit http://iv.slis.indiana.edu/sw/toolkit.html

Enter prefuse…

Simplifies creation of visualizationsFlexible interface

Multiple views Transforms Customization

Time saver

Road-map

Design of prefuseHow to write applications with prefuseSample ApplicationsUsability Study

Toolkit Design

Data

Abstract Data Interfaces Unstructured data Graph data Tree data

Entity type Node TreeNode Edge

Input/Output

Filtering

Visual Form

VisualItems Node NodeItem Edge EdgeItem TreeNode AggregateItem

ItemRegistry

NodeItems

EdgeItems

ItemRegistry

Rendering

VisualItems are drawn to screenBasic Shapes, edges, text, & imagesMany Renderers, many views

RendererFactorygetRenderer(VisualItem)

Rendererrender(Graphics2D, VisualItem)

getBounds(VisualItem)

locatePoint(Point2D, VisualItem)

Display Component

Renders VisualItems to screen

Provides user interface callbacks

Supports tool tips, graphics transforms, on-screen text editing

Data Set EntityAbstract Data

Vis Filters

View

VisualItem

View View Controllers Renderer /Display

Vis Vis

Actions

Grouped into runnable ActionListsFilter Actions

Filtering process

Assignment Actions Visual Attributes

Animator Actions Interpolation of start & end values

Libraries

Writing Applications

Load Data & Create ItemRegistry

Create Renderers Create ActionLists

Filter & Display Animate

Create Display & Controls

Add Display to window & run ActionList

Writing Cooler Applications

Adding Force-Based Jitter

Adding Overview, Panning & Zooming

Adding Fisheye Distortion

Sample Applications

DOITree Web Hierarchy Browser

Vizster

Social networking visualization

Application Demos

prefuse homepage Force-directed demo Radial demo Distortion demo Auto-zoom demo

Usability Study

8 participants 4 CS students 3 professional programmers and/or UI

designers 1 infovis expert

Pretest: brief tutorialWindows PC with Eclipse IDE, prefuse

source code, examples, & documentation“Think Aloud”

Usability Study continued

Given social networking data fileTasks

Create a static visualization of data using random layout

Use layout technique of choice and implement color scheme

Add interactivity and animation

Usability Study Results

All successfully created visualization7/8 completed all tasksProblems with structuring data flowNaming issues

API usage patterns – most help from examples, not documentation

Conclusion

Easily create novel visualizationsProblem

Data preparation

Questions