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
Whats 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 3s?

1281736875613897654698450698560498286762 980985845
3822450985645894509845098096585 909103020990595959
5772564675050678904567 884578980982167765487266490
8560912949686
1281736875613897654698450698560498286762 980985845
3822450985645894509845098096585 909103020990595959
5772564675050678904567 884578980982167765487266490
8560912949686
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!
gt But is it useful?
8
Strategy

• Show more than fits on the screen
• Scrolling
• 3D
• Dense information design
• Overviewdetail
• 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 rectangles 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 rows average aspect ratio increases, start
  new row

Squarified gt
lt 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
Demo

• 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

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, plt0.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 childrens 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 Childrens Digital Library

• Largest freely available collection of childrens
  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 Childrens 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
• gt 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 didnt 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

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 gt monolithic
• More dynamic gt 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?
• gt 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