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

2. © 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 www.searchcrystal.com –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. © 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

4. © 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

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

6. © Anselm Spoerri Stacked Scatterplots - Brushing

7. © Anselm Spoerri SeeSoft – Software Visualization  Linked Displays Line = single line of source code and its lengthColor = different properties

8. © Anselm Spoerri Information Retrieval Need for Low-Cost, Instant Access of Objects in Use

9. © 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

10. © Anselm Spoerri Information Visualizer – Persistent Rooms

11. © 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

12. © 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

13. © Anselm Spoerri Dynamic Queries & Starfields Two Most Important Variables Mapped to “Scatterplot” Other Variables Mapped to “Controls” “Visual Display” and “Controls” Linked

14. © Anselm Spoerri Dynamic Queries & Starfields Download VideoDownload Video (… will take a while) or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ and right click on “filmFinder.mpeg” and save

15. © 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

16. © 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

17. © 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

18. © 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

19. © Anselm Spoerri Hierarchical Data – Traditional Node-Link Layout Allocate Space proportional to # of Children at Different Levels

20. © Anselm Spoerri Traditional Node-Link Layout  SpaceTree HCI Lab – University of Maryland http://www.cs.umd.edu/hcil/spacetree/ http://www.cs.umd.edu/hcil/spacetree/ Download VideoDownload Video (… will take a while) or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ and right click on “orgchart.avi” and save

21. © 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

22. © Anselm Spoerri Treemaps  Space-Filling Design

23. © Anselm Spoerri Treemaps – “Slice & Dice”

24. © Anselm Spoerri Treemap – Mapping Traditional Layout into Treemap

25. © Anselm Spoerri Treemaps – Nested vs. Non-nested Non-nested Tree-Map Nested Tree-Map

26. © Anselm Spoerri Treemaps – Examples SmartMoney http://www.smartmoney.com/marketmap/ 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. © Anselm Spoerri Treemaps – Video & Demos Treemap 4.0 Video –Video: http://www.cs.umd.edu/hcil/treemap/doc4.0/Video/TotalWithBuffer.html 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 http://www.cs.umd.edu/hcil/treemap/applet/index.shtml –Download: http://www.cs.umd.edu/hcil/treemap/demos/ 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 http://www.cs.umd.edu/hcil/treemap-history/index.shtml

28. © 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

29. © 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

30. © 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

31. © 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

32. © Anselm Spoerri Treemaps – 1,000,000 items http://www.cs.umd.edu/hcil/VisuMillion/

33. © 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/ http://www.win.tue.nl/vis/

34. © Anselm Spoerri Treemaps – Shading

35. © Anselm Spoerri Treemaps – PhotoMesa Quantum Treemaps / Bubblemaps for a Zoomable Image Browser by B. B. Bederson http://www.cs.umd.edu/hcil/photomesa/ http://www.cs.umd.edu/hcil/photomesa/ Download VideoDownload Video (… will take a while) or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ and right click on “photoMesa.mpeg” and save

36. © Anselm Spoerri Hierarchical Data – Radial Space-Filling  SunBurst http://www.cc.gatech.edu/gvu/ii/sunburst/

37. © Anselm Spoerri Botanical Visualization of Huge Hierarchies Visualization Group - Technical University of Eindhoven http://www.win.tue.nl/vis/ http://www.win.tue.nl/vis/

38. © Anselm Spoerri Botanical Visualization of Huge Hierarchies

39. © Anselm Spoerri Botanical Visualization of Huge Hierarchies

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