Lecture 8
Topic Assignment
Information Visualization – Origins
Information Visualizer
Visualization of Hierarchical Data
© Anselm Spoerri
Assignment Instructions
Topics
– TBA
Goal
– Identify “Top 25” Systems related to each Topic
– Use searchCrystal to find systems
www.searchcrystal.com and create free account for Full Version
– Save different result lists
– Compare and edit result lists to produce list of 25 systems
– Email instructor final list from within searchCrystal
Task: figure out how to prune result list in searchCrystal
– Identify
“Top 1”
System for Each Topic
– Categorize in terms
– Perceptual Coding and Types of Interaction Used
© Anselm Spoerri
Assignment Instructions
Create Presentation  Powerpoint
– Reflect on your Search Strategies
– Effective Search Terms
– Select “Best” System for each Topic
Presentation Template
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisOnline/PresentationTemplate.ppt
– Provide Screenshots
– Categorize using Perceptual Coding and Types of Interaction Toolbox
DUE = Monday Noon Week 11
– Host Powerpoint file online and email instructor URL
© Anselm Spoerri
Recap – Information Visualization – “Toolbox”
Perceptual Coding
Interaction
Position
Direct Manipulation
Size
Immediate Feedback
Orientation
Linked Displays
Texture
Animate Shift of Focus
Shape
Color
Shading
Depth Cues
Surface
Dynamic Sliders
Semantic Zoom
Focus+Context
Details-on-Demand
Output  Input
Motion
Stereo
Proximity
Similarity
Continuity
Information Density
Maximize Data-Ink Ratio
Maximize Data Density
Minimize Lie factor
Connectedness
Closure
Containment
© Anselm Spoerri
Information Visualization – Origins
1 Thought Leaders
– Bertin, French cartographer, "The Semiology of Graphics (1967/1983)
– Tufte (1983) emphasizes maximizing the density of useful information
2 Statistical Visualization
– Tukey (1977) “Exploratory Data Analysis”: rapid statistical insight into data
– Cleveland and McGilll (1988) "Dynamic Graphics for Statistics“
– Analysis of multi–dimensional, multi–variable data
3 Scientific Visualization
– Satellites sending large quantities of data  how to better understand it?
4 Computer Graphics and Artificial Intelligence
– Mackinlay (1986) formalized Bertin's design theory; added psychophysical
data, and used to generate automatic design of data
5 User Interface and Human Computer Interaction
– Card, Robertson & Mackinlay (1989) coined “Information Visualization” and
used animation and distortion to interact with large data sets in a system
called the “Information Visualizer”
© Anselm Spoerri
Stacked Scatterplots - Brushing
© Anselm Spoerri
SeeSoft – Software Visualization  Linked Displays
Line = single line of source code and its length
Color = different properties
© Anselm Spoerri
Information Retrieval
Need for Low-Cost,
Instant Access of
Objects in Use
© Anselm Spoerri
Information Retrieval  Low-Cost Information Workspace
Lower Cost of Info Access
• Large Workspace
• Rooms
• 3D and Animation
• Agents: delegate workload
• Search
• Organize  Cluster agent
• Interacting  Interactive Objs
• Real-Time Interaction
• Rapid Interaction
tuned to Human Constants
• Visual Abstractions
• Cone Tree
for hierarchies
• Perspective Wall
for linear structures
© Anselm Spoerri
Information Visualizer – Persistent Rooms
© Anselm Spoerri
Information Visualizer – Summary
Reduce Information Access Costs
Increase Screen Space  Rooms
Create Visual Abstractions
ConeTree
PerspectiveWall
Increase Information Density  3D and
Animation
 Overload Potential
 Create “Focus + Context” display with Fisheye Distortion
 Logarithmic Animation to rapidly move Object into Focus
 Object Constancy
 Shift Cognitive Load to Perceptual System
