1. 1 SIMS 247: Information Visualization and Presentation Software Architectures for Information Visualization Oct 17, 2005

2. 2 infovis history

3. 3 interactive tasks [Shneiderman] Overview –Get an overview of the collection Zoom –Zoom in on items of interest Filter –Remove uninteresting items Details on demand –Select items and get details Relate –View relationships between items History –Keep a history of actions for undo, replay, refinement Extract –Make subcollections

4. 4 software architectures for infovis what tools should be provided? –(in-class brainstorm)

5. 5 overview modeling visualizations existing infrastructures platform demos –processing –prefuse administrivia

6. 6 infovis reference model Data Transformations –Mapping raw data into an organization fit for visualization Visual Mappings –Encoding abstract data into a visual representation View Transformations –Changing the view or perspective onto the visual representation User interaction can feed back into any level Raw Data Data Tables Visual Structures Views DataVisual Form Data Transformations Visual Mappings View Transformations Task

7. 7 reference model examples Visual mappings –Layout (assigning x,y position) –Size, Shape, Color, Font, etc… View Transformations –Navigation: Panning and Zooming –Animation –Visual Distortion (e.g., fisheye lens)

8. 8 apply the model: cone trees Raw Data: File system directories –Data Transformations: Traverse file system subtree Data Tables: Parsed/extracted directory tree –Visual Mappings: Assign 3D coordinates to tree elements (layout), assign colors, fonts. Set lighting. Visual Structures: 3D model of tree –View Transformations: Camera placement; animation between tree configurations View: Rendered, interactive visualization Interaction: Selection of new focus node

9. 9 overview modeling visualizations existing infrastructures platform demos –processing –prefuse administrivia

10. 10 building from scratch graphics / rendering interface –drawLine, drawRect, drawText, drawImage –transformations (e.g., scale transform for zooming) interaction system –callbacks to process mouse and keyboard events data and geometry representations –how is the data modeled and manipulated? –how are visual items modeled? many different approaches available for facilitating these aspects

11. 11 Common Platforms flash –2D Vector Graphics engine –Supports drawing, animation, transforms –Available on most people’s computers –More advanced work by coding in ActionScript –Supports data loading from network using XML HTML/CSS/Javascript (AJAX) –Runs right in the web browser –Somewhat messy programming model –For visualization, issues with scale –Difficult to implement advanced visual applications

12. 12 processing [Fry & Reas] a simplified java-based graphics library –simplifies programming of 2D + 3D graphics –intended to lower threshold for programming visual applications –includes an integrated development environment using a sketchbook metaphor, exports to applets –active user community, many extensions and examples are available online connection to infovis –does not currently support infovis with any high-level abstractions –very useful for prototyping ideas, or as an underlying graphics platform http://processing.org

13. 13 thinking machine 4 martin wattenberg

14. 14 existing toolkits information visualizer jazz / piccoloinfovis toolkit graphviz / jung / pajek

15. 15 a hierarchical approach Visualization Layout Render New Visualization Layout (override) widget hierarchies extension by subclassing typing is static often can’t decompose visualizations into compositions of basic techniques monolithic toolkits –those that primarily use compile-time inheritance to extend functionality –[Bederson et al]

16. 16 a compositional approach Chain together desired components Extend/replace techniques directly Directly add new components (or lists of components) to customize visualizations Enables dynamic changes in composition polylithic toolkits –those that primarily use run-time composition to extend functionality [Bederson et al] Layout Color SizeRender Visualization +++ New Layout Other Layout

17. 17 design trade-offs hierarchical model cited as easier for programmers –fits existing programming models well –less code for common cases compositional model provides more flexibility and dynamic behavior –easier to add and extend behaviors –vital for prototyping novel visualizations what are the implications for systems by which non- programmers could build visualizations?

18. 18 Piccolo user interface toolkit for zoomable interfaces –Descended from Pad, Pad++, Jazz –Extensible 2D Visual Objects (text,shapes,images) –Support for Zooming and Animation –Versions for Java, C#, and Pocket C# connection to infovis –very popular and robust platform for building your “geometry” and view tiers. –does not provide high-level visualization abstractions http://www.cs.umd.edu/hcil/piccolo

19. 19 Authoring Piccolo Applications structure visual items in a scenegraph create custom visual items through compositing or subclassing existing items write interaction code (e.g., mouse listeners)

20. 20 spacetree datelens

21. 21 infovis toolkit [Fekete04] extensible collection of infovis ‘widgets’ –scatterplot, treemaps, graph visualizations, etc unified data model, similar to database general interactive components –dynamic queries, distortion lenses, excentric label missing a dedicated “geometry” tier –underlying data and visual abstraction interleaved http://infovis.sourceforge.net

22. 22

23. 23 prefuse User interface toolkit for writing highly interactive infovis applications (in Java) Supports node-link diagrams, containment diagrams, collections, scatterplots, timelines… Fine-grained component-based design, rooted in theoretical model for infovis http://prefuse.sourceforge.net

24. 24 degree-of-interest trees

25. 25 vizster

26. 26 infovis reference model Abstract DataVisual Analogues filtering Display DATAVISUAL FORM User rendering VIEW Separation of data and visual items –Enables filtering and transformation Separation of visual items and rendering –Enables dynamic control of appearance (e.g., semantic zooming) and graphics transforms User interaction can feed back into any level

