Hacer el trabajo de visualización

Benjamin B. BedersonComputer Science Department/UMIACSHuman-Computer Interaction LabUniversity of Maryland

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

¿Cuál es el problema?

Presentación lo es todo!

Cognición externos

Reconocer las limitaciones humanas

Cognición externosPapel de mundo exterior en el pensamiento y la razón

Excelente Reconocimiento de Patrones

1281736875613897654698450698560498286762980985845382245098564589450984509809658590910302099059595957725646750506789045678845789809821677654872664908560912949686

How many 3’s?

1281736875613897654698450698560498286762980985845382245098564589450984509809658590910302099059595957725646750506789045678845789809821677654872664908560912949686

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?

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

[Bederson & Shneiderman 2003 - Craft]

Goal: Support users tostay “in the flow”.

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]

PhotoMesa – Navegador de imagenes con ZOOM

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

www.cs.umd.edu/hcil/photomesa

Demo

[Suh, Ling, Bederson & Jacobs - UIST 2003][Bederson - UIST 2001][Combs & Bederson - DL 1999]

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

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]

Applicable to any treemap algorithm:1. After rectangles are generated, expand to next quantum size.2. Expand to match width/height of neighbors3. Translate to avoid overlap4. Accommodate larger size within parent

Quantum Treemaps II

Average Aspect Ratios

0.00

0.50

1.00

1.50

2.00

2.50

3.00

3.50

4.00

4.50

5.00

10 20 50 100 1000

Maximum # elements per rectangle

Ave

rag

e A

spec

t R

atio

Pivot Treemap

Quantum Pivot Treemap

Strip Treemap

Quantum Strip Treemap

Wasted Space

0%

5%

10%

15%

20%

25%

30%

35%

40%

45%

50%

10 20 50 100 1000

Maximum # elements per rectangle

Wa

ste

d S

pa

ce

Pivot Treemap

Quantum Pivot Treemap

Strip Treemap

Quantum Strip Treemap

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

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).

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]

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]

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

Interaction between Calendar Type and Task Complexity

0

10

20

30

40

50

60

70

80

90

Condition

Ave

rag

e T

ask

Tim

e (S

eco

nd

s)

DateLens--Simple

PPC--Simple

DateLens--Complex

PPC--Complex

Commercialized at www.datelens.com

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]

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

FISHEYE START

menutype

Dot/Lines show Means

Time vs. Menu Length

20 30 40 50

menuleng

0.00

1000.00

2000.00

3000.00

4000.00

5000.00

6000.00

7000.00

tim

e

And more pronounced for items near the end of the menus

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

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

Study of Children’s Mouse Use

0

50

100

16 32 64

Target Size (pixels)

Ac

cu

rac

y %

4 years

5 years

Adult

0

1

2

3

16 32 64

Target Size (Pixels)

Targ

et R

een

try

4 years

5 years

Adult

[Hourcade, Bederson, Druin, Guimbretiere - TOCHI submitted]

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

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]

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]

Inspired by 3D Graphics

We built “polylithic” scene graph Different than “monolithic” GUI toolkits

[Bederson, Grosjean, Meyer - TSE submitted]

Node

Rectangle

Node

FadeRectangle

FadeRectangle

MonolithicPolylithic

Root

FadeRectangle

Monolithic

FadeRectangle

FadeRectangle ...

Root

Polylithic

Fade FadeFade ...

Rectangle Rectangle Rectangle...

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

Now there is Piccolo Our “last” toolkit In Java, and now also in C# Same feature set as Jazz,

but monolithic Biggest lesson: KISS

PNode

PRoot PLayer PCamera

PText

PPath

PImage

piccolo piccolo.nodes

1.n

Class Hierarchy

PRoot

PLayer PCamera

PNode PImage

PText PPath

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(); }}

How do they compare?

Tough comparison – many design differences aside from polylithic / monolithic architectures

Did case studies and a performance analysis

Custom Piccolo Jazz Scene render time 1.5 msec 2.1 msec 2.2 msec Lines of Code 272 lines 171 lines 219 lines Class file size 10.4 kbytes 10.4 kbytes 13.2 kbytes Memory usage our code (full application)

7.5 k (484k) 8.0 k (516k) 10.2 k (535k)

DateLens Mockup

Task Custom Piccolo Scene graph Overhead

Jazz Scene graph Overhead

10,000 rectangles 265.0 msec 270.3 msec 2 % 282.8 msec 7 % 1,000 groups of 10 rectangles

273.4 msec 3 % 281.2 msec 6 %

100 groups of 10 groups of 10 rectangles

267.2 msec 1 % 281.3 msec 6 %

10 groups of 10 groups of 10 groups of 10 rectangles

270.4 msec 2 %

278.1 msec 5 %

Performance Analysis

Task Piccolo Jazz 10,000 rectangles Build 10,000 nodes 16.0 msec 219.0 msec Translate 10,000 nodes 0.4 msec 23.5 msec Remove 10,000 nodes 5.3 msec 5.3 msec 1,000 x 10 rects Build 10,000 nodes 16.0 msec 218.0 msec Translate 10,000 nodes 0.4 msec 50.8 msec Remove 10,000 nodes 5.3 msec 5.3 msec 100 x 10 x 10 rects Build 10,000 nodes 15.0 msec 226.5 msec Translate 10,000 nodes 0.4 msec 62.5 msec Remove 10,000 nodes 5.0 msec 10.6 msec 10 x 10 x 10 x 10 rects Build 10,000 nodes 16.0 msec 226.5 msec Translate 10,000 nodes 0.4 msec 82.3 msec Remove 10,000 nodes 5.0 msec 10.3 msec

Rendering Speed

Scene graph manipulation speed

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

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

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]