PolyZoom: Multiscale and
     Multifocus Exploration
       in 2D Visual Spaces



Waqas Javed, Sohaib Ghani, Niklas Elmqvist
                 Purdue University
                 West Lafayette, IN
                       USA
       Presented By: Sohaib Ghani

                ACM CHI 2012
           May 5-8, 2012 ▪ Austin, Texas
2
3
4
Outline

    •   Motivation
    •   Demo
    •   Related Work
    •   The PolyZoom Technique
        – Design Decisions
        – Layout
        – PolyZoom: System
    • User Studies
    • Conclusion
5
Motivation
• Multiscale visual space
     – Example: Google Maps – geospatial dataset
        • Large (entire world) and two-dimensional
        • Multiscale (different data at different levels of detail)

• Navigation in such visual spaces is difficult
     – Desert fog
     – Multifocus interaction




 6
PolyZoom
• PolyZoom is a multiscale multifocus technique for navigating in 2D
  visual spaces
     – Allows users to iteratively build a hierarchy of focus regions
     – Allows maintaining awareness of multiple scales of the visual space
• [Video]




 7
Related Work

    • Common Navigation Techniques
      –   Scrolling (Igarashi and Hinckley 2000)
      –   Pan & Zoom ( Furnas and Bederson 2005)
      –   Overview + Detail (Hornbæk and Frøkjær 2001)
      –   Focus + Context (Furnas 1986)
    • Multifocus Interaction
      – Split-screen techniques (Shoemaker and Gutwin 2007)
      – Stack zooming (Javed and Elmqvist 2010)
    • Multiscale Navigation
      – Pad (Perlin and Fox 1993)


8
PolyZoom: Design Goals

    •   Multiscale awareness
    •   Multifocus awareness
    •   No distortion
    •   No overlap




9
PolyZoom: Layout
• Layout
• Viewport size management
• Correlation graphics




10
PolyZoom: System

     • Web-based implementation
       – ActionScript3, Flash, and HTML5
     • Google Maps dataset, NASA Universe, a Lunar
       dataset, and a Martian dataset




11
User Studies
12
Study 1: Multiscale Visual Search




13
Study 1: Multiscale Visual Search

     • Participants: 12
     • Navigation Techniques: 2
       – P – PolyZoom
       – S – Simple Pan & Zoom
     • Hierarchy Levels L : 3 (3,4,5)
     • Repetitions: 4
     • Task


14
Study 1: Multiscale Visual Search
• Hypothesis: P will be faster than S
• Result: significant main effect of Technique T on completion time
• Also significant main effect of Hierarchy Level L on completion time
• Completion time was roughly linear with number of hierarchy levels
   • Levels were significantly different with completion times ordered
      3 < 4 < 5 (Tukey HSD, p < .05)
• No significant interaction between T and L




    15
Study 2: Multifocus Comparison




16
Study 2: Multifocus Comparison

     • Participants: 12
     • Navigation Techniques: 2
       – P – PolyZoom
       – S – Simple Pan & Zoom
     • Discovery Order D : 5 (1,2,3,4,5)
     • Repetitions: 2
     • Task


17
Study 2: Multifocus Comparison
• Hypothesis: P will be faster than S
• Result: significant main effect of technique T on completion time
• Discovery order D had a significant main effect on completion time
      • Roughly linear (as expected)
      • Pairwise differences between orders were significant (Tukey HSD, p < .05)




 18
Subjective Ratings
• Differences in ratings significant (Friedman test, p < .05)




 19
PolyZoom for 20 Years of UIST




20
Conclusion
     • Design of a multiscale and multifocus
       interaction technique called PolyZoom
     • Evaluation with 2 user studies
       – Study 1 for multiscale visual search
       – Study 2 for multifocus comparisons
     • PolyZoom performs better than pan & zoom



21
Thank You!
                      Online demo available:
     http://web.ics.purdue.edu/~wjaved/projects/stackZoom/


             Contact Information:
             Sohaib Ghani
             Purdue University, West Lafayette, IN, USA
             E-mail: sghani@purdue.edu

                             Partially funded by NSF Grant #1123108.




22                    http://engineering.purdue.edu/pivot/