27. 27 FilterLayoutColorSize Abstract Data Nodes, Edges Visual Analogues VisualItems in ItemRegistry filtering Display Interactive Display Renderers ActionList RendererFactory DATAVISUAL FORM I/O Libraries UI Controls User rendering VIEW prefuse implementation

28. 28 FilterLayoutColorSize Abstract Data Nodes, Edges Visual Analogues VisualItems in ItemRegistry filtering Display Interactive Display Renderers ActionList RendererFactory DATAVISUAL FORM I/O Libraries UI Controls User rendering VIEW prefuse implementation Data structures for structured (graphs, trees) and unstructured data Readers and Writers for data I/O

29. 29 FilterLayoutColorSize Abstract Data Nodes, Edges Visual Analogues VisualItems in ItemRegistry filtering Display Interactive Display Renderers ActionList RendererFactory DATAVISUAL FORM I/O Libraries UI Controls User rendering VIEW prefuse implementation An ItemRegistry manages all visual items, maintains caches and rendering queues. Composable lists of Actions perform data processing: filtering, layout, color, size, font, etc. ActionLists are run in sequence by a generalized ActivityManager.

30. 30 FilterLayoutColorSize Abstract Data Nodes, Edges Visual Analogues VisualItems in ItemRegistry filtering Display Interactive Display Renderers ActionList RendererFactory DATAVISUAL FORM I/O Libraries UI Controls User rendering VIEW prefuse implementation Displays present the visualization and support interface callbacks and graphics transforms (e.g., pan and zoom). A RendererFactory assigns Renderers to visual items for drawing and bounds calculation.

31. 31 FilterLayoutColorSize Abstract Data Nodes, Edges Visual Analogues VisualItems in ItemRegistry filtering Display Interactive Display Renderers ActionList RendererFactory DATAVISUAL FORM I/O Libraries UI Controls User rendering VIEW prefuse implementation The user (possibly you). User interface controls allow direct interaction with visualizations (e.g., dragging, brushing, focus selection)

32. 32 Filters - graph, tree, fisheyes, … Assignment - color, size, font, … Layout - random, circle, treemap, outline, radial, force-directed… Distortion - bifocal, graphical fisheye Animators - linear location, polar location, color, font, size prefuse library components Actions Renderers Controls Focus, Drag, Select Highlight, Pan, Zoom Extras Physics simulation Integrated search Event logging and playback

33. 33 evaluation - usability study qualitative usability study of the prefuse API 8 participants –4 compsci students (2 grad, 2 undergrad) –3 professional programmers / ui designers –1 infovis expert 3 tasks, given a network dataset: –Create a static visualization with random layout –Apply layout and some form of color mapping –Add animation or interactivity study experience –20 minute tutorial, read through reference handout and perform code walkthrough of a demo –1 hour to work on tasks using think-aloud protocol, sessions were video-taped –post-study interview, audio-recorded

34. 34 usability study - results 7/8 completed every task –Overall reactions highly positive Issues uncovered –Difficulties with filters + data transformation –Misleading naming conventions General observations –Copy-and-paste bricolage –Minimal use of provided documentation

35. 35 future directions refinement of existing models –integration of advanced data modeling with visualization architecture –richer component libraries –visualization “export” features –(all have been developed in different projects) tools for non-programmers –declarative construction of visualizations –Spotfire, Tableau, and others allow this at one level –how best to extend to richer, more nuanced design?

36. 36 administrivia Any issues with Assignment 2? Next assignment (project proposal) is online. Please send in your Tableau histories! Next time: begin section on visualizing specific data types. First up: temporal data.

37. 37 building a visualization

38. 38 building a visualization // create graph and registry Graph g = new XMLGraphReader().loadGraph(datafile); ItemRegistry registry = new ItemRegistry(g); // intialize renderers Renderer nodeR = new TextItemRenderer(); Renderer edgeR = new DefaultEdgeRenderer(); registry.setRendererFactory( new DefaultRendererFactory(nodeR, edgeR)); // initialize action lists ActionList layout = new ActionList(registry); layout.add(new TreeFilter(true)); layout.add(new RadialTreeLayout()); layout.add(new ColorFunction()); ActionList animate = new ActionList(registry,1500); animate.setPacingFunction(new SlowInSlowOutPacer()); animate.add(new PolarLocationAnimator()); animate.add(new ColorAnimator()); animate.add(new RepaintAction()); animate.alwaysRunAfter(layout); // initialize display Display disp = new Display(registry); disp.setSize(500,500); disp.addControlListener(new DragControl()); disp.addControlListener(new FocusControl(layout)); // initialize enclosing window frame JFrame frame = new JFrame("prefuse example"); frame.getContentPane().add(disp); frame.pack(); frame.setVisible(true); // run the layout list layout.runNow(); initialize data set renderers filter, layout, color animated transitions initialize display add display to window start it running

39. 39 extending a visualization ForceSimulator fsim = new ForceSimulator(); fsim.addForce(new NBodyForce(-0.1f, 15f, 0.9f)); fsim.addForce(new DragForce()); ActionList forces = new ActionList(registry, 1000); forces.add(new ForceDirectedLayout(fsim, true)); forces.add(new RepaintAction()); forces.alwaysRunAfter(animate); add force-based jitter add overview, pan, and zoom Display overview = new Display(registry); overview.setBorder( BorderFactory.createLineBorder(Color.BLACK, 1)); overview.setSize(50,50); overview.zoom(new Point2D.Float(0,0),0.1); display.add(overview); display.addControlListener(new PanControl()); display.addControlListener(new ZoomControl());

40. 40 selected applications