COMP 150-04 Visualization Lecture 11 Interacting with Visualizations
Assignment 5: Maps Due Wednesday, March 17th Design a thematic map visualization Option 1: Choropleth Map Implementation in Processing Option 2: Tourist Map Design/interaction sketch + thorough discussion Option 3: Interactive Layered Map or Mapper s Delight Implementation in Processing
Visual information-seeking mantra Overview first, zoom and filter, then details on demand. Design of GUIs and interactions Ben Schneiderman, The eyes have it: A task by data type taxonomy for information visualization Visual Languages, 1996
Desktop interfaces Interactions we take for granted can be powerful Detail on demand: Mouse selection Tooltips: Hovering cursor brings up details of item
Tangible interfaces Novel interaction styles Detail on demand: Gestural selection Multiple selections Microsoft Surface
Interaction in infovis Static or dynamic visualization? What are the goals? What aspects of the design can we control? What user tasks/operations must we support?
Static infovis Goal: Create an effective, expressive view of the data Data encoding Composition Perception: popout, Gestalt Cognitive skills Communicate Compare, rank Identify correlation, causation
Static infovis Goal: Create an effective, expressive view of the data Data encoding Composition Dynamic infovis Goal: Enable user to focus on goals rather than controls Presentation: Good static views linked together well Perception: popout, Gestalt Cognitive skills Communicate Compare, rank Identify correlation, causation Perception Cognitive skills Motor skills Explore Find best match
ACQUIRE Obtain the data PARSE Order the data into categories by meaning FILTER Remove all but the data of interest MINE Discern patterns, place the data in mathematical context REPRESENT Select a visual encoding model REFINE Improve the basic representation INTERACT Support dynamic queries
ACQUIRE PARSE FILTER DATA HANDLING Regular expressions,... Perl, Python,... MINE REPRESENT REFINE GRAPHIC DESIGN Graphics APIs UI toolkits Visualization toolkits INTERACT INTERACTION DESIGN
What is interactive? < 10 sec cognitive response < 1 sec system response, conversation break < 0.1 sec visual continuity, GUI widgets
Data type taxonomy 1D, 2D, 3D Temporal Multi-dimensional (nd) Tree Network Ben Schneiderman, The eyes have it: A task by data type taxonomy for information visualization Visual Languages, 1996
Task taxonomy Overview: see overall patterns in data Zoom: see a subset of data Filter: see a subset based on values Detail on demand: see values of items Relate: compare values History: keep track of actions Extract: mark and capture Ben Schneiderman, The eyes have it: A task by data type taxonomy for information visualization Visual Languages, 1996
Task taxonomy Overview: see overall patterns in data Zoom: see a subset of data overview+detail focus+context geometric zoom semantic zoom Filter: see a subset based on values Detail on demand: see values of items Relate: compare values mouseover query selection query brushing/linking dynamic query History: keep track of actions Extract: mark and capture Ben Schneiderman, The eyes have it: A task by data type taxonomy for information visualization Visual Languages, 1996
Overview+Detail display Google Maps
Overview+Detail display Google Maps
Overview+Detail display Google Maps
Overview+Detail display Show overview and detail in separate views + No spatial distortion - Information is fragmented (even though may have continuous zoom)
Focus+Context display Unified view: Focus object is in full detail Surrounding, contextual info is available with less detail + Simultaneous display matches human visual system - Distortion/occlusion may impede understanding Patrick Baudisch, Focus plus context screens http://patrickbaudisch.com
Pan and zoom Geometric vs. semantic zoom? Distortion?
Semantic zoom Hybrid views: drill down to display more information + Simultaneous display of overview and detail possible - Visual clutter: occlusion may impede understanding Ken Perlin, Zoomable user interfaces http://mrl.nyu.edu/~perlin/experiments/zoom/presentation.html
Recall: Small multiples Pictorial and tabular layouts Constancy of design Same design structure repeated for all images Economy of perception Draws the eye to differences and outliers http://oxfordreference.com
Recall: Small multiples Invite comparison, contrasts Must use same units, scale, measurements http://www.visualizingeconomics.com
Coordinated multiple views Use two or more views to support understanding of one concept Vary views by visual encoding, scale, data set Different visual encodings of the same data Different scale of same data, same encoding (overview+detail) Different data with same encoding, same scale (small multiples)
Coordinated multiple views TimeSearcher: Visual Exploration of Time Series Data http://www.cs.umd.edu/hcil/timesearcher
Brushing TimeSearcher: Visual Exploration of Time Series Data http://www.cs.umd.edu/hcil/timesearcher
Linking TimeSearcher: Visual Exploration of Time Series Data http://www.cs.umd.edu/hcil/timesearcher
Coordinated multiple views Addresses issue of scale: can t fit many marks/attributes in one view Addresses issues of data complexity Design considerations: Attention: Working memory, context switch Learnability Screen real estate Computational resources
Operations on data tables Rearrange by attribute Sort by attribute Select a subset of records Write a query: formal query language SELECT address FROM bostondb WHERE price <= 500,000 AND bedrooms >= 2 bathrooms >= 2 AND garage == true Challenges?
Dynamic queries Visual model of the world: Objects Actions: rapid, incremental, reversible Query: Direct selection Results: Immediate (< 0.1 sec) Ben Shneiderman et al, Dynamic HomeFinder, U. Maryland, 1993 http://www.youtube.com/watch?v=5x8xy9430fm
Dynamic queries on the web http://housingmaps.com
Dynamic queries on the web http://www.zillow.com/homes/for_sale/boston-ma
Dynamic queries on the web http://myrateplan.com/cellphones
Dynamic queries + Responsive interaction: fly through the data + Natural interaction: find the best results + Exploration - Conjunctive controls: requires user training - Spatially expensive
Designing and evaluating a program for molecular visualization Dynamic queries: replace query language Multiple views: show multiple alignment Variation: data types, encodings, resolution Conciseness Linking and brushing Attention management Resource tradeoffs: space, time