Making Visualization Work

1. Making Visualization Work Benjamin B. Bederson Computer Science Department/UMIACS Human-Computer Interaction Lab University of Maryland

2. Information Visualization • Interactive visual display of abstract information to help users: • Find patterns, outliers and trends • Explore data to build intuition • Develop specific questions to be asked of more traditional mechanisms • Visuals help us think • Provide a frame of reference, a temporary storage area

3. What’s the Big Deal?

4. Presentation is everything!

5. External Cognition • Recognize human limitations • External Cognition • Role of external world in thinking and reason

6. Excellent Pattern Recognition • How many 3’s? 1281736875613897654698450698560498286762 9809858453822450985645894509845098096585 9091030209905959595772564675050678904567 8845789809821677654872664908560912949686 1281736875613897654698450698560498286762 9809858453822450985645894509845098096585 9091030209905959595772564675050678904567 8845789809821677654872664908560912949686

7. Pitfalls • Complex navigation and occlusion • Inappropriate use of 3D • Meaningless spatial dimensions • Self-Organizing Maps • Unhelpful animation • PowerPoint, Visual Thesaurus • Inefficient and confusing use of screen space • Chart Junk “Inventive, Imaginative, Ingenious, Fanciful!” => But is it useful?

8. Strategy • Show more than fits on the screen: • Scrolling • 3D • Dense information design • Overview+detail • 2.5D (ZUIs) • Distortion (fisheye) • Careful animation • Techniques: • Zoomable User Interfaces (ZUIs) • Fisheye Distortion • Transitional animations • Work closely with users Goal: Support users to stay “in the flow”. [Bederson & Shneiderman 2003 - Craft]

9. My Focus • Themes: • Adults • Children • Mobile Devices • Toolkits • Approaches: • Systems • Applications • Studies • This talk is not about my other work on: • Voting Systems • Interaction & Input devices • Methodology • [Chipman, Bederson, Golbeck - • Behaviour & Information Technology (submitted)] [Hutchinson, Bederson et al. - CHI 2003] • [Baudisch, Bederson et al. - Interact 2003] • [Bederson - CHI 2003] • [Gandhi, Kumar, Bederson, Shneiderman - WebVis 2000] • [Stewart, Bederson & Druin - CHI 1999] • [Hightower, Bederson, et al. - Hypertext 1998] CounterPoint - [Good & Bederson - J. Information Visualization 2002]

10. PhotoMesa – Zoomable Image Browser Demo • Browse large numbers of images • See relationships among images • Fast preview / detail • Stand-alone, or integrated w/ DB • Local or web-deployed • ZUIs have excellent bandwidth characteristics – constant amount of information per view • Also working on • Automatic thumbnail cropping • Semi-autonomous annotation • Commercialized at www.photomesa.com [Suh, Ling, Bederson & Jacobs - UIST 2003] [Bederson - UIST 2001] [Combs & Bederson - DL 1999] www.cs.umd.edu/hcil/photomesa

11. Applying PhotoMesa- Visual Search Results • Shows search results • Integrated with UMD Art History Dept. DB9,000 images • Installed in slide library

12. Quantum Treemaps • Variation on treemaps: space-filling subdivision of a rectangle • Guarantees that each rectangle’s dimensions are an integral multiple of a constant • Lays out images so that all images are the same size and are aligned on a single grid across rectangles [Bederson, Shneiderman & Wattenberg - TOG 2002]

13. Quantum Treemaps II Applicable to any treemap algorithm: • After rectangles are generated, expand to next quantum size. • Expand to match width/height of neighbors • Translate to avoid overlap • Accommodate larger size within parent

14. Strip Treemaps • Want rectangles to be ordered • Squarified alg. creates rows or columns, and inserts in order of rectangle size. • Based on any existing “Squarified” treemap algorithm • Strip approach: • Add rectangle to current row (“strip”) • If row’s average aspect ratio increases, start new row Squarified => <= Strip

15. Strip Treemaps • Squarified treemaps: avg aspect ratio: 1.75Strip treemaps: avg aspect ratio: 2.6 • User study examined “readability” • 83% faster for strip than squarified • search task w/ 100 rects (2.5 sec vs 14.8 sec w/ 20 subjs).

16. SpaceTree / TaxonTree- Seeing Hierarchies in Context • Explore large hierarchies • Gain understanding of relationships among data • Integrate search/browse • TaxonTree is specialized version of biodiversity • Used in UMD Biodiversity BSCI 224 • Working on “SpaceGraph” to view ontologies Demo [Grosjean, Plaisant & Bederson - InfoVis 2002] www.cs.umd.edu/hcil/spacetree

17. DateLens- Calendars on the Go • Support longer range tasks • Scale up while maintaining context: • Uses 2D fisheye distortion • Carefully designed interaction • Integrated search with or without text entry • High performance on low-powered device Demo [Bederson, Clamage, Czerwinski, Robertson - TOCHI submitted] www.cs.umd.edu/hcil/datelens