PolyZoom: Multiscale and Multifocus Exploration in 2D Visual Spaces

  • 1.
    PolyZoom: Multiscale and Multifocus Exploration in 2D Visual Spaces Waqas Javed, Sohaib Ghani, Niklas Elmqvist Purdue University West Lafayette, IN USA Presented By: Sohaib Ghani ACM CHI 2012 May 5-8, 2012 ▪ Austin, Texas
  • 2.
  • 3.
  • 4.
  • 5.
    Outline • Motivation • Demo • Related Work • The PolyZoom Technique – Design Decisions – Layout – PolyZoom: System • User Studies • Conclusion 5
  • 6.
    Motivation • Multiscale visualspace – Example: Google Maps – geospatial dataset • Large (entire world) and two-dimensional • Multiscale (different data at different levels of detail) • Navigation in such visual spaces is difficult – Desert fog – Multifocus interaction 6
  • 7.
    PolyZoom • PolyZoom isa multiscale multifocus technique for navigating in 2D visual spaces – Allows users to iteratively build a hierarchy of focus regions – Allows maintaining awareness of multiple scales of the visual space • [Video] 7
  • 8.
    Related Work • Common Navigation Techniques – Scrolling (Igarashi and Hinckley 2000) – Pan & Zoom ( Furnas and Bederson 2005) – Overview + Detail (Hornbæk and Frøkjær 2001) – Focus + Context (Furnas 1986) • Multifocus Interaction – Split-screen techniques (Shoemaker and Gutwin 2007) – Stack zooming (Javed and Elmqvist 2010) • Multiscale Navigation – Pad (Perlin and Fox 1993) 8
  • 9.
    PolyZoom: Design Goals • Multiscale awareness • Multifocus awareness • No distortion • No overlap 9
  • 10.
    PolyZoom: Layout • Layout •Viewport size management • Correlation graphics 10
  • 11.
    PolyZoom: System • Web-based implementation – ActionScript3, Flash, and HTML5 • Google Maps dataset, NASA Universe, a Lunar dataset, and a Martian dataset 11
  • 12.
  • 13.
    Study 1: MultiscaleVisual Search 13
  • 14.
    Study 1: MultiscaleVisual Search • Participants: 12 • Navigation Techniques: 2 – P – PolyZoom – S – Simple Pan & Zoom • Hierarchy Levels L : 3 (3,4,5) • Repetitions: 4 • Task 14
  • 15.
    Study 1: MultiscaleVisual Search • Hypothesis: P will be faster than S • Result: significant main effect of Technique T on completion time • Also significant main effect of Hierarchy Level L on completion time • Completion time was roughly linear with number of hierarchy levels • Levels were significantly different with completion times ordered 3 < 4 < 5 (Tukey HSD, p < .05) • No significant interaction between T and L 15
  • 16.
    Study 2: MultifocusComparison 16
  • 17.
    Study 2: MultifocusComparison • Participants: 12 • Navigation Techniques: 2 – P – PolyZoom – S – Simple Pan & Zoom • Discovery Order D : 5 (1,2,3,4,5) • Repetitions: 2 • Task 17
  • 18.
    Study 2: MultifocusComparison • Hypothesis: P will be faster than S • Result: significant main effect of technique T on completion time • Discovery order D had a significant main effect on completion time • Roughly linear (as expected) • Pairwise differences between orders were significant (Tukey HSD, p < .05) 18
  • 19.
    Subjective Ratings • Differencesin ratings significant (Friedman test, p < .05) 19
  • 20.
    PolyZoom for 20Years of UIST 20
  • 21.
    Conclusion • Design of a multiscale and multifocus interaction technique called PolyZoom • Evaluation with 2 user studies – Study 1 for multiscale visual search – Study 2 for multifocus comparisons • PolyZoom performs better than pan & zoom 21
  • 22.
    Thank You! Online demo available: http://web.ics.purdue.edu/~wjaved/projects/stackZoom/ Contact Information: Sohaib Ghani Purdue University, West Lafayette, IN, USA E-mail: sghani@purdue.edu Partially funded by NSF Grant #1123108. 22 http://engineering.purdue.edu/pivot/