1. prefuse: A Toolkit for Interactive Information Visualization Heer, J., Card, S.K., Landay, J.A. Presented by Julia West

2. A familiar visualization…

3. Problems Not customized Need novel visualizations  Could write our own Choose a visualization Find/write algorithms for visualization and interaction Spend weeks coding  Could utilize existing visualization “widgets” Granularity at the level of the visualization Same problem!

4. Earlier Work Information Visualization Work TreeMapsBruks, M., Huizing, K., van Wijk, J.J. (2000) Cone TreesRobertson, G.G., Mackinlay, J.D., Card, S.K. (1991) Perspective WallsMackinlay, J.D., Robertson, G.G., Card, S.K. (1990) StarField displaysAhlberg, C. & Shneiderman, B. (1994) Hyperbolic treesLamping, J., Rao, R. (1996) DOITreesCard, S.K. & Nation, D (2002) SpaceTreesPlaisant, C., Grosjean, J., Bederson, B. (2002)

5. Earlier Work (continued) Selection, Transformation & Navigation Techniques Focus+context schemesFurnas, G.W. (1981) Space distortionLeung, Y.K. & Apperley, M.D. (1994) Point-of-interest navigationMackinlay, J.D., Card, S.K. & Robertson, G.G. (1990) Panning & zoomingIgarshi, T. & Hinckley, K. (2000); Perlin, K. & Fox, D. (1993) Infovis Frameworks Information Visualizer (IV)Card, S.K. Robertson, G.G. & Mackinlay, J.D. (1991)

6. Earlier Work (continued) Graph Drawing graphviz packagehttp://www.research.att.com/sw/tools/g raphviz Graph Visualization Framework (GVF)Marshall, M.S., Herman, I. & Melancon, G. (2001) PajekBatagelj, V. & Mrvar, A. (2003) Tom Sawyer softwarehttp://www.tomsawyer.com yWorks softwarehttp://www.yworks.com Similar products InfoVis toolkitFekete, J.D. (2004) XML toolkithttp://iv.slis.indiana.edu/sw/toolkit.html

7. Enter prefuse… Simplifies creation of visualizations Flexible interface  Multiple views  Transforms  Customization Time saver

8. Road-map Design of prefuse How to write applications with prefuse Sample Applications Usability Study

9. Toolkit Design

10. Data Abstract Data Interfaces  Unstructured data  Graph data  Tree data Entity type  Node  TreeNode  Edge Input/Output

11. Filtering

12. Visual Form VisualItems  Node  NodeItem  Edge  EdgeItem  TreeNode  AggregateItem ItemRegistry NodeItems EdgeItems ItemRegistry

13. Rendering VisualItems are drawn to screen Basic Shapes, edges, text, & images Many Renderers, many views RendererFactory getRenderer(VisualItem) Renderer render(Graphics2D, VisualItem) getBounds(VisualItem) locatePoint(Point2D, VisualItem)

14. Display Component Renders VisualItems to screen Provides user interface callbacks Supports tool tips, graphics transforms, on-screen text editing Data SetEntityAbstract Data Vis Filters View VisualItem ViewView Controllers Renderer / Display Vis

15. Actions Grouped into runnable ActionLists Filter Actions  Filtering process Assignment Actions  Visual Attributes Animator Actions  Interpolation of start & end values

16. Libraries

17. Writing Applications Load Data & Create ItemRegistry Create Renderers Create ActionLists  Filter & Display  Animate Create Display & Controls Add Display to window & run ActionList

18. Writing Cooler Applications Adding Force-Based Jitter Adding Overview, Panning & Zooming Adding Fisheye Distortion

19. Sample Applications DOITree Web Hierarchy Browser

20. Vizster Social networking visualization

21. Application Demos prefuse homepage  Force-directed demo Force-directed demo  Radial demo Radial demo  Distortion demo Distortion demo  Auto-zoom demo Auto-zoom demo

22. Usability Study 8 participants  4 CS students  3 professional programmers and/or UI designers  1 infovis expert Pretest: brief tutorial Windows PC with Eclipse IDE, prefuse source code, examples, & documentation “Think Aloud”

23. Usability Study continued Given social networking data file Tasks  Create a static visualization of data using random layout  Use layout technique of choice and implement color scheme  Add interactivity and animation

24. Usability Study Results All successfully created visualization 7/8 completed all tasks Problems with structuring data flow Naming issues API usage patterns – most help from examples, not documentation

25. Conclusion Easily create novel visualizations Problem  Data preparation Questions