Cushion Treemaps and Botanical Visualization Yimeng Dou

Slides:



Advertisements
Similar presentations
H3: Laying Out Large Directed Graphs in 3D Hyperbolic Space Tamara Munzner, Stanford University.
Advertisements

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Trees and Cushions Jack van Wijk Eindhoven University of Technology Treemap Workshop, May 31, 2001 HCIL, University of Maryland.
Information Visualization: Trees Chris North cs3724: HCI.
Jun 2, 2014 IAT Trees2 Chapter 3.2 of Spence ______________________________________________________________________________________ SCHOOL OF INTERACTIVE.
TREES Chapter 6. Trees - Introduction  All previous data organizations we've studied are linear—each element can have only one predecessor and successor.
Inventor Or How to build things.
The Building Blocks of Design
Project Presentation Group 2: Katharina Plugge Michael Eichler.
Abstract Syntax Tree Rendering Noah Brickman CMPS 203.
CSE332: Data Abstractions Lecture 10: More B-Trees Tyler Robison Summer
CSE332: Data Abstractions Lecture 9: B Trees Dan Grossman Spring 2010.
Visual Realism for the Visualization of Software Metrics & Visualizing Relations in Hierarchical Data using Spline Bundles Danny Holten Reconstructor.
Tree-Maps: A Space-Filling Approach to the Visualization of Hierarchical Information Structures Brian Johnson Ben Shneiderman (HCIL TR 91-06) Steve Betten.
Cone Trees and Collapsible Cylindrical Trees
Chapter 3: Data Storage and Access Methods
Ordered and Quantum Treemaps: Making Effective Use of 2D Space to Display Hierarchies. By Bederson, B.B., Shneiderman, B., and Wattenberg, M. ACM Transactions.
Tree-Maps: Visualizing Hierarchical Data Hench Qian & Bill Shapiro September 21, 1999.
Tree-Maps Cyntrica Eaton February 11, 2001 A Space-Filling Approach to the Visualization of Hierarchical Information Structures Brian Johnson Ben Shneiderman.
Fundamentals of Python: From First Programs Through Data Structures
A Binary Search Tree Implementation Chapter 25 Copyright ©2012 by Pearson Education, Inc. All rights reserved.
Presentation of Data.
1 ENTITY test is port a: in bit; end ENTITY test; DRC LVS ERC Circuit Design Functional Design and Logic Design Physical Design Physical Verification and.
Mind Maps A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea.
Tree Structures (Hierarchical Information) cs5764: Information Visualization Chris North.
CS 61B Data Structures and Programming Methodology Aug 11, 2008 David Sun.
Initial ideas Drawing with Word/PowerPoint Drawing with SerifDraw
Tree-Maps: A Space-Filling Approach to the Visualization of Hierarchical Information Structures Presented by: Daniel Loewus-Deitch.
Oct 7, 2013 IAT Trees2 Chapter 3.2 of Spence ______________________________________________________________________________________ SCHOOL OF INTERACTIVE.
131 Agenda Overview Review Roles Lists Libraries Columns.
H3: Laying Out Large Directed Graphs in 3D Hyperbolic Space Tamara Munzner Stanford University 元智資工所 系統實驗室 楊錫謦 1999/11/3.
Chapter 8. Handouts, Study Guides, and Visuals By: Clara A. Lopez.
Michael Burch, Steffen Lohmann, Daniel Pompe, Daniel Weiskopf BY: Farah Kamw.
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
VAST 2011 Sebastian Bremm, Tatiana von Landesberger, Martin Heß, Tobias Schreck, Philipp Weil, and Kay Hamacher Interactive-Graphics Systems TU Darmstadt,
Introduction Of Tree. Introduction A tree is a non-linear data structure in which items are arranged in sequence. It is used to represent hierarchical.
Information Visualization –III Treemaps and Fisheye Views.
IAT 814 Trees Chapter 3.2 of Spence ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS +
Interacting with Huge Hierarchies: Beyond Cone Trees Jeromy Carriere, Rick Kazman Computer Graphics Lab, Department of Computer Science University of Waterloo,
Data Visualization Data Visualization. Business Analytics (BA) Overview.
An Internet of Things: People, Processes, and Products in the Spotfire Cloud Library Dr. Brand Niemann Director and Senior Data Scientist/Data Journalist.
Starting at Binary Trees
1 Searching Searching in a sorted linked list takes linear time in the worst and average case. Searching in a sorted array takes logarithmic time in the.
Fall 2002CS/PSY Information Visualization 2 Case Study: Portraying Hierarchies Visualizing hierarchies  Variety of techniques Traditional tree views,
Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge.
Nov 26, 2009 IAT Visualizing Trees ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
Design Studies 20 ‘Show Off’ Project How to make a computer monitor In Google Sketchup By: Liam Jack.
General “Search” or “Find” vs “Manage” “Edit” has no second level tab. is always under the “Create” tab “Create” or “Add” – need consistency Clickable.
Trees : Part 1 Section 4.1 (1) Theory and Terminology (2) Preorder, Postorder and Levelorder Traversals.
Chapter 11 Information Visualization
Binary Search Trees (BSTs) 18 February Binary Search Tree (BST) An important special kind of binary tree is the BST Each node stores some information.
M180: Data Structures & Algorithms in Java Trees & Binary Trees Arab Open University 1.
Week 10 - Friday.  What did we talk about last time?  Graph representations  Adjacency matrix  Adjacency lists  Depth first search.
Week 15 – Wednesday.  What did we talk about last time?  Review up to Exam 1.
BINARY TREES Objectives Define trees as data structures Define the terms associated with trees Discuss tree traversal algorithms Discuss a binary.
What’s New in SkillPort 7 for the End User. The Login Page Customize the login page Add your logo, change colors, graphics and welcome text.
1 Trees : Part 1 Reading: Section 4.1 Theory and Terminology Preorder, Postorder and Levelorder Traversals.
Chapter 11. Chapter Summary  Introduction to trees (11.1)  Application of trees (11.2)  Tree traversal (11.3)  Spanning trees (11.4)
Elements of Design Chapter 10. FORM & SHAPE  Shapes are the simple outlines of objects and are flat.  Circles, squares, triangles etc.  Forms have.
Non Linear Data Structure
IAT 355 Trees2 ______________________________________________________________________________________.
Distance Computation “Efficient Distance Computation Between Non-Convex Objects” Sean Quinlan Stanford, 1994 Presentation by Julie Letchner.
ClubRunner Tutorial Home Page Stories.
Naming and Directories
cs5984: Information Visualization Chris North
Naming and Directories
Trees & Forests D. J. Foreman.
Binary Trees CS-2851 Dr. Mark L. Hornick.
Information Visualization 2 Case Study: Portraying Hierarchies
Presentation transcript:

