Lecture 9
TheBrain & Visual Thesaurus Demos
Focus+Context
– Nonlinear Magnification
– TableLens
Visual Tools for Text Retrieval
Part 1
© Anselm Spoerri
Hierarchical Information – Recap
Traditional
ConeTree
Treemap
© Anselm Spoerri
Hierarchical Information – The Brain
Lateral Links
Parent
Siblings
Children
Download Demo – http://www.thebrain.com
Example
© Anselm Spoerri
Radial Layout Animation
Animated Exploration of Dynamic Graphs with Radial Layout
Shift of Focus
− Straight-line path shift  produces confusing animation
− “Linear interpolation of polar coordinates”  produces smooth
transition (slow in and slow-out timing)
Download Video (… will take a while)
or
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “viz.avi” and save
© Anselm Spoerri
Visual Thesaurus by Plumb Design
http://www.visualthesaurus.com/
Displaying interrelationships between words and meanings
Visual Thesaurus accesses data from WordNet
–
–
Publicly available lexical reference system developed by the Cognitive Science
Laboratory at Princeton University
Contains over 50,000 words and 40,000 phrases collected into more than 70,000
sense meanings.
© Anselm Spoerri
Visual Thesaurus
© Anselm Spoerri
Focus+Context Interaction
Nonlinear Magnification InfoCenter
– http://www.cs.indiana.edu/~tkeahey/research/nlm/nlm.html
Nonlinear Magnification
= “Fisheye Views"
= “Focus+Context"
Preserve Overview
enable Detail Analysis
in same view
© Anselm Spoerri
Focus+Context – Constrained Transformations
© Anselm Spoerri
Focus+Context – DC Subway Map
© Anselm Spoerri
Fisheye Menus
B. Bederson
– HCI Lab, Uni. of Maryland
Demo
http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml
© Anselm Spoerri
Table Lens
Download Video (… will take a while)
or
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “tableLens.wmv” and save
© Anselm Spoerri
Table Lens – Focus+Context
sorting
hidden
focal
Non focal
spotlighting
Control point
© Anselm Spoerri
Table Lens
(cont.)
SHAPE
– Pattern detection and comparison
OUTLIERS
– Detect extreme values
– Sort to see MAX and MIN
© Anselm Spoerri
Table Lens
Data = Multi– Variate
Perceptual Coding
Position
Yes
Size
Yes
Orientation
Texture
Shape
Color
Yes
Shading
Interaction
Depth Cues
Surface
Motion
Yes
Stereo
Direct Manipulation
Yes
Immediate Feedback
Yes
Linked Displays
Yes
Proximity
Yes
Logarithmic Shift of Focus
Similarity
Yes
Dynamic Sliders
Continuity
Yes
Semantic Zoom
Yes
Connectedness
Focus+Context
Yes
Closure
Details-on-Demand
Containment
Yes
Output  Input
© Anselm Spoerri
Table Lens Demo
Table Lens
http://www.inxight.com/products/sdks/tl/
Tasks – Ameritrade Table Lens
Task 1
Find Shape for “5years” Column
Find Min & Max for “Quarter to” Column
Find Shape for “1year” Column
Find Min & Max for “10years” Column
Task 2
The
The
The
See
Largest loss value for a fund for this Quarter Hint: greater than -30.0
Largest ten year gain. Hint: greater than +900.0
Largest five year gain. Hint: a Lipper fund
what else you can find...
© Anselm Spoerri
Hyperbolic Trees
Visualize Hierarchical Data
Focus + Context Technique
Inxigth StarTree Browser
–
http://www.inxight.com/products/sdks/st/
Download Video (… will take a while)
or
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “hyperbolicTree.mpeg” and save
Approach
–
–
–
First lay out hierarchy on hyperbolic plane and map this plane to a disk
Root at center, subordinates around
Apply recursively, distance decreases between parent and child as you move farther from center,
children go in wedge rather than circle
Use animation to navigate along this representation of the plane
Comparison
–
–
Standard 2D browser: 100 nodes (w/3 character text strings)
Hyperbolic browser: 1000 nodes, about 50 nearest the focus can show from 3 to dozens of
characters
© Anselm Spoerri
Hyperbolic Trees
Data = Hierarchy
Perceptual Coding
Position
Yes
Size
Yes
Orientation
Texture
Shape
Yes
Color
Yes
Shading
Interaction
Depth Cues
Surface
Motion
Yes
Stereo
Proximity
Yes
Direct Manipulation
Yes
Immediate Feedback
Yes
Linked Displays
Yes
Logarithmic Shift of Focus
Yes
Similarity
Dynamic Sliders
Continuity
Semantic Zoom
Yes
Focus+Context
Yes
Closure
Details-on-Demand
Yes
Containment
Output  Input
Connectedness
Yes
© Anselm Spoerri
Hyperbolic Tree  3D
Munzner’s H3 / H3 Viewer
http://graphics.stanford.edu/videos/h3/
Hyperbolic Browser
Projection onto sphere
rather than circle
Handles graphs as well as
trees
ConeTree
Distributes child nodes on
surface of hemisphere
rather than circle
circumference
© Anselm Spoerri
3D Hyperbolic Browser  Walrus
Developed Young Hyun at CAIDA, based on research by Tamara Munzner.
http://www.caida.org/tools/visualization/walrus/
© Anselm Spoerri
3D Hyperbolic Browser  Walrus
© Anselm Spoerri
Interaction Benefits
Direct Manipulation
Reduce Short-term Memory Load
Immediate
Feedback
Permit Easy Reversal of Actions
Linked Displays
Increase Info Density
Animated Shift of
Focus
Offload work from cognitive to perceptual
system
Object Constancy and Increase Info
Density
Dynamic Sliders
Reduce Errors
Semantic Zoom
 O(LOG(N)) Navigation Diameter
