prefuse : A Toolkit for Interactive Information Visualization
description
Transcript of prefuse : A Toolkit for Interactive Information Visualization
![Page 1: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/1.jpg)
CHI2005
prefuse: A Toolkit for Interactive Information Visualization
Jeffrey HeerStuart K. Card
James A. Landay
![Page 2: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/2.jpg)
CHI2005
Outline
• Motivation• Introduction• Design of Prefuse• Build Application with Prefuse• Evaluation• Summary
![Page 3: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/3.jpg)
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
![Page 4: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/4.jpg)
CHI2005
Motivation
• Previous work– TreeMaps– Cone Trees– Hyperbolic Trees– DOITrees– SpaceTrees– Perspective Walls– StarField displays
![Page 5: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/5.jpg)
CHI2005
TreeMap
![Page 6: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/6.jpg)
CHI2005
Hyperbolic Trees
![Page 7: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/7.jpg)
CHI2005
DOITree
![Page 8: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/8.jpg)
CHI2005
SpaceTrees
![Page 9: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/9.jpg)
CHI2005
Perspective Walls
![Page 10: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/10.jpg)
CHI2005
StarField displays
![Page 11: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/11.jpg)
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
![Page 12: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/12.jpg)
CHI2005
Motivation
• Need a toolkit
– Diversity customization support– Handle complex layout and graphics– Animation handling– Introduce new functionalities– Reusable
![Page 13: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/13.jpg)
CHI2005
Outline
• Motivation• Introduction• Design of Prefuse• Build Application with Prefuse• Evaluation• Summary
![Page 14: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/14.jpg)
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
![Page 15: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/15.jpg)
CHI2005
Outline
• Motivation• Introduction• Design of Prefuse• Build Application with Prefuse• Evaluation• Summary
![Page 16: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/16.jpg)
CHI2005
Design of Prefuse
• Information Visualization Reference Model
– Abstract data representation– Map data into a visualizable form– Process the form– Map into interactive displays
![Page 17: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/17.jpg)
CHI2005
Design of Prefuse
![Page 18: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/18.jpg)
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
![Page 19: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/19.jpg)
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
![Page 20: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/20.jpg)
CHI2005
Design of Prefuse—Visual Items
• Three types of VisualItems
– NodeItems
– EdgeItems
– AggregateItems
![Page 21: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/21.jpg)
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
![Page 22: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/22.jpg)
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
![Page 23: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/23.jpg)
CHI2005
Design of Prefuse—Actions
• Actions Types
– Filter
– Assignment
– Animator
![Page 24: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/24.jpg)
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
![Page 25: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/25.jpg)
CHI2005
Design of Prefuse—ActionLists
• Example
![Page 26: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/26.jpg)
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
![Page 27: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/27.jpg)
CHI2005
Design of Prefuse—Display
• Perform presentation of visualized data
• Display the contents of ItemRegistry
• Subclass JComponent
• Interaction support (ControlListener)
![Page 28: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/28.jpg)
CHI2005
Design of Prefuse—Library
• Layout and Distortion• Force Simulation• Interactive Controls• Color Maps• Integrated Search• Event Logging
![Page 29: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/29.jpg)
CHI2005
Design of Prefuse—Sample Application
![Page 30: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/30.jpg)
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
![Page 31: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/31.jpg)
CHI2005
Design of Prefuse—Evaluation 2
• Understand the learnability of prefuse for other programmers
• 8 participants
• Build applications and take interview
![Page 32: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/32.jpg)
CHI2005
Design of Prefuse—Evaluation 2
• 8 participants– 4 CS students• 2 undergrads• 2 grads
– 3 professional programmers– 1 UI designer– 1 infovis expert
![Page 33: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/33.jpg)
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
![Page 34: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/34.jpg)
CHI2005
Design of Prefuse—Evaluation 2
• Positive reactions
![Page 35: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/35.jpg)
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?
![Page 36: prefuse : A Toolkit for Interactive Information Visualization](https://reader036.fdocuments.us/reader036/viewer/2022062812/56816455550346895dd6227b/html5/thumbnails/36.jpg)
CHI2005
The end
Thank you!
Any question?