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's InfoVis toolkit – 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