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.