1 SIMS 247: Information Visualization and Presentation Marti Hearst Nov 2 and Nov 7, 2005.
SIMS 247: Information Visualization and Presentation
description
Transcript of SIMS 247: Information Visualization and Presentation
![Page 1: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/1.jpg)
1
SIMS 247: Information Visualization and Presentation
Software Architectures for Information VisualizationOct 17, 2005
![Page 2: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/2.jpg)
2
infovis history
![Page 3: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/3.jpg)
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
![Page 4: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/4.jpg)
4
software architectures for infovis
• what tools should be provided? – (in-class brainstorm)
![Page 5: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/5.jpg)
5
overview
• modeling visualizations• existing infrastructures• platform demos
– processing– prefuse
• administrivia
![Page 6: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/6.jpg)
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
Data Visual Form
Data Transformations
Visual Mappings
View Transformations
Task
![Page 7: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/7.jpg)
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)
RawData
DataTables
VisualStructures
Views
Data Visual Form
DataTransformations
VisualMappings
ViewTransformations
Task
![Page 8: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/8.jpg)
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
RawData
DataTables
VisualStructures
Views
Data Visual Form
DataTransformations
VisualMappings
ViewTransformations
Task
![Page 9: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/9.jpg)
9
overview
• modeling visualizations• existing infrastructures• platform demos
– processing– prefuse
• administrivia
![Page 10: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/10.jpg)
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
![Page 11: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/11.jpg)
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
![Page 12: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/12.jpg)
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
![Page 13: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/13.jpg)
13
thinkingmachine 4
martinwattenberg
![Page 14: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/14.jpg)
14
existing toolkitsinformation visualizer
jazz / piccolo infovis toolkit
graphviz / jung / pajek
![Page 15: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/15.jpg)
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]
![Page 16: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/16.jpg)
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 Size Render
Visualization
+ + +
New LayoutOther Layout
![Page 17: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/17.jpg)
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?
![Page 18: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/18.jpg)
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
![Page 19: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/19.jpg)
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)
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.QuickTime™ and a
TIFF (LZW) decompressorare needed to see this picture.
![Page 20: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/20.jpg)
20
spacetree
datelens
![Page 21: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/21.jpg)
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
![Page 22: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/22.jpg)
22
![Page 23: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/23.jpg)
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
![Page 24: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/24.jpg)
24
degree-of-interest trees
![Page 25: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/25.jpg)
25
vizster
![Page 26: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/26.jpg)
26
infovis reference model
Abstract Data Visual Analogues
filtering
Display
DATA VISUAL FORM
User
renderingVIEW
• 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
![Page 27: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/27.jpg)
27
Filter Layout Color Size
Abstract DataNodes, Edges
Visual AnaloguesVisualItems in ItemRegistry
filtering
DisplayInteractive Display
Renderers ActionList RendererFactory
DATA VISUAL FORM
I/O Libraries UI Controls
User
renderingVIEW
prefuse implementation
![Page 28: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/28.jpg)
28
Filter Layout Color Size
Abstract DataNodes, Edges
Visual AnaloguesVisualItems in ItemRegistry
filtering
DisplayInteractive Display
Renderers ActionList RendererFactory
DATA VISUAL FORM
I/O Libraries
UI Controls
User
renderingVIEW
prefuse implementationData structures for structured
(graphs, trees) and unstructured data
Readers and Writers for data I/O
![Page 29: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/29.jpg)
29
Filter Layout Color Size
Abstract DataNodes, Edges
Visual AnaloguesVisualItems in ItemRegistry
filtering
DisplayInteractive Display
Renderers ActionList RendererFactory
DATA VISUAL FORM
I/O Libraries UI Controls
User
renderingVIEW
prefuse implementationAn ItemRegistry manages all visual items,maintains caches and rendering queues.
Composable lists of Actions perform data processing:filtering, layout, color, size, font, etc. ActionLists arerun in sequence by a generalized ActivityManager.
![Page 30: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/30.jpg)
30
Filter Layout Color Size
Abstract DataNodes, Edges
Visual AnaloguesVisualItems in ItemRegistry
filtering
DisplayInteractive Display
Renderers ActionList RendererFactory
DATA VISUAL FORM
I/O Libraries UI Controls
User
renderingVIEW
prefuse implementationDisplays present the visualization and support interface callbacks and graphics transforms (e.g., pan and zoom).
A RendererFactory assigns Renderers to visualitems for drawing and bounds calculation.
![Page 31: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/31.jpg)
31
Filter Layout Color Size
Abstract DataNodes, Edges
Visual AnaloguesVisualItems in ItemRegistry
filtering
DisplayInteractive Display
Renderers ActionList RendererFactory
DATA VISUAL FORM
I/O Libraries UI Controls
User
renderingVIEW
prefuse implementationThe user (possibly you).
User interface controls allow direct interaction withvisualizations (e.g., dragging, brushing, focus selection)
![Page 32: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/32.jpg)
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 componentsActions Renderers
Controls• Focus, Drag, Select• Highlight, Pan, Zoom
Extras• Physics simulation• Integrated search• Event logging and playback
![Page 33: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/33.jpg)
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
![Page 34: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/34.jpg)
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
![Page 35: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/35.jpg)
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?
![Page 36: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/36.jpg)
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.
![Page 37: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/37.jpg)
37
building a visualization
![Page 38: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/38.jpg)
38
building a visualization// create graph and registryGraph g = new XMLGraphReader().loadGraph(datafile);ItemRegistry registry = new ItemRegistry(g); // intialize renderersRenderer nodeR = new TextItemRenderer();Renderer edgeR = new DefaultEdgeRenderer();registry.setRendererFactory( new DefaultRendererFactory(nodeR, edgeR)); // initialize action listsActionList 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 displayDisplay disp = new Display(registry);disp.setSize(500,500);disp.addControlListener(new DragControl());disp.addControlListener(new FocusControl(layout));
// initialize enclosing window frameJFrame frame = new JFrame("prefuse example");frame.getContentPane().add(disp);frame.pack(); frame.setVisible(true); // run the layout listlayout.runNow();
initialize data
set renderers
filter, layout, color
animated transitions
initialize display
add display to windowstart it running
![Page 39: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/39.jpg)
39
extending a visualizationForceSimulator 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());
![Page 40: SIMS 247: Information Visualization and Presentation](https://reader035.fdocuments.in/reader035/viewer/2022062521/56814d5e550346895dbaa14e/html5/thumbnails/40.jpg)
40
selected applications
QuickTime™ and a decompressor
are needed to see this picture.