18. DateLens Studies • Two user studies at Microsoft Research • First with non-PDA users • Second with MSR PDA-using employees • Similar timing results • Overall quite enthusiastic Commercialized at www.datelens.com

19. Fisheye Menus • Problem: Selection from a long list • Traditional approaches: • ArrowBars • ScrollBars • Hierarchies • Solution: Apply fisheye distortion • Shows detail in context • Reduces mouse presses / taps [Bederson - UIST 2000]

20. Results —Task Times • Tasks were performed faster using Fisheye Menus, F(1,1206)=29.4, p<0.001 • 25% faster (4.0 vs 5.3 secs) • Difference more pronounced for longer menus • And more pronounced for items near the end of the menus

21. Working With Children • KidPad – A story telling / authoring tool • Focus on children’s abilities • Made zooming & linkingaccessible • Collaboration throughSingle Display Groupware [Hourcade, Bederson, Druin - SPE 2003] [Benford, Bederson, et al. - CHI 2000] [Boltman, Druin, Bederson et al. - AERA 2002] www.cs.umd.edu/hcil/kidpad

22. International Children’s Digital Library • Largest freely available collection of children’s books • 23 languages, 260 books • Exploring interface and accessibility • Enhanced version uses PhotoMesa • Over 15,000 unique visitors / month [Druin, Revelle, Bederson, et al. - JCAL 2003] [Hourcade, Bederson, et al. - Interacting w/ Comp. 2003] [Druin, Bederson, et al. - First Monday 2003] [Revelle, Druin, Platner, Bedersonet al. - J. of Science, Education and Technology 2002] [Druin, Bederson, et al. - JCDL 2001] www.icdlbooks.org

23. Study of Children’s Mouse Use [Hourcade, Bederson, Druin, Guimbretiere - TOCHI submitted]

24. Piccolo- A Zoomable User Interface Toolkit • For Java programmers (porting to C#) • Offers a structured canvas • Supports 2D object-oriented graphics • layers • hierarchies (transformation, transparency, etc.) • cameras • efficiency mechanisms => Extensible and Efficient www.cs.umd.edu/hcil/piccolo

25. History Lesson – ZUI Toolkits • First there was Pad++ • Designed for prototyping • Used C++ and Tcl/Tk and X or OpenGL graphics • It was useful, but didn’t scale up well • The API was defined in Tcl and the C++ code was efficient, but messy… [Bederson & Meyer - SPE 1998]

26. Then There Was Jazz • We wanted to spend less time on the toolkit • Goals became clear: • Small and easy to learn, use within existing GUI framework • Manage painting, picking and event dispatch - customizable • Interaction handlers on elements and groups • Non-rectangular, transparent, scaled, translated and rotated graphics • Large numbers of objects in complex scenes. • Animated view navigations (pans and zooms) • Multiple views • Fast model manipulation [Bederson, Meyer & Good - CHI 2000]

27. Inspired by 3D Graphics • We built “polylithic” scene graph • Different than “monolithic” GUI toolkits [Bederson, Grosjean, Meyer - TSE submitted]

28. Polylithic Potential • Simpler objects, easier to maintain • More de-coupled objects, easier to extend • More run-time control • Could better support design environments • But … • More objects to control was significant problem • Introduced “editor” to manage object chains • Still not good enough for app programmers

29. Class Hierarchy Typical run-time structure Now there is Piccolo • Our “last” toolkit • In Java, and now also in C# • Same feature set as Jazz, but monolithic • Biggest lesson: KISS import edu.umd.cs.piccolo.nodes.*; import edu.umd.cs.piccolox.*; public class PHelloWorld extends PFrame { public void initialize() { PText text = new PText("Hello World!"); getCanvas().getLayer().addChild(text); } public static void main(String args[]) { new PHelloWorld(); } }

30. How do they compare? • Tough comparison – many design differences aside from polylithic / monolithic architectures • Did case studies and a performance analysis DateLens Mockup

31. Performance Analysis Scene graph manipulation speed Rendering Speed

32. Architecture Reflections • Polylithic and Monolithic approachs each have merits • Similar performance and code sizes • Base architecture on toolkit users and expected life cycle of toolkit • More static => monolithic • More dynamic => polylithic

33. Piccolo in Use • Poseidon – UML modeling, Gentleware.com • Java Digital Album Infrastructure • SimBrain – Neural Network • TimeSearcher • 1,300 messages in public email list U. Victoria – Ontology Visualization

34. Conclusions • Does zooming work? • Is animation helpful? • Are toolkits beneficial? • => Clearly yes (sometimes) • Good small representations needed • Animation to help maintain object constancy best • Understanding of domain and users crucial • Like all interfaces, good visualizations remain hard [Hornbaek, Bederson & Plaisant - TOCHI 2002] [Bederson & Boltman - InfoVis 1999]