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 1281736875613897654698450698560498286762 9809858453822450985645894509845098096585 9091030209905959595772564675050678904567 8845789809821677654872664908560912949686 How many 3’s? 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 [Bederson & Shneiderman 2003 - Craft] Goal: Support users to stay “in the flow”.

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 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 www.photomesa.com www.cs.umd.edu/hcil/photomesa Demo [Suh, Ling, Bederson & Jacobs - UIST 2003] [Bederson - UIST 2001] [Combs & Bederson - DL 1999]

11. Applying PhotoMesa - Visual Search Results Shows search results Integrated with UMD Art History Dept. DB 9,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. Applicable to any treemap algorithm: 1. After rectangles are generated, expand to next quantum size. 2. Expand to match width/height of neighbors 3. Translate to avoid overlap 4. Accommodate larger size within parent Quantum Treemaps II

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: 1. Add rectangle to current row (“strip”) 2. If row’s average aspect ratio increases, start new row Squarified => <= Strip

15. Strip Treemaps Squarified treemaps: avg aspect ratio: 1.75 Strip 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 www.cs.umd.edu/hcil/spacetree [Grosjean, Plaisant & Bederson - InfoVis 2002]

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 www.cs.umd.edu/hcil/datelens Demo [Bederson, Clamage, Czerwinski, Robertson - TOCHI submitted]

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 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 & linking accessible  Collaboration through Single 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. Now there is Piccolo Our “last” toolkit In Java, and now also in C# Same feature set as Jazz, but monolithic Biggest lesson: KISS Class Hierarchy Typical run-time structure 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 Rendering Speed Scene graph manipulation 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]