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