prefuse A Toolkit for Interactive Information Visualization Heer

  • Slides: 25
Download presentation
prefuse: A Toolkit for Interactive Information Visualization Heer, J. , Card, S. K. ,

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

A familiar visualization…

A familiar visualization…

Problems l Not customized l Need novel visualizations ¡ Could write our own Choose

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

Earlier Work Information Visualization Work Tree. Maps Bruks, M. , Huizing, K. , van

Earlier Work Information Visualization Work Tree. Maps Bruks, M. , Huizing, K. , van Wijk, J. J. (2000) Cone Trees Robertson, G. G. , Mackinlay, J. D. , Card, S. K. (1991) Perspective Walls Mackinlay, J. D. , Robertson, G. G. , Card, S. K. (1990) Star. Field displays Ahlberg, C. & Shneiderman, B. (1994) Hyperbolic trees Lamping, J. , Rao, R. (1996) DOITrees Card, S. K. & Nation, D (2002) Space. Trees Plaisant, C. , Grosjean, J. , Bederson, B. (2002)

Earlier Work (continued) Selection, Transformation & Navigation Techniques Focus+context schemes Furnas, G. W. (1981)

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

Earlier Work (continued) Graph Drawing graphviz package http: //www. research. att. com/sw/tools/g raphviz Graph

Earlier Work (continued) Graph Drawing graphviz package http: //www. research. att. com/sw/tools/g raphviz Graph Visualization Framework (GVF) Marshall, M. S. , Herman, I. & Melancon, G. (2001) Pajek Batagelj, V. & Mrvar, A. (2003) Tom Sawyer software http: //www. tomsawyer. com y. Works software http: //www. yworks. com Similar products Info. Vis toolkit Fekete, J. D. (2004) XML toolkit http: //iv. slis. indiana. edu/sw/toolkit. html

Enter prefuse… l Simplifies creation of visualizations l Flexible interface ¡ Multiple views ¡

Enter prefuse… l Simplifies creation of visualizations l Flexible interface ¡ Multiple views ¡ Transforms ¡ Customization l Time saver

Road-map l Design of prefuse l How to write applications with prefuse l Sample

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

Toolkit Design

Toolkit Design

Data l Abstract Data Interfaces ¡ ¡ ¡ l Entity type ¡ ¡ ¡

Data l Abstract Data Interfaces ¡ ¡ ¡ l Entity type ¡ ¡ ¡ l Unstructured data Graph data Tree data Node Tree. Node Edge Input/Output

Filtering

Filtering

Visual Form l Visual. Items ¡ Node. Item ¡ Edge. Item ¡ Tree. Node

Visual Form l Visual. Items ¡ Node. Item ¡ Edge. Item ¡ Tree. Node Aggregate. Item. Registry Node. Items Edge. Items Item. Registry

Rendering l Visual. Items are drawn to screen l Basic Shapes, edges, text, &

Rendering l Visual. Items are drawn to screen l Basic Shapes, edges, text, & images l Many Renderers, many views Renderer. Factory get. Renderer(Visual. Item) Renderer render(Graphics 2 D, Visual. Item) get. Bounds(Visual. Item) locate. Point(Point 2 D, Visual. Item)

Display Component Renders Visual. Items Data Set to screen Vis Vis l Provides user

Display Component Renders Visual. Items Data Set to screen Vis Vis l Provides user View interface callbacks l Supports tool tips, graphics transforms, on-screen text editing l Abstract Data Entity Filters Visual. Item View Controllers Renderer / Display

Actions l Grouped into runnable Action. Lists l Filter Actions ¡ Filtering process l

Actions l Grouped into runnable Action. Lists l Filter Actions ¡ Filtering process l Assignment ¡ Visual Actions Attributes l Animator Actions ¡ Interpolation of start & end values

Libraries

Libraries

Writing Applications Load Data & Create Item. Registry l Create Renderers l Create Action.

Writing Applications Load Data & Create Item. Registry l Create Renderers l Create Action. Lists l ¡ ¡ Filter & Display Animate Create Display & Controls l Add Display to window & run Action. List l

Writing Cooler Applications l Adding Force-Based Jitter l Adding Overview, Panning & Zooming l

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

Sample Applications l DOITree Web Hierarchy Browser

Sample Applications l DOITree Web Hierarchy Browser

Vizster l Social networking visualization

Vizster l Social networking visualization

Application Demos l prefuse homepage ¡ Force-directed ¡ Radial demo ¡ Distortion demo ¡

Application Demos l prefuse homepage ¡ Force-directed ¡ Radial demo ¡ Distortion demo ¡ Auto-zoom demo

Usability Study l 8 participants ¡ 4 CS students ¡ 3 professional programmers and/or

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

Usability Study continued l Given social networking data file l Tasks ¡ Create a

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

Usability Study Results l All successfully created visualization l 7/8 completed all tasks l

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

Conclusion l Easily create novel visualizations l Problem ¡ Data preparation l Questions

Conclusion l Easily create novel visualizations l Problem ¡ Data preparation l Questions