Post on 23-Jan-2016
© Anselm Spoerri
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 Templatehttp://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”
Position
Size
Orientation
Texture
Shape
Color
Shading
Depth Cues
Surface
Motion
Stereo
Proximity
Similarity
Continuity
Connectedness
Closure
Containment
Direct Manipulation
Immediate Feedback
Linked Displays
Animate Shift of Focus
Dynamic Sliders
Semantic Zoom
Focus+Context
Details-on-Demand
Output Input
Maximize Data-Ink Ratio
Maximize Data Density
Minimize Lie factor
Perceptual Coding Interaction
Information Density
© 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 RoomsCreate Visual Abstractions
ConeTreePerspectiveWall
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
Position Yes
Size
Orientation
Texture
Shape
Color Yes
Shading
Depth Cues
Surface
Motion Yes
Stereo
Proximity Yes
Similarity Yes
Continuity
Connectedness
Closure
Containment
Direct Manipulation Yes
Immediate Feedback Yes
Linked Displays Yes
Logarithmic Shift of Focus
Dynamic Sliders Yes
Semantic Zoom Yes
Focus+Context
Details-on-Demand Yes
Output Input Yes
Perceptual Coding
Interaction
© 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
3D used to increase Information Density
Children laid out in a cylinder “below” parent
Positive
Higher Information Density
Smooth animation
Negative
Occlusion
Non-trivial to implement
Requires horsepower
© 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
Position Yes
Size Yes
Orientation
Texture Yes
Shape
Color Yes
Shading
Depth Cues
Surface
Motion Yes
Stereo
Proximity Yes
Similarity
Continuity
Connectedness
Closure
Containment Yes
Direct Manipulation Yes
Immediate Feedback Yes
Linked Displays Yes
Logarithmic Shift of Focus
Dynamic Sliders Yes
Semantic Zoom Yes
Focus+Context
Details-on-Demand Yes
Output Input
Perceptual Coding
Interaction
Non-nestedNested
Data = Hierarchy
© 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?
To make structure easier to see
Non-nestedNested
© Anselm Spoerri
Treemaps – Other Layout Algorithms
Hard to Improve Aspect Ratio and Preserve Ordering
Slice-and-diceOrdered, very bad aspect ratios stable
SquarifiedUnorderedbest aspect ratios medium stability
© Anselm Spoerri
Treemaps – 1,000,000 items
http://www.cs.umd.edu/hcil/VisuMillion/
© Anselm Spoerri
Treemaps – Shading
Borderless Treemap difficult to see structure of hierarchy
CushionTreemap SequoiaView
Visualization Group - Technical University of Eindhoven http://www.win.tue.nl/vis/
© 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
TreemapTraditional
ConeTree SunTree Botanical