Dynamic Visualization

1. Dynamic Visualization • Dynamic Queries For Visual Information Seeking by Ben Shneiderman • Data Visualization Sliders by Stephen G. Eick • Presented by Yimeng Dou • 05-21-2002 • ydou@ics.uci.edu

2. Overview • Dynamic Queries Applies the principles of direct manipulation to the database environment • Data Visualization Sliders

3. Dynamic Query Approach … rapid, animated, visual display of search results • 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.

4. Example 1: HomeFinder System

5. HomeFinder • 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.

6. An 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 moredetails and the press of a button generates the paperwork.

7. Example 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.

8. 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).

9. Example 3: Periodic Table

10. Example 4: Tabular Display • 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.

11. Tabular Display

12. Example 5: Dynamic Query of Unix Directory • 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 color • highlighting matches with asterisks • displaying only the matching lines • In five of the tasks there was a statistically significant speed advantage for the Expand/contract interface.

13. Example 5: Dynamic Query of Unix Directory

14. 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

15. Disadvantages …stem largely from their poor match with current hardware and software systems • 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

16. 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 methods • Screen management algorithms • Only repaint the area that is changed • Manipulation of the palette by color indexing can be effective for irregularly shaped regions

17. 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.

18. Needed: 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.

19. Filter/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).

20. Summary • 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.

21. Data Visualization Sliders • 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 as • An interactive color scale • A barplot for discrete data • A density plot for continuous data

22. Sliders in Information Visualization • 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.

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

24. Filtering • 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.

25. Example: Frost

26. Improvements Upon Traditional Sliders • 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)

27. Summary 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.