© anselm spoerri lecture 8 topic assignment information visualization – origins information...

40
© Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

Post on 23-Jan-2016

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Lecture 8

Topic Assignment

Information Visualization – Origins

Information Visualizer

Visualization of Hierarchical Data

Page 2: © 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

Page 3: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 4: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 5: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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”

Page 6: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Stacked Scatterplots - Brushing

Page 7: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

SeeSoft – Software Visualization Linked Displays

Line = single line of source code and its length Color = different properties

Page 8: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Information Retrieval

Need for Low-Cost,Instant Access of Objects in Use

Page 9: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 10: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Information Visualizer – Persistent Rooms

Page 11: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 12: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 13: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Dynamic Queries & Starfields

Two Most Important Variables Mapped to “Scatterplot”

Other Variables Mapped to “Controls”

“Visual Display” and “Controls” Linked

Page 14: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 15: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 16: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 17: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 18: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 19: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Hierarchical Data – Traditional Node-Link Layout

Allocate Space proportional to # of Children at Different Levels

Page 20: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 21: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 22: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Treemaps Space-Filling Design

Page 23: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Treemaps – “Slice & Dice”

Page 24: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Treemap – Mapping Traditional Layout into Treemap

Page 25: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Treemaps – Nested vs. Non-nested

Non-nested Tree-Map Nested Tree-Map

Page 26: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 27: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 28: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 29: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 30: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 31: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 32: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Treemaps – 1,000,000 items

http://www.cs.umd.edu/hcil/VisuMillion/

Page 33: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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/

Page 34: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Treemaps – Shading

Page 35: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© 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

Page 36: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Hierarchical Data – Radial Space-Filling SunBurst

http://www.cc.gatech.edu/gvu/ii/sunburst/

Page 37: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Botanical Visualization of Huge Hierarchies

Visualization Group - Technical University of Eindhoven http://www.win.tue.nl/vis/

Page 38: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Botanical Visualization of Huge Hierarchies

Page 39: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Botanical Visualization of Huge Hierarchies

Page 40: © Anselm Spoerri Lecture 8 Topic Assignment Information Visualization – Origins Information Visualizer Visualization of Hierarchical Data

© Anselm Spoerri

Hierarchical Information – Recap

TreemapTraditional

ConeTree SunTree Botanical