CHI2005

prefuse: A Toolkit for Interactive Information Visualization

Jeffrey HeerStuart 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?