1

Interaction & Dynamic Queries 1

CS 7450 - Information VisualizationJanuary 29, 2004John Stasko

Spring 2004 CS 7450 2

Interaction

• How do you define “interactive”?

2

Spring 2004 CS 7450 3

Response Times

• .1 sec - animation, visual continuity, sliders

• 1 sec - system response, conversation break

• 10 sec - cognitive response

Spring 2004 CS 7450 4

Interaction - 3 Transformations

• Data (Primary Focus)− Selecting cases to show

• Visual− Selecting a different representation− UI controls for chart/graph/vis

• View− Selecting the perspective− Zoom, pan, ...

3

Spring 2004 CS 7450 5

Data Transformation

• Selecting what you want to see• What are some techniques?

Spring 2004 CS 7450 6

Example

www.digitalhistory.uh.edu/timeline/timeline.cfm

4

Spring 2004 CS 7450 7

Data Transformation

• Interaction forms:− Pop-up tooltips (bubble help)− Direct walk− (General) Brushing− Details-on-demand− Dynamic query− Histogram brushing

Spring 2004 CS 7450 8

Pop-up tooltips

• Hovering mouse cursor brings up details of item

5

Spring 2004 CS 7450 9

Direct Walk

• Linkages between cases

• Exploring one may lead to another

• Example:− Following hyperlinks

on web pages

Spring 2004 CS 7450 10

Brushing

• Applies when you have multiple views of the same data

• Selecting or highlighting a case in one view generates highlighting the case in the other views

• Very common technique in InfoVis

6

Spring 2004 CS 7450 11

Brushing

Sameitem

Spring 2004 CS 7450 12

Details-on-Demand

• May not be showing all the data due to scale problem− May be showing some abstraction of groups

of elements

• Expand set of data to show more details, perhaps individual cases

7

Spring 2004 CS 7450 13

Dynamic Query

• Probably most common technique• Let’s explore more details...

Spring 2004 CS 7450 14

DB Queries

• Query language− Select house-addressFrom atl-realty-dbWhere price >= 200,000 and

price <= 400,000 andbathrooms >= 3 andgarage == 2 andbedrooms >= 4

8

Spring 2004 CS 7450 15

DB Queries

• Pluses?

• Minuses?

Spring 2004 CS 7450 16

Typical Query Response

• 124 hits found− 1. 748 Oak St. - a beautiful …− 2. 623 Pine Ave. -− …

• 0 hits found

9

Spring 2004 CS 7450 17

Problems

• Must learn language• Only shows exact matches• Don’t know magnitude of results• No helpful context is shown• Reformulating to a new query can be slow• ...

Spring 2004 CS 7450 18

Dynamic Query

• Specifying a query brings immediate display of results

• Responsive interaction (< .1 sec) with data, concurrent presentation of solution

• “Fly through the data”, promote exploration, make it a much more “live” experience− Timesharing vs. batch

10

Spring 2004 CS 7450 19

Dynamic Query Constituents

• Visual representation of world of action including both the objects and actions

• Rapid, incremental and reversible actions• Selection by pointing (not typing)• Immediate and continuous display of

results

From: Ahlberg &Shneiderman,CHI ‘94

Spring 2004 CS 7450 20

Imperfection

• Idea at heart of Dynamic Query− There often simply isn’t one perfect response

to a query− Want to understand a set of tradeoffs and

choose some “best” compromise− You may learn more about your problem as

you explore

11

Spring 2004 CS 7450 21

Software Demo

• HomeFinder - Univ. of Maryland

Spring 2004 CS 7450 22

What Did We See?

• Interface− buttons− sliders (nominal --> ordinal)− alphasliders

12

Spring 2004 CS 7450 23

Query Controls

• Variable types− Binary nominal - Buttons− Nominal with low cardinality - Radio buttons− Ordinal, quantitative - sliders

Spring 2004 CS 7450 24

Alphaslider

A B C DEF G HI J K L M N OP QR S T UVW XYZ

Goldfinger

Currentselection

Slider thumb

Slider area Index

13

Spring 2004 CS 7450 25

Rangeslider

100

Low selectionthumb

Real data rangeHigh selectionthumb

0

Spring 2004 CS 7450 26

FilmFinder Video

14

Spring 2004 CS 7450 27

Spotfire

Currentassignment

Spring 2004 CS 7450 28

Spotfire Features

• Starfield display• Tight coupling

− features to guide the user− rapid, incremental, reversible interactions− display invariants− continuous display− progressive refinement− details on demand

15

Spring 2004 CS 7450 29

Nice Application

www.myrateplan.com/cellphones

Spring 2004 CS 7450 30

DQ Strengths

• ?

16

