Hacer el trabajo de visualización

1. Hacer el trabajo de visualización Benjamin B. Bederson Computer Science Department/UMIACS Human-Computer Interaction Lab University of Maryland

2. Visualización de la Información • pantalla de visualización interactiva de información abstracta para ayudar a los usuarios: • Encontrar patrones, valores atípicos y las tendencias • Explorar los datos para construir la intuición • Desarrollar preguntas específicas que se le pregunte of more traditional mechanisms de los mecanismos tradicionales más Visuales nos ayudan a pensar Proporcionar un marco de referencia, de almacenamiento temporal de un área

3. ¿Cuál es el problema?

4. Presentación lo es todo!

5. Cognición externos • Reconocer las limitaciones humanas • Cognición externosPapel de mundo exterior en el pensamiento y la razón

6. Excelente Reconocimiento de Patrones • How many 3’s? 1281736875613897654698450698560498286762 9809858453822450985645894509845098096585 9091030209905959595772564675050678904567 8845789809821677654872664908560912949686 1281736875613897654698450698560498286762 9809858453822450985645894509845098096585 9091030209905959595772564675050678904567 8845789809821677654872664908560912949686

7. Trampas • Complejo de navegación y la oclusión Uso inadecuado de 3D • las dimensiones espaciales sin sentido • Self-Organizing Maps • Inútil animación • PowerPoint, Visual Thesaurus • space el uso confuso de espacio en la pantalla • El cuadro de basura “Inventive, Imaginative, Ingenious, Fanciful!” => But is it useful?

8. Estrategia • Mostrar más cabe en la pantalla: • Desplazamiento • 3D • Dense Diseño de la Información • Información general + detalle • 2.5D (ZUIs) • Distorsión (ojo de pez) • Cuidado de Animación • Tecnicas: • Interface de usuario con Zoom (ZUIs) • Ojo de pez Distorsion • Animacion de Transicion • Trabajar en estrecha colaboracion con usuarios Goal: Support users to stay “in the flow”. [Bederson & Shneiderman 2003 - Craft]

9. Mi Enfoque • Temas: • Adultos • niños • Dispositivos Mobiles • herramientas • uso: • Sistemas • Aplicaciones • Estudios • 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 – Navegador de imagenes con ZOOM Demo • Echar un gran número de imágenes • Ver las relaciones entre las imágenes • Vista previa rapida / detalles • Stand-alone, or integrado w/ DB • Local o en la web-desplegadas • ZUIs presentan excelentes características de ancho de banda - cantidad constante de información por visión • Tambien trabajan en • Miniatura automática de cultivo • Semi-autónomas anotación [Suh, Ling, Bederson & Jacobs - UIST 2003] [Bederson - UIST 2001] [Combs & Bederson - DL 1999] www.cs.umd.edu/hcil/photomesa

11. La aplicación de PhotoMesa Resultados de la búsqueda visual • Muestra los resultados de búsqueda • Integrado con UMD Departamento de Historia del Arte DB DB 9,000 images 9.000 imágenes • Instalado en la biblioteca de diapositivas

12. Cuántica mapas en árbol • Variación sobre mapas en árbol: space-filling subdivision of a rectangle de llenado de espacio subdivisión de un rectángulo • Garantiza que las dimensiones de cada rectángulo es un múltiplo entero de una constante • Expone imágenes de modo que todas las imágenes son del mismo tamaño y están alineados en una malla única a través de rectángulos [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]