INFO 424, UW iSchool 11/15/2007 Todays Lecture Presentation - PDF document

INFO 424, UW iSchool 11/15/2007 Today’s Lecture Presentation • where/ how (& whether) to present represented items Presentation, I nteraction, Interaction • manipulating the view to see desired items and Case Studies I I Case Studies • Gapminder Spence, Information Visualization • EZChooser Chapter 5 (Chapter 4 optional) • Baby NameVoyager • MetroKC Thursday 15 Nov 2007 • oSkope Polle Zellweger • FishCal/ DateLens • Viz4All Presentation Fundam ental Problem Fundamental problem Scale: Most datasets don’t fit on the display • Too many variables (target of multi-d viz) • Too much data • Too many cases (equally common) Space lim itations Therefore, user must focus on specific variables • Overview + detail views and/ or cases • Focus + context distortion • Pan + zoom transitions Issues raised by focusing: • How to specify focus? Time lim itations • What is the relationship of focus to the rest of the • Animation data? • How does the user shift focus? • Rapid Serial Visual Presentation – Find new focus – Stay oriented Approach 1 : Standard Solution: Scrolling Overview + Detail Provide a larger virtual screen by allowing user to move with a scroll bar Provide both overview and detail displays Issues: Two ways to combine: • Only one focus • Time - Alternate between overview and detail • Efficient scrolling requires cognitive map sequentially – Must know contents of virtual screen (no overview • Space - Use different portions of the screen first) – Must know the relationship between the current focus and the desired focus – Must map relationship between current and next foci to the elevator positions on the scroll bar Polle Zellweger, MacZell Consulting 1

INFO 424, UW iSchool 11/15/2007 Approach 2 : Gapm inder Focus + Context Overview + Detail Integrated into a single display Rationale • Two separate displays split attention • Zooming hides the context • Human vision has both fovea and retina Exam ple – Table Lens FishCal / DateLens 2D distortion Bederson et al, ‘04 From Xerox PARC and Inxight Video Fisheye m aps Magic Lenses Movable lenses that show a modified view [ Stone et al, Xerox PARC] Placing lens Underlying Map view on map utilities lens Spence Video 15 Polle Zellweger, MacZell Consulting 2

INFO 424, UW iSchool 11/15/2007 More Magic Lenses More Focus + Context: Halos Magnifying & wireframe lenses Font labelling lens Composing 2 lenses Baudisch et al, 2003 2 detail lenses on a map Videotape Hyperbolic Brow ser Spiral Calendar Mackinlay, Robertson, Deline UIST’94 Lamping, Rao UIST’94 FishCal / DateLens Docum ent Lens 2D distortion Bederson et al, ‘04 Video Robertson, Mackinlay UIST’93 Polle Zellweger, MacZell Consulting 3

INFO 424, UW iSchool 11/15/2007 Approach 3 : PhotoMesa Panning and Zoom ing Panning • Smooth movement of camera across scene (or scene moves and camera stays still) Zoom ing • Increasing or decreasing the magnification of the objects in a scene Useful for changing focal point ZUI = Zoomable User I nterface Bederson ‘01 Demo Slide adapted from John Stasko CounterPoint Presentation Pad+ + Presentation Tool Tool Ken Perlin, NYU Zoom ing UI to organize & show PowerPoint slides Good, 2001 Tim e Lim itations Gapm inder Rapid Serial Visual Presentation • Present data sequentially (and often quite rapidly) • Like riffling the pages of a book to browse the contents Polle Zellweger, MacZell Consulting 4

INFO 424, UW iSchool 11/15/2007 Floating RSVP Manually controlled RSVP for online purchasing for browsing film library Spence Video 20 Spence Video 21 Spence’s I nteraction Model Norm an’s Action Cycle Information spaces • discrete • continuous Interaction modes • continuous • stepped • passive • composite User intentions • explore, seek, opportunistic, involuntary Exam ple 1 Exam ple 1 Minard map vis Minard map vis Info space? Static display (discrete info space) Interaction mode? No physical interaction (passive interaction) Polle Zellweger, MacZell Consulting 5

