Metavisualization of Dynamic Queries

Christopher E. Weaver and Miron Livny

Computer Science Department

University of Wisconsin–Madison

{weaver,miron}@cs.wisc.edu

2

Overview

n A metavisualization is a visualization of anothervisualization.

n Our focus is metavisualization of interactive structure,particularly linking in dynamic query visualizations.

n Improvise is an editor and browser for dynamic queryvisualization and metavisualization.

n This poster describes how we have used Improvise tometavisualize DEVise visualizations.

3

Improvise

n An end-user editor and browser for dynamic queryvisualization and metavisualization

n Interactive editing of views, links, data, and layout

n Serialization of (meta)visualizations to XML documents

n Platform-neutral Java 1.1 and up (supports translucencyeffects in 1.2 and higher)

n Metavisualization support in two forms:– Standalone metavisualization of other visualizations.

– Integrated metavisualization of its own running visualizations.

n Linking mechanisms– Live Properties. Direct links using shared objects.

– Dynamic Query Expressions. Indirect links using data projection.

4

Live Properties

n Components– Controls. Views, sliders, and other widgets.– Live properties. Strongly-typed ports owned by controls.– Variables. Manage a single strongly-typed, mutable value.

n Direct Linking– Each live property binds to at most one variable.– The value of a live property is the current value of its variable.– The live property is notified whenever its variable changes.– The live property propagates changes to its parent control.

n Features– Like Model-View-Controller framework with many small models.– Independent implementation of controls (no knowledge of other

controls required).– Clean separation of rendering (view) from interaction (controller)

5

Dynamic Query Expressions

n Based on the relational database model

n Views filter then project records into graphical attributes.

n Projections/filters consist of expressions defined as treesof {function, attribute, value, variable} operators.– Function operators perform calculations on subexpressions.

– Attribute operators evaluate to the value of a record field.

– Value operators are user-editable, type-specific constants.

– Variable operators bind to variables to allow indirect linking.

n Indirect Linking– Can occur when a variable has a projection or filter as its value.

– The variable is notified of changes to variables that are bound tovariable operators in its projection/filter expression(s).

– The variable notifies its bound live properties of the change.

6

Views and Links in DEVise

n Views are scatter plots– Display visual queries on data

– Map data records into graphical attributes (shapes)

n Links modify visual queries by directly connecting views:– Visual Link. Constrains two views to render identical X and/or Y

ranges.

– Record Link. Renders in a destination view only those recordsthat are visible in a source view.

– Cursor. A selection box that appears in one view and has thesame X and Y ranges as some other view.

– Pile. A group of visual links in which the linked views happen tobe stacked on the screen.

n Example visualization: ranked news articles

7

DEVise Visualization of Ranked News Articles

8

Metavisualizing View Layout and Link Structure

n Export the DEVise visualization as data

n Visualize this data in Improvise like any other data

n Build the metavisualization– Import data [panel 10]

– Edit projections and filters [panels 11, 13, 15]

– Create and layout views and other controls [panels 12, 14, 16]

n Metavisualize other DEVise visualizations– Import their data into the existing metavisualization

– Flip through the imported data sets as desired

9

DEVise Metadata

String "Name"String "Title"String "Parent View"Color "Foreground Color"Color "Background Color"String "Pile"int "Dimensions"String "TData Name"int "X"int "Y"int "Width"int "Height"double "Filter X Lo"double "Filter X Hi"double "Filter Y Lo"double "Filter Y Hi"

String "Name"String "Type"String "Source View"String "Destination View"

Views Cursors LinksString "Name"String "Type"String "Source View"String "Destination View"boolean "Use Grid"int "Grid X"int "Grid Y"boolean "Edge Grid"Color "Color"

n Three data sets written to XML from running DEVise visualization– Views: name, coloring, bounding box, region displayed

– Cursors: name, type, views linked, grid info, color

– Links: name, type, views linked

n Cursors and Links data reference View "Name" (primary key).

10

n Projection builds arrow glyphs, mapping link type to color

n Used to draw arrows in top layer of the "Links" scatterplot (next)

11

12

n Filter uses boolean variables (bound to checkboxes) to determinevisibility of each link type

n Used to show/hide links in the "Links" scatterplot (next)

13

Checkboxes

14

n Extension of previous filter uses two range variables (bound toselection portal) to determine link visibility from view bounds

n Used to show/hide views/links in tables and graph (next)

15

Selection portal

16

Metavisualizing Link Structure with Graphs

n Shows link structure independent of view location

n Clusters groups of nodes visually using packs

n Projects and filters nodes/links/packs interactively

n Allows interactive or algorithmic node layout

n Reveals common composite structures, such as "recordcursors" (linked triples, right)

17

Exploring DEVise Links: Visual Links

n We used metavisualization to explore DEVise link structure– Visual links are a transitive closure of symmetric connections, as

represented in DEVise (left).– Treat transitive closure of links as single entity (middle left).– Recognize semantics of visual links: X and/or Y cartesian ranges are

the same in all views (middle right).– Think of visual links as the sharing of independent ranges.– Views bind to range variables, as in Improvise (right).

n Real process used similar graphs (custom coded and hand-drawn).n Other DEVise links can be reproduced in Improvise (next)

18

Exploring DEVise Links: Cursors, Record Links

n Cursor (top). A portal (P) inside a view (V1) is drawn relative to theview's X/Y ranges (CXR, CYR). The portal shares different X/Yranges (XR, YR) with another view (V2). (Containment is shown asa dotted arrow.)

n Record Link (bottom). A view (V2) draws only records inside rangesselected by another view (V1), using a filter (f) to check containment.

19

Summary

n Metavisualization can be achieved using existingdynamic query visualization techniques.

n Using metavisualization, we have been able to gain abetter understanding of linking in DEVise. Linking inImprovise is an offshoot of this understanding.

n We believe metavisualization could be used to helpusers at all skill levels to analyze, design, and browse awide variety of dynamic query visualizations.