Spring 2004 CS 7450 31

DQ Strengths

• Work is faster• Promote reversing, undo, exploration• Very natural interaction• Shows the data

Spring 2004 CS 7450 32

DQ Weaknesses

• ?

17

Spring 2004 CS 7450 33

DQ Weakness

• Can you formulate an arbitrary booleanexpression?− !(A1 V A2) ^ A3 V (A4 V A5 ^ A6) V …

• But do people really do this often?

Spring 2004 CS 7450 34

DQ Weakness

• Controls take space!− How much in Spotfire?

• Put data in controls...

18

Spring 2004 CS 7450 35

Data Visualization Sliders

Low selectionthumb

Data distribution

High selectionthumb

From: Eick, UIST ‘94

Spring 2004 CS 7450 36

Drawing Queries

Query Sketch

You specify a timelinequery by drawing a rough pattern for it, thesystem brings back nearmatches User-drawn query

ResponsesM. Wattenberg, CHI ‘01

19

Spring 2004 CS 7450 37

DQ Weakness

• As data set gets larger, real-time interaction becomes increasingly difficult

• Storage - Data structures− linear array− grid file− quad, k-d trees− bit vectors

Spring 2004 CS 7450 38

Brushing Histograms

• Special case of brushing• Data values represented in histograms

that can be clicked on and selected (controls region)

• When items selected there, the corresponding item(s) are highlighted in main view windows

20

Spring 2004 CS 7450 39

BH Example

DataMaps

Maryland&Va Tech

Spring 2004 CS 7450 40

DQ vs. BH

• Empirical Study− Use DataMaps, a geographic (US states) data

visualization tool− Have participants do different tasks with both

methodsHow many states have pop between x and y in 1970?Given 3 states, which has the lowest median income?What’s the relationship between education and income?List states with pops. 0->x and y->z.What kind of a state is Florida?

Q. Li & C. North, InfoVis ‘03

Demo

21

Spring 2004 CS 7450 41

Findings

• Brushing histograms better and more highly rated for more complex discovery tasks− Attribute correlation, compare, and trend

evaluation

• Dynamic queries better for more simple range specification tasks− Single range, multiple ranges, multiple criteria

Functioned more as its owninfovis tool

Functioned more as auxiliary control for other vizs

Spring 2004 CS 7450 42

Case Study

Attribute Explorer

Video

22

Spring 2004 CS 7450 43

Fundamental Idea

• Show all the data, use different displays for different variables

• Use brushing so that interaction with one view highlights selections in others

Spring 2004 CS 7450 44

DQ vs. BH

• Fundamental Differences:− BH highlights data of interest;

DQ filters unwanted data− DQ does single range query;

BH allows multiple ranges− DQ users interact with the query (low,hi);

BH users interact directly with data− DQ visualizes query formulation (1 way);

BH displays query results too (I/O)

Li & North, ‘03

23

Spring 2004 CS 7450 45

Case Study - SDM

• Developed at CMU• Limitations of static visuals

− Unable to focus on different objects with context

− Clutter and object occlusion− Objects are dwarfed in the scale for the entire

data set− Fail to classify object sets− Difficult to compare quantities which are not

spatially contiguousChuah et al, UIST ‘95

Spring 2004 CS 7450 46

System in Action

Video

24

Spring 2004 CS 7450 47

What We Saw

Object handles Maintain context: Body and shell

Viewing occluded objects Interactive augmentation

Spring 2004 CS 7450 48

Interaction

• More to come...

25

Spring 2004 CS 7450 49

Upcoming

• Interaction and Dynamic Queries 2− Reading

Chapter 5 againFishkin & Stone

• Time Series data• HW3 due in a week

Spring 2004 CS 7450 50

Sources Used

• Spence, CMS books• Shneiderman; Ahlberg et al; Chuah et al;

Tweedie et al articles• Chiu & Wang F99 slides

26

Spring 2004 CS 7450 51

Extras

• Additional information

Spring 2004 CS 7450 52

SDM Components

• Object-centered selection• Dynamic and flexible operations

• SDM handles

• Objects constraints and feedback techniques• Context persistence• Set-wide operations

27

Spring 2004 CS 7450 53

Advantages

• ?

Spring 2004 CS 7450 54

Advantages

• Focus and context• View occluded objects• View different object sets in different scales• Visualization is not part of the underlying data• Compare the widths and heights of objects at a

distance

28

Spring 2004 CS 7450 55

Disadvantages

• ?

Spring 2004 CS 7450 56

Disadvantages

• Object manipulation causes occlusion• Users cannot operate on parts of objects• With limited scope, certain objects are occluded

by the focus of objects • Changing the width/height can blur the linear

relationships between objects