© 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 and create free account for Full Version –Save different result lists –Compare and edit result lists to produce list of 25 systems – 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 – Provide Screenshots –Categorize using Perceptual Coding and Types of Interaction Toolbox DUE = Monday Noon Week 11 –Host Powerpoint file online and 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 lengthColor = 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 VideoDownload Video (… will take a while) or 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 PositionYes Size Orientation Texture Shape ColorYes Shading Depth Cues Surface MotionYes Stereo ProximityYes SimilarityYes Continuity Connectedness Closure Containment Direct ManipulationYes Immediate FeedbackYes Linked DisplaysYes Logarithmic Shift of Focus Dynamic SlidersYes Semantic ZoomYes Focus+Context Details-on-DemandYes Output  InputYes 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 Download VideoDownload Video (… will take a while) or 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 The Hive Group Newsmap

© Anselm Spoerri Treemaps – Video & Demos Treemap 4.0 Video –Video: Treemap Demo –Applet: –Download: 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

© 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 PositionYes SizeYes Orientation Texture Yes Shape ColorYes Shading Depth Cues Surface MotionYes Stereo Proximity Yes Similarity Continuity Connectedness Closure ContainmentYes Direct ManipulationYes Immediate FeedbackYes Linked DisplaysYes Logarithmic Shift of Focus Dynamic SlidersYes Semantic Zoom Yes Focus+Context Details-on-DemandYes Output  Input Perceptual Coding Interaction Non-nested Nested 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-nested Nested

© 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

© Anselm Spoerri Treemaps – Shading Borderless Treemap  difficult to see structure of hierarchy CushionTreemap SequoiaView Visualization Group - Technical University of Eindhoven

© Anselm Spoerri Treemaps – Shading

© Anselm Spoerri Treemaps – PhotoMesa Quantum Treemaps / Bubblemaps for a Zoomable Image Browser by B. B. Bederson Download VideoDownload Video (… will take a while) or and right click on “photoMesa.mpeg” and save

© Anselm Spoerri Hierarchical Data – Radial Space-Filling  SunBurst

© Anselm Spoerri Botanical Visualization of Huge Hierarchies Visualization Group - Technical University of Eindhoven

© Anselm Spoerri Botanical Visualization of Huge Hierarchies

© Anselm Spoerri Botanical Visualization of Huge Hierarchies

© Anselm Spoerri Hierarchical Information – Recap Treemap Traditional ConeTree SunTree Botanical