Tune System Response Rates to “Human Constants”
– 0.1 second, 1 second, 10 seconds

Cognitive Co-Processor
© Anselm Spoerri
Recap – Interaction – Mappings + Timings
Mapping Data to Visual Form
1. Variables Mapped to “Visual Display”
2. Variables Mapped to “Controls”
 “Visual Display” and “Controls” Linked
Interaction Responsiveness
“0.1” second
 Perception of Motion
 Perception of Cause & Effect
“1.0” second
 Status Feedback
“10” seconds
 Point & click, parallel requests
© Anselm Spoerri
Dynamic Queries & Starfields
Two Most Important Variables Mapped to “Scatterplot”
Other Variables Mapped to “Controls”
“Visual Display” and “Controls” Linked
© Anselm Spoerri
Dynamic Queries & Starfields
Download Video (… will take a while)
or
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “filmFinder.mpeg” and save
© Anselm Spoerri
Dynamic Queries & Starfields
Which Pre–attentive, Early Visual Processes Used?
 Motion, Position, Color, (Size)
How to choose two dimensions of Starfield?
 “Encode more important information more effectively”
 Choose two variables of most interest / importance
© Anselm Spoerri
Dynamic Queries & Starfields
Advantages of Dynamic Queries
over traditional query language such as SQL
 Make Query Formulation Easy = Interact with Sliders and Visual Objects
(SQL = Structured Query Language is difficult to master)
 Support Rapid, Incremental and Reversible Exploration
 Shift Cognitive Load to Perceptual System
 Selection by Pointing
Tight Coupling of Interface Components
 Link and Continuously Update the displays showing specific “states” of
software
(“page number” and “scrollbar position” linked)





Linked Display and Controls
Immediate Visual Feedback
Avoid “Null set” by having current selection limit further query refinement
Progressive Query Refinement
Details on Demand
© Anselm Spoerri
Starfields
Perceptual Coding
Position
Yes
Size
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
Yes
Continuity
Semantic Zoom
Yes
Connectedness
Focus+Context
Closure
Details-on-Demand
Yes
Containment
Output  Input
Yes
© Anselm Spoerri
Hierarchical Information
Pervasive
– File / Directory systems on computers
– Classifications / Taxonomies / Controlled
Vocabularies
– Software Menu structure
– Organization charts
– …
Main Visualization Schemes
– Indented Outlines
– Good for Searching
Bad for Structure
– Node-Link Trees
– Top-to-Bottom Layout
– 2D
– 3D : ConeTree
– Radial Layout
– 2D : SunBurst, Hyperbolic Trees
– 3D : H3 & Walrus
– Space-Filling Treemaps
© Anselm Spoerri
Hierarchical Data – Traditional Node-Link Layout
Allocate Space proportional to # of Children at Different Levels
© Anselm Spoerri
Traditional Node-Link Layout  SpaceTree
HCI Lab – University of Maryland
http://www.cs.umd.edu/hcil/spacetree/
Download Video (… will take a while)
or
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “orgchart.avi” and save
© Anselm Spoerri
3D ConeTree
Positive
Higher Information Density
Smooth animation
Negative
Occlusion
Non-trivial to implement
Requires horsepower
3D used to increase Information Density
Children laid out in a cylinder “below” parent
© Anselm Spoerri
Treemaps  Space-Filling Design
© Anselm Spoerri
Treemaps – “Slice & Dice”
© Anselm Spoerri
Treemap – Mapping Traditional Layout into Treemap
© Anselm Spoerri
Treemaps – Nested vs. Non-nested
Non-nested Tree-Map
Nested Tree-Map
© Anselm Spoerri
Treemaps – Examples
SmartMoney
http://www.smartmoney.com/marketmap/
The Hive Group
http://www.hivegroup.com/solutions/demos/stocks.html
Newsmap
http://www.marumushi.com/apps/newsmap/newsmap.cfm
© Anselm Spoerri
Treemaps – Video & Demos
Treemap 4.0 Video
– Video: http://www.cs.umd.edu/hcil/treemap/doc4.0/Video/TotalWithBuffer.html
Treemap Demo
– Applet: http://www.cs.umd.edu/hcil/treemap/applet/index.shtml
– Download: http://www.cs.umd.edu/hcil/treemap/demos/
Launch Demo
– File > NBA Statistics
– “Main” Tab: choose “Squarified”
– Examine “Label” Tab
Task
– Find 3 top Players who have played at least 80 games
and scored the highest “Points per Game”
History of Treemaps
http://www.cs.umd.edu/hcil/treemap-history/index.shtml
© Anselm Spoerri
Treemaps
Which Problem do Treemaps aim to address?
 Visualize hierarchical structure as well as content of (atom) nodes
