SIMS 247 Information Visualization and Presentation Software Architectures

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

infovis history 2

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 3

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

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

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

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) 7

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 3 D coordinates to tree elements (layout), assign colors, fonts. Set lighting. • Visual Structures: 3 D model of tree – View Transformations: Camera placement; animation between tree configurations • View: Rendered, interactive visualization • Interaction: Selection of new focus node 8

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

building from scratch • graphics / rendering interface – draw. Line, draw. Rect, draw. Text, draw. Image – 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 10

Common Platforms • flash – – – 2 D Vector Graphics engine Supports drawing, animation, transforms Available on most people’s computers More advanced work by coding in Action. Script 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 11

processing [Fry & Reas] • a simplified java-based graphics library – simplifies programming of 2 D + 3 D 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 12

thinking machine 4 martin wattenberg 13

existing toolkits information visualizer jazz / piccolo graphviz / jung / pajek infovis toolkit 14

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

a compositional approach Visualization Layout + Color + Size + Render Other Layout New Layout • • • 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] 16

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 nonprogrammers could build visualizations? 17

Piccolo • user interface toolkit for zoomable interfaces – – Descended from Pad, Pad++, Jazz Extensible 2 D 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 18

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

datelens spacetree 20

infovis toolkit [Fekete 04] • 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 21

22

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 23

degree-of-interest trees 24

vizster 25

infovis reference model DATA Abstract Data • filtering VISUAL FORM rendering Visual Analogues VIEW Display User 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 26

prefuse implementation DATA filtering VISUAL FORM rendering VIEW Abstract Data Visual Analogues Display Nodes, Edges Visual. Items in Item. Registry Interactive Display I/O Libraries Action. List Filter Layout Color Size Renderers Renderer. Factory User UI Controls 27

prefuse implementation Data structures for structured (graphs, trees) and unstructured data DATA filtering VISUAL FORM rendering VIEW Abstract Data Visual Analogues Display Nodes, Edges Visual. Items in Item. Registry Interactive Display I/O Libraries Action. List Filter Layout Color Size Renderers Renderer. Factory User UI Controls Readers and Writers for data I/O 28

prefuse implementation An Item. Registry manages all visual items, maintains caches and rendering queues. DATA filtering VISUAL FORM rendering VIEW Abstract Data Visual Analogues Display Nodes, Edges Visual. Items in Item. Registry Interactive Display I/O Libraries Action. List Filter Layout Color Size Renderers Renderer. Factory User UI Controls Composable lists of Actions perform data processing: filtering, layout, color, size, font, etc. Action. Lists are run in sequence by a generalized Activity. Manager. 29

prefuse implementation Displays present the visualization and support interface callbacks and graphics transforms (e. g. , pan and zoom). DATA filtering VISUAL FORM rendering VIEW Abstract Data Visual Analogues Display Nodes, Edges Visual. Items in Item. Registry Interactive Display I/O Libraries Action. List Filter Layout Color Size Renderers Renderer. Factory User UI Controls A Renderer. Factory assigns Renderers to visual items for drawing and bounds calculation. 30

prefuse implementation The user (possibly you). DATA filtering VISUAL FORM rendering VIEW Abstract Data Visual Analogues Display Nodes, Edges Visual. Items in Item. Registry Interactive Display I/O Libraries Action. List Filter Layout Color Size Renderers Renderer. Factory User UI Controls User interface controls allow direct interaction with visualizations (e. g. , dragging, brushing, focus selection) 31

prefuse library components Actions 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 Renderers Controls • Focus, Drag, Select • Highlight, Pan, Zoom Extras • Physics simulation • Integrated search • Event logging and playback 32

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 33

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 34

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

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

building a visualization 37

building a visualization // create graph and registry Graph g = new XMLGraph. Reader(). load. Graph(datafile); Item. Registry registry = new Item. Registry(g); initialize data // intialize renderers Renderer node. R = new Text. Item. Renderer(); Renderer edge. R = new Default. Edge. Renderer(); registry. set. Renderer. Factory( new Default. Renderer. Factory(node. R, edge. R)); set renderers // initialize action lists Action. List layout = new Action. List(registry); layout. add(new Tree. Filter(true)); layout. add(new Radial. Tree. Layout()); layout. add(new Color. Function()); Action. List animate = new Action. List(registry, 1500); animate. set. Pacing. Function(new Slow. In. Slow. Out. Pacer()); animate. add(new Polar. Location. Animator()); animate. add(new Color. Animator()); animate. add(new Repaint. Action()); animate. always. Run. After(layout); // initialize display Display disp = new Display(registry); disp. set. Size(500, 500); disp. add. Control. Listener(new Drag. Control()); disp. add. Control. Listener(new Focus. Control(layout)); // initialize enclosing window frame JFrame frame = new JFrame("prefuse example"); frame. get. Content. Pane(). add(disp); frame. pack(); frame. set. Visible(true); // run the layout list layout. run. Now(); filter, layout, color animated transitions initialize display add display to window start it running 38

extending a visualization Force. Simulator fsim = new Force. Simulator(); fsim. add. Force(new NBody. Force(-0. 1 f, 15 f, 0. 9 f)); fsim. add. Force(new Drag. Force()); Action. List forces = new Action. List(registry, 1000); forces. add(new Force. Directed. Layout(fsim, true)); forces. add(new Repaint. Action()); forces. always. Run. After(animate); Display overview = new Display(registry); overview. set. Border( Border. Factory. create. Line. Border(Color. BLACK, 1)); overview. set. Size(50, 50); overview. zoom(new Point 2 D. Float(0, 0), 0. 1); display. add(overview); display. add. Control. Listener(new Pan. Control()); display. add. Control. Listener(new Zoom. Control()); add force-based jitter add overview, pan, and zoom 39

selected applications 40