Focus+Context
 O(LOG(N)) Navigation Diameter
Details-on-Demand
Reduce Clutter & Overload
Output  Input
Reduce Errors
© Anselm Spoerri
Interface Metaphors
(as suggested by Mann)
book
butterfly
bookshelf
pile
newspaper
galaxy
city
starfield
landscape
universe
rooms
magnet
building
sculpture
tower plus elevator
television
guided tour
wall
lens
aquarium
water flowing
© Anselm Spoerri
Interface Metaphors
© Anselm Spoerri
Interface Metaphors
© Anselm Spoerri
Interface Metaphors
© Anselm Spoerri
Interface Metaphors
© Anselm Spoerri
How to Use Visualization to Support Retrieval
Source
Thomas Mann (PhD Thesis Uni of Konstanz)
Visualization of search results from the World Wide Web
http://www.ub.uni-konstanz.de/v13/volltexte/2002/751//pdf/Dissertation_Thomas.M.Mann_2002.V.1.07.pdf
© Anselm Spoerri
Query Formulation – Boolean  FilterFlow
Coordination Problem: which operator to choose?
Most people find the basic Boolean syntax counter-intuitive.
AND “implies” broadening (opposite true).
OR “implies” narrowing (opposite true).
OR
AND
© Anselm Spoerri
Query Formulation – Boolean  FilterFlow
( A or B or C) and (D or E) and (not F)  express common queries
Difficult to express complex
queries
How?  Visualize “Power
Set”
© Anselm Spoerri
Query Formulation – Venn Diagrams  TeSS
© Anselm Spoerri
Query Formulation – Venn Diagrams  VQuery
1. “AND”
“OR”
“NOT”  low visual saliency
2. How to generalize to higher number of sets?
© Anselm Spoerri
Generalize Venn Diagrams
© Anselm Spoerri
Goal – Compare Search Results
Explode
Transform
Can be Generalized to N Sets
© Anselm Spoerri
InfoCrystal
© Anselm Spoerri
InfoCrystal
© Anselm Spoerri
InfoCrystal
A and B and C
A and C and (not B)
A and B and (not C)
A and (B or C)
© Anselm Spoerri
InfoCrystal
A and (not (B or C))
A and B and C
A and C and (not B)
C and (not (A or B))
A and B and (not C)
B and
(not (A or C))
B and C and (not A)
(not (A©orAnselm
B or Spoerri
C))
Query Formulation – Boolean Power Set  InfoCrystal
© Anselm Spoerri
Query Formulation – Other Ways to Visualize “Power Set”
“Bracket”-visualization [Eibl 1999]
© Anselm Spoerri
Query Formulation – “Power Set” – NIRVE
© Anselm Spoerri