prefuse: A Toolkit for Interactive Information Visualization Heer, J., Card, S.K., Landay, J.A. Presented by Julia West

A familiar visualization…

Problems Not customized Need 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 Work TreeMapsBruks, M., Huizing, K., van Wijk, J.J. (2000) Cone TreesRobertson, G.G., Mackinlay, J.D., Card, S.K. (1991) Perspective WallsMackinlay, J.D., Robertson, G.G., Card, S.K. (1990) StarField displaysAhlberg, C. & Shneiderman, B. (1994) Hyperbolic treesLamping, J., Rao, R. (1996) DOITreesCard, S.K. & Nation, D (2002) SpaceTreesPlaisant, C., Grosjean, J., Bederson, B. (2002)

Earlier Work (continued) Selection, Transformation & Navigation Techniques Focus+context schemesFurnas, G.W. (1981) Space distortionLeung, Y.K. & Apperley, M.D. (1994) Point-of-interest navigationMackinlay, J.D., Card, S.K. & Robertson, G.G. (1990) Panning & zoomingIgarshi, 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 packagehttp:// raphviz Graph Visualization Framework (GVF)Marshall, M.S., Herman, I. & Melancon, G. (2001) PajekBatagelj, V. & Mrvar, A. (2003) Tom Sawyer softwarehttp:// yWorks softwarehttp:// Similar products InfoVis toolkitFekete, J.D. (2004) XML toolkithttp://iv.slis.indiana.edu/sw/toolkit.html

Enter prefuse… Simplifies creation of visualizations Flexible interface  Multiple views  Transforms  Customization Time saver

Road-map Design of prefuse How to write applications with prefuse Sample Applications Usability 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 screen Basic Shapes, edges, text, & images Many Renderers, many views RendererFactory getRenderer(VisualItem) Renderer render(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 SetEntityAbstract Data Vis Filters View VisualItem ViewView Controllers Renderer / Display Vis

Actions Grouped into runnable ActionLists Filter 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 Force-directed demo  Radial demo Radial demo  Distortion demo Distortion demo  Auto-zoom demo Auto-zoom demo

Usability Study 8 participants  4 CS students  3 professional programmers and/or UI designers  1 infovis expert Pretest: brief tutorial Windows PC with Eclipse IDE, prefuse source code, examples, & documentation “Think Aloud”

Usability Study continued Given social networking data file Tasks  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 visualization 7/8 completed all tasks Problems with structuring data flow Naming issues API usage patterns – most help from examples, not documentation

Conclusion Easily create novel visualizations Problem  Data preparation Questions