![Page 1: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/1.jpg)
1
Interaction & Dynamic Queries 1
CS 7450 - Information VisualizationJanuary 29, 2004John Stasko
Spring 2004 CS 7450 2
Interaction
• How do you define “interactive”?
![Page 2: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/2.jpg)
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, ...
![Page 3: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/3.jpg)
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
![Page 4: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/4.jpg)
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
![Page 5: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/5.jpg)
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
![Page 6: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/6.jpg)
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
![Page 7: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/7.jpg)
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
![Page 8: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/8.jpg)
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
![Page 9: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/9.jpg)
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
![Page 10: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/10.jpg)
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
![Page 11: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/11.jpg)
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
![Page 12: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/12.jpg)
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
![Page 13: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/13.jpg)
13
Spring 2004 CS 7450 25
Rangeslider
100
Low selectionthumb
Real data rangeHigh selectionthumb
0
Spring 2004 CS 7450 26
FilmFinder Video
![Page 14: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/14.jpg)
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
![Page 15: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/15.jpg)
15
Spring 2004 CS 7450 29
Nice Application
www.myrateplan.com/cellphones
Spring 2004 CS 7450 30
DQ Strengths
• ?
![Page 16: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/16.jpg)
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
• ?
![Page 17: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/17.jpg)
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...
![Page 18: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/18.jpg)
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
![Page 19: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/19.jpg)
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
![Page 20: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/20.jpg)
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
![Page 21: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/21.jpg)
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
![Page 22: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/22.jpg)
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
![Page 23: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/23.jpg)
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
![Page 24: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/24.jpg)
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...
![Page 25: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/25.jpg)
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
![Page 26: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/26.jpg)
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
![Page 27: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/27.jpg)
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
![Page 28: Interaction & Dynamic Queries 1bennani/tmpc/VISD/07... · 2016. 9. 11. · 2 Spring 2004 CS 7450 3 Response Times • .1 sec - animation, visual continuity, sliders • 1 sec - system](https://reader035.vdocuments.us/reader035/viewer/2022071417/61149ae5508c090aa951a716/html5/thumbnails/28.jpg)
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