Dynamic Dynamic VisualizationVisualization

Dynamic Queries For Visual Information Seeking by Ben Shneiderman

Data Visualization Sliders by Stephen G. Eick

Presented by Yimeng Dou05-21-2002ydou@ics.uci.edu

OverviewOverview

Dynamic Queries Applies the principles of direct manipulation to the database environment

Data Visualization Sliders

Dynamic Query Dynamic Query ApproachApproach

Visual presentation of the query’s components

Visual presentation of results Rapid, incremental and reversible control Immediate and continuous feedback No need to learn a specific query language

to use dynamic query.

… rapid, animated, visual display of search results

Example 1: HomeFinder Example 1: HomeFinder SystemSystem

HomeFinderHomeFinder

Christopher Williamson's HomeFinder showed a map of Washington, DC and 1100 points of light indicating homes for sale.

Users could mark the workplace for both members of a couple and then adjust sliders to select circular areas of varying radii.

Other sliders selected number of bedrooms and cost, with buttons for air conditioning, garage, etc. Controlled experiments with benchmark tasks showed dramatic speed-ups in performance and high subjective satisfaction.

An Improvement To HomeFinderAn Improvement To HomeFinder

ProgramFinder plots the available programs on a map of Maryland.

Adjusting the controls updates the display which shows a dot for each program that matches. A click on a program provides more details and the press of a button generates the paperwork.

Example 2: Cancer RateExample 2: Cancer Rate

(Cervix cancer rates are color coded on the map. The year slider shows time trends. )

The other sliders allow interactive filtering of the gap according to the three chosen demographic parameters.

Example 3: Periodic Table

Periodic table with chemical symbols in red and six sliders for attributes such as atomic radius, ionization energy, and electronegativity.

As users move the sliders, the chemical symbols change to red showing the clusters, jumps, and gaps that chemists find fascinating.

A study with 18 chemistry students showed faster performance with use of a visual display (versus a simple textual list) and a visual input device (versus a form fillin box).

Example 3: Periodic TableExample 3: Periodic Table

Example 4: Tabular Example 4: Tabular DisplayDisplay

When there are no natural graphical displays for the output, dynamic queries can still be implemented with result sets shown in a traditional alphanumeric tabular display.

The sliders and buttons are created semi-automatically by the program depending on the values that exist in the imported ASCII database.

Display is updated only when the user releases the mouse button.

Tabular DisplayTabular Display

Example 5: Dynamic Query of Unix Example 5: Dynamic Query of Unix DirectoryDirectory

Sliders for size (in kilobytes) and age (in days) of files enabled 18 users to answer ten questions such as "How many files are younger than umcp_tai?"

The three versions of the program are:highlighting matches with colorhighlighting matches with asterisksdisplaying only the matching lines

In five of the tasks there was a statistically significant speed advantage for the Expand/contract interface.

Example 5: Dynamic Query of Unix Example 5: Dynamic Query of Unix DirectoryDirectory

Advantages Advantages

Visual presentation of query components Visual presentation of results Rapid, incremental and reversible actions Selection by pointing (not typing) Immediate and continuous feedback For data in which there is a known

relationship among variables, the dynamic queries interface is useful for training and education by exploration.

Where there is so much data, dynamic queries may help users to discover patterns, form and test hypotheses

DisadvantagesDisadvantages

Requirement for rapid performance in search algorithms and display strategies cannot be easily satisfied with current database management tools.

Application specific programming is needed to take the best advantage of dynamic query methods.

Current dynamic queries implement only simple queries that are conjunctions of disjunctions, plus range queries on numeric values.

Visually handicapped and blind users will have a more difficult time with these widgets and outputs

…stem largely from their poor match with current hardware and software systems

Research Directions (1)--Research Directions (1)--Database and display algorithms

For small database (main memory): array indexing, grid structures, quad trees and k-d trees.

Larger database (disk): R-trees, grid files, various B-trees.

Display algorithms which can update quickly. (Buckets adjusted to granularity of the slider)

Data compression methodsScreen management algorithms

Only repaint the area that is changedManipulation of the palette by color indexing

can be effective for irregularly shaped regions

Research Directions (2)--Research Directions (2)--User Interface Design

Use pictures and capitalize on the human visual system.

Appropriate coding of properties like size, position, shape and color, to reduce explicit selection.

Graphical display properties such as color

Auditory properties.No natural two-dimensional

representation of the data is in currently available widgets.

Needed: New WidgetsNeeded: New Widgets

Existing widgets are poorly matched with the needs of expert users. One possible solution: two dimensional input widgets. (Only one selecting is required to set two values, correct selections can be guaranteed).

Three and higher dimensional input widget may facilitate the exploration of complex relationships. One possibility: 3-D Mouse.

Ways of specifying alphanumeric fields. One possible solution: alphaslider.

How to specify complex boolean combinations of attributes. Example: filter/flow model.

Filter/Flow modelFilter/Flow model

Users can select from the set of attributes and get an appropriate filter widget

(type-in for interest areas, sliders for cost, and buttons for scholarships)

The widget is placed on the screen with flow lines showing ANDs (sequential flow) and ORs (parallel flows).

SummarySummary

The challenge now is to broaden the spectrum of applications by improved user interface design fast database search compression methods

It can become a general approach attached to every database system, spreadsheet, etc.

Research directions include: (1) database and display algorithms (2) user interface design.

Data Visualization Data Visualization SlidersSliders

Sliders provide a threshold bar within a scale that user can manipulate with a mouse to select a value.

The effectiveness of sliders may be increased by using the space inside the sliders asAn interactive color scaleA barplot for discrete dataA density plot for continuous

data

Sliders in Information Sliders in Information VisualizationVisualization

Double-edged slider with upper and lower thresholds on network maps.

Categorical slider on software display for selecting an arbitrary subset. (see next slide for an example)

Ahlberg and Shneiderman’s FilmFinder uses a suite of double-edged sliders.

Seesoft (Example of categorical Seesoft (Example of categorical slider)slider)

Lines corresponding to service-affecting messages (asserts, audits, peripheral interrupts, and prms) are shown using different colors (gray levels).

FilteringFiltering

It’s the idea underlying these applications.

Sliders are used to restrict the information portrayed on the screen, thereby pruning the visual clutter and enabling the analyst to see important underlying patterns.

Example: FrostExample: Frost

Improvements Upon Traditional Improvements Upon Traditional SlidersSliders

The space inside the slider is used as a color scale, thereby efficiently utilizing screen real estate.

The data values are shown as tick marks in a “rug plot” in versions A and B and as the bar lengths in version D.

The distribution of the data is shown as a density plot in version B and as the bar lengths in version D.

Selected or turned-on, regions are shown in colors and unselected or turned-off regions are in dark gray. (Similar to operating a paint program)

Summary Of Important IdeasSummary Of Important Ideas

Enabling a user to specify an arbitrary number of disconnected intervals while preserving the intuitive slider interface.

Using the space inside the slider as a color scale.

Interactively rebinding the colors either to the active bars or adjusting the color divisions.

Presenting the distribution of the data. Showing individual data values, either as tick

marks or as bar lengths. Moving between the representations under

user control, enabling the users to explore from several perspectives.

Linking sliders to the data they control suggests many natural and obvious extensions.