sims 247: information visualization and presentation

1

SIMS 247: Information Visualization and Presentation

Software Architectures for Information VisualizationOct 17, 2005

2

infovis history

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

software architectures for infovis

• what tools should be provided? – (in-class brainstorm)

5

overview

• modeling visualizations• existing infrastructures• platform demos

– processing– prefuse

• administrivia

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

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

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

9

overview

• modeling visualizations• existing infrastructures• platform demos

– processing– prefuse

• administrivia

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

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

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

thinkingmachine 4

martinwattenberg

14

existing toolkitsinformation visualizer

jazz / piccolo infovis toolkit

graphviz / jung / pajek

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

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

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

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

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.

20

spacetree

datelens

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

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

degree-of-interest trees

25

vizster

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

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

28




filtering



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

29




filtering



DATA VISUAL FORM


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.

30




filtering



DATA VISUAL FORM


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.

31




filtering



DATA VISUAL FORM


User

renderingVIEW

prefuse implementationThe user (possibly you).

User interface controls allow direct interaction withvisualizations (e.g., dragging, brushing, focus selection)

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

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

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

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

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

building a visualization

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

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

40

selected applications

QuickTime™ and a decompressor

are needed to see this picture.

sims 247: information visualization and presentation

Documents