1 / 34

Hacer el trabajo de visualización

Hacer el trabajo de visualización. Benjamin B. Bederson Computer Science Department/UMIACS Human-Computer Interaction Lab University of Maryland. Visualización de la Información. pantalla de visualización interactiva de información abstracta para ayudar a los usuarios:

finian
Download Presentation

Hacer el trabajo de visualización

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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]

More Related