prefuse: A Toolkit for Interactive Information Visualization Jeffrey Heer Stuart K. Card James A. Landay CHI2005

Outline Motivation Introduction Design of Prefuse Build Application with Prefuse Evaluation Summary CHI2005

Motivation Infovis is indispensable – Find hidden patterns in data – Interaction with visualized info Still lack of infovis app – Difficult to provide domain-specific config – Difficult to build Complex layout Dynamic graphics CHI2005

Motivation Previous work – TreeMaps – Cone Trees – Hyperbolic Trees – DOITrees – SpaceTrees – Perspective Walls – StarField displays CHI2005

TreeMap CHI2005

Hyperbolic Trees CHI2005

DOITree CHI2005

SpaceTrees CHI2005

Perspective Walls CHI2005

StarField displays CHI2005

Motivation Current work – Explorer designs and techniques Similar project Infovis-specific toolkits (monolithic) – Fekete's InfoVis toolkit – Indiana's XML toolkit Lib of existing visualization Without set of reusable components CHI2005

Motivation Need a toolkit – Diversity customization support – Handle complex layout and graphics – Animation handling – Introduce new functionalities – Reusable CHI2005

Outline Motivation Introduction Design of Prefuse Build Application with Prefuse Evaluation Summary CHI2005

Introduction to prefuse Written in Java Extensible UI toolkit Interactive display Not ready-made infovis “widgets” A set of building blocks Basic data structure on graph – Entities – Relations CHI2005

Outline Motivation Introduction Design of Prefuse Build Application with Prefuse Evaluation Summary CHI2005

Design of Prefuse Information Visualization Reference Model – Abstract data representation – Map data into a visualizable form – Process the form – Map into interactive displays CHI2005

Design of Prefuse CHI2005

Design of Prefuse--Abstract Data Interface for data structure Basic element—Entity – Named attributes – Base class for structural type » Node » TreeNode » Edge » … Interface for data io Bounded visualization to fit in memory CHI2005

Design of Prefuse--Filtering Filtering can make visualization-specific model – Multiple visualizations of a data set – Different views of a specific visualization Filtering process – Select a set of abstract data elements – Generate visual items Attributes of source data Visual properties CHI2005

Design of Prefuse—Visual Items Three types of VisualItems – NodeItems – EdgeItems – AggregateItems CHI2005

Design of Prefuse—Visual Items ItemRegistry – Data structure which stores visual items – Houses states of visualization – Request by filter action – Contains FoucsManager – Caching approach – Recycle CHI2005

Design of Prefuse—Actions Basic component of application design – Update visual items in ItemRegistry – Select visualized data, set visual properties – Simple API – Perform arbitrary tasks CHI2005

Design of Prefuse—Actions Actions Types – Filter – Assignment – Animator CHI2005

Design of Prefuse—ActionLists ActionList is a list of actions Can be subroutine of other list Can run once or more Execution is managed by scheduler CHI2005

Design of Prefuse—ActionLists Example CHI2005

Design of Prefuse—Render Renders draw VisualItems – Take use of item’s visual attributes – Simple API RenderFactory manages mapping between items and appearences – Return a Render given a visualitem – High flexbility – Easy change to visual appearance CHI2005

Design of Prefuse—Display Perform presentation of visualized data Display the contents of ItemRegistry Subclass JComponent Interaction support (ControlListener) CHI2005

Design of Prefuse—Library Layout and Distortion Force Simulation Interactive Controls Color Maps Integrated Search Event Logging CHI2005

Design of Prefuse—Sample Application CHI2005

Design of Prefuse—Evaluation 1 Build two novel visualizations – Degree of Interest Tree – Vizster Reuse and extensibility Accelerated implementation times Maintain real-time interaction and animation over lots of data elements CHI2005

Design of Prefuse—Evaluation 2 Understand the learnability of prefuse for other programmers 8 participants Build applications and take interview CHI2005

Design of Prefuse—Evaluation 2 8 participants – 4 CS students 2 undergrads 2 grads – 3 professional programmers – 1 UI designer – 1 infovis expert CHI2005

Design of Prefuse—Evaluation 2 Give a tutorial Give a social network data file Three programming tasks (PC, Eclipse IDE, prefuse source code) – Static visualization – Refine visualization – Add interactivity and animation Open-ended interview CHI2005

Design of Prefuse—Evaluation 2 Positive reactions CHI2005

Summary Prefuse brings quick development and flexible and customized visualization Prefuse supports the design of 2D, what about 3D? Take use of it in Search Results Visualization Is it possible to map music into visualization using prefuse? CHI2005

The end Thank you! Any question? CHI2005