What are Treemaps’ main design goals?
 Space–filling (High Data / Ink Ratio)
 “Structure” is represented using Enclosure / Containment
 “Content” is represented using Area
Pre–attentive, Early Visual Processes Used?
 Position, Size = Area, Color and Containment
© Anselm Spoerri
Treemap
Data = Hierarchy
Perceptual Coding
Position
Yes
Size
Yes
Orientation
Texture
Yes
Shape
Color
Yes
Shading
Interaction
Depth Cues
Surface
Motion
Yes
Stereo
Proximity
Non-nested
Nested
Yes
Direct Manipulation
Yes
Immediate Feedback
Yes
Linked Displays
Yes
Logarithmic Shift of Focus
Similarity
Dynamic Sliders
Yes
Continuity
Semantic Zoom
Yes
Connectedness
Focus+Context
Closure
Details-on-Demand
Containment
Yes
Yes
Output  Input
© Anselm Spoerri
Questions – Treemaps
•
What are the strength’s of Treemaps?
What are the issues / weaknesses of Treemaps?
What are the visual properties that make them easier or harder to use?




Easy to identify “Largest” because of size = area coding
Easy to identify “Type” of atom node because of color coding
Structure can be difficult infer: borders help, but consumes space
“Long-Thin Aspect Ratio” issue and “Area” can be difficult to estimate
Which has bigger area?
•
When is a nested display more effective than a non-nested display?
Nested
Non-nested
 To make structure easier to see
© Anselm Spoerri
Treemaps – Other Layout Algorithms
Hard to Improve Aspect Ratio and Preserve Ordering
Slice-and-dice
Ordered,
very bad aspect ratios
stable
Squarified
Unordered
best aspect ratios
medium stability
© Anselm Spoerri
Treemaps – 1,000,000 items
http://www.cs.umd.edu/hcil/VisuMillion/
© Anselm Spoerri
Treemaps – Shading
Visualization Group - Technical University of Eindhoven
http://www.win.tue.nl/vis/
Borderless Treemap  difficult to see structure of hierarchy
CushionTreemap
SequoiaView
© Anselm Spoerri
Treemaps – Shading
© Anselm Spoerri
Treemaps – PhotoMesa
Quantum Treemaps / Bubblemaps for a Zoomable Image Browser
by B. B. Bederson
http://www.cs.umd.edu/hcil/photomesa/
Download Video (… will take a while)
or
http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “photoMesa.mpeg” and save
© Anselm Spoerri
Hierarchical Data – Radial Space-Filling  SunBurst
http://www.cc.gatech.edu/gvu/ii/sunburst/
© Anselm Spoerri
Botanical Visualization of Huge Hierarchies
Visualization Group - Technical University of Eindhoven
http://www.win.tue.nl/vis/
© Anselm Spoerri
Botanical Visualization of Huge Hierarchies
© Anselm Spoerri
Botanical Visualization of Huge Hierarchies
© Anselm Spoerri
Hierarchical Information – Recap
Traditional
Treemap
ConeTree
SunTree
Botanical
© Anselm Spoerri