prefuse : A Toolkit for Interactive Information Visualization

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

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

3. 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

4. Motivation • Previous work • TreeMaps • Cone Trees • Hyperbolic Trees • DOITrees • SpaceTrees • Perspective Walls • StarField displays CHI2005

5. TreeMap CHI2005

6. Hyperbolic Trees CHI2005

7. DOITree CHI2005

8. SpaceTrees CHI2005

9. Perspective Walls CHI2005

10. StarField displays CHI2005

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

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

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

14. 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

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

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

17. Design of Prefuse CHI2005

18. 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

19. 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

20. Design of Prefuse—Visual Items • Three types of VisualItems • NodeItems • EdgeItems • AggregateItems CHI2005

21. 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

22. 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

23. Design of Prefuse—Actions • Actions Types • Filter • Assignment • Animator CHI2005

24. 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

25. Design of Prefuse—ActionLists • Example CHI2005

26. 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

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

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

29. Design of Prefuse—Sample Application CHI2005

30. 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

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

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

33. 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

34. Design of Prefuse—Evaluation 2 • Positive reactions CHI2005

35. 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

36. The end Thank you! Any question? CHI2005