Cushion Treemaps and Botanical Visualization Yimeng Dou

Overview  Trees and Cushion Treemaps  SequoiaView Software  Botanical Trees

Cushion Treemaps  Provide shading as a strong extra cue to emphasize hierarchical structure.  Especially good for answering global questions like “Why is my disk full?”

Example: Trees

root Example: Trees

A disk with color scheme option off.

Same disk with color scheme on. Treemap

Treemap  Efficient use of display space  Constructed via recursive subdivision of the initial rectangle  Size of each rectangle is proportional to the size of the node  Subdivision is alternated per level: first horizontally, next vertically…

Treemap  Most useful when the feature we want to display is size  Not very good for visualizing structure of the tree (Worst case is balanced tree)  What happens if it’s a perfectly balanced tree of items all the same size?

Example: 3600 Employees

Nested Treemap  Use slightly smaller rectangles. Siblings are enclosed by a margin.  Require viewer’s effort when tree is deeply nested.  Coloring won’t help much. It does not provide a natural hierarchical structure, and we want to use color to show other attributes.

Nested Tree-MapNon-nested Tree-Map

The Idea Behind Cushion Treemaps  Human visual system interprets variations in shade as illuminated surfaces. So shape can be constructed to encode tree structure. Add a bump to each of the two subdivisions, and repeat recursively.

The Parabolic Surfice Z is height of such a surface.

Interaction—SequoiaView  SequoiaView is an interactive system for the analysis and visualization of large tree structures.  Cushion tree can be easily constructed and If there is any change, Sequoia can easily refresh the tree.  User can define size range, color scheme, can zoom in on sub-trees, zoon out again, and select preferred color scheme and filters.

<- Sound Garden Sound Garden Studio Albums Only Cure Cure-- Disintegration

Cushion Treemaps (Conclusion)  Efficient, quick generation of treemap image  Effective (shading provide a strong cue for identifying substructures)  Compact, no scrolling neccessary  Easy to implement (with the shown algorithm)  Easy to control with intuitive parameters  Wide applicability

Botanical Visualization of Huge Hierarchies—Idea  People can easily see branches, leaves and their arrangement in a botanical tree.  We can use the idea of botanical modeling for Information Visualization, and map folders to branches and files to leaves.  The model used—strand model (dates back to Leonardo Da Vinci) by Holton.

Strand Model Leaves are connected to root via a strand Area of branch is proportional to number of leaves.

Node and Link Diagram and Its Corresponding Botanical Tree

Problems  Continuing branches representing a directory can’t be easily followed at the branching point.  Those directories with many sub- directories lead to thin and long branches.  Leaves tend to clutter.

An Example Of A Messy Tree

Continuation Without Extrusion Smooth continuing branches (by adding a smooth transition between two cylinders). It makes clear what the status of each branch is. We can also use different color as an extra cue.

Contraction Long Branches Conditionally remove the stem in the subbranch of the continuing branch. It replaces the binary tree with a general tree.

Files As Fruits  To prevent cluttering of leaves, we can use an icon to represent a list of files and their sizes. It can be modeled as a fruit consisting of a sphere with spots for each file.(Phi-ball)  Area of slices on the sphere is proportional to the size of the corresponding files.  When there is only one file, using cone instead of planar disks pasted on the sphere.

Phi-balls Cone’s length c equals to the square root of the ratio of the file size and the total size of the file list.

Final Results

Complete Hard Disk

A Unix Home Directory

Conclusions  Cone covered phi-ball is good for visualizing a list of items, also useful for other applications  Branches and cones hardly ever collide with no special prevention  Efficient use of space by mathematical, algorithmic and physically based methods.

Special thanks to Daniel Loewus- Deitch for providing graphs of his music library. END