1
|
- Topic Assignment
- Information Visualization – Origins
- Information Visualizer
- Visualization of Hierarchical Data
|
2
|
- Topics
- 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
|
3
|
- Create Presentation è
Powerpoint
- Reflect on your Search Strategies
- 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
|
4
|
|
5
|
- 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”
|
6
|
|
7
|
|
8
|
|
9
|
|
10
|
|
11
|
- Reduce Information Access Costs
- Increase Screen Space è
Rooms
- Create Visual Abstractions
- 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
|
12
|
- Mapping Data to Visual Form
- Variables Mapped to “Visual Display”
- Variables Mapped to “Controls”
- “Visual Display” and “Controls” Linked
- Interaction Responsiveness
- “0.1” second
- Perception of Motion
- Perception of Cause & Effect
- “1.0” second
- “10” seconds
- Point & click, parallel requests
|
13
|
|
14
|
|
15
|
- 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
|
16
|
- 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
|
17
|
|
18
|
- 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
- Radial Layout
- 2D : SunBurst, Hyperbolic Trees
- 3D : H3 & Walrus
- Space-Filling Treemaps
|
19
|
|
20
|
- HCI Lab – University of Maryland http://www.cs.umd.edu/hcil/spacetree/
|
21
|
- Positive
- Higher Information Density
- Smooth animation
- Negative
- Occlusion
- Non-trivial to implement
- Requires horsepower
|
22
|
|
23
|
|
24
|
|
25
|
|
26
|
- 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
|
27
|
- 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
|
28
|
- 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
|
29
|
|
30
|
- 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
|
31
|
- Hard to Improve Aspect Ratio and Preserve Ordering
|
32
|
|
33
|
- Borderless Treemap è difficult
to see structure of hierarchy
- CushionTreemap SequoiaView
|
34
|
|
35
|
- Quantum Treemaps / Bubblemaps for a Zoomable Image Browser
by B. B. Bederson http://www.cs.umd.edu/hcil/photomesa/
|
36
|
|
37
|
|
38
|
|
39
|
|
40
|
|