INFO 424, UW iSchool 11/15/2007 Exam ple 1 .5 Exam ple 1 .5 InfoCanvas InfoCanvas Info space? Discrete info space • picture elements show state of environment Interaction mode? Moving display (passive interaction) • peripheral awareness Spence Video 7 Spence Video 7 Exam ple 2 Exam ple 2 Entertainment kiosk Entertainment kiosk (also WWW) (also WWW) Info space? Discrete info space Interaction mode? Stepped interaction Exam ple 2 .5 Exam ple 2 .5 Tableau Software Tableau Software Info space? Discrete info space Interaction mode? Stepped interaction • Display changes occur on mouse up • History mechanism supports user exploration Demo Demo Polle Zellweger, MacZell Consulting 6

INFO 424, UW iSchool 11/15/2007 Exam ple 3 Exam ple 3 Attribute Explorer Attribute Explorer Info space? Discrete info space Interaction mode? Continuous interaction • user can move sliders smoothly = > display changes during mouse motion Spence Video 5 Spence Video 5 Exam ple 3 .5 Exam ple 3 .5 Circuit Design Circuit Design Info space? Continuous info space Interaction mode? Continuous interaction Circle size varies continuously as slider moves = > dynam ically-triggered popout of correlation Spence Video 1 Spence Video 1 Exam ple 4 Exam ple 4 Influence Explorer Influence Explorer Info space? Discrete info space Interaction mode? Composite interaction • uses brushing histograms technique • bar color shows sensitivity Spence Video 31 Spence Video 31 Polle Zellweger, MacZell Consulting 7

INFO 424, UW iSchool 11/15/2007 Spence’s I nteraction Model Film Finder Video Slide adapted from John Stasko Spotfire Spotfire Features Starfield display Tight coupling • features to guide the user • rapid, incremental, reversible interactions • display invariants • continuous display • progressive refinement • details on demand http://www.spotfire.com/ Slide adapted from John Stasko Slide adapted from John Stasko Movable Filter - Magic Lens Magic Lens Arbitrarily-shaped (usually rectangular) region with som e operation that changes the user’s view of the data • Movable • Stackable • Augmented by parameters that control the display Enhanced Dynamic Queries via Movable Filters Ken Fishkin & Maureen Stone CHI 1995 Slide adapted from John Stasko Slide adapted from John Stasko Polle Zellweger, MacZell Consulting 8

INFO 424, UW iSchool 11/15/2007 Queries Via Magic Lenses Real-valued Query High Salaries AND Low Taxes High Salaries OR Low Taxes Slide adapted from John Stasko Slide adapted from John Stasko Advantages Disadvantages Liveness More complex than DQ sliders • Not quite as easy to learn and use Flexibility More difficult to implement Ability to specify com plex queries Don’t use as much real estate for controls Slide adapted from John Stasko Slide adapted from John Stasko Sum m ary: Spence’s I nteraction More Case Studies Model Gapm inder Baby NameVoyager MetroKC oSkope FishCal/ DateLens Viz4All EZChooser Polle Zellweger, MacZell Consulting 9

INFO 424, UW iSchool 11/15/2007 Baby Nam e W izard Nam e Voyager Recalling Shneiderm an’s Tasks Overview: see overall patterns, trends Handouts and websites Zoom: see a smaller subset of the data Filter: see a subset based on values, … Details on demand: see values of objects Relate: see relationships, compare values History: keep track of actions & insights Extract: mark & capture data Adding functionality I nteractive Exam ples Supporting com parison U of Maryland Viz4All examples one idea: • ways to select up to 20 names, perhaps by dragging each one to a saved names area • draw a color-coded line graph for each saved name all displayed in the standard time-series 1900-2006 other ideas? One-stop shopping for prospective parents • derivations of names, country of origin • meanings of names • related names, nicknames, other language forms • famous people with that name • more? PocketPC calendar tool FishCal/ DateLens Polle Zellweger, MacZell Consulting 10

INFO 424, UW iSchool 11/15/2007 Scrolling & searching Evaluation results Tasks completed blue= FishCal red=PocketPC Links EZChooser http: / / brisa.merl.com: 8080/ myezchooser/ mydatasets.jsp?direc tory= / showcase Baby NameVoyager http: / / www.babynamewizard.com/ namevoyager/ lnv0105.html MetroKC http: / / transit.metrokc.gov/ oSkope http: / / oskope.com/ FishCal/ DateLens http: / / www.cs.umd.edu/ hcil/ datelens/ Viz4All http: / / www.cs.umd.edu/ class/ spring2005/ cmsc838s/ viz4all/ viz 4all_a.html Polle Zellweger, MacZell Consulting 11