cushion treemaps and botanical visualization yimeng dou [email protected]

37
Cushion Treemaps and Cushion Treemaps and Botanical Visualization Botanical Visualization Yimeng Dou Yimeng Dou 05-16-2002 05-16-2002 [email protected] [email protected]

Upload: cameron-wescott

Post on 14-Dec-2015

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Cushion Treemaps Cushion Treemaps and Botanical and Botanical VisualizationVisualization

Yimeng DouYimeng Dou

[email protected]@ics.uci.edu

Page 2: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Overview

Trees and Cushion TreemapsSequoiaView Software

Botanical Trees

Page 3: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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

Page 4: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Example: Trees

Page 5: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

rootExample: Trees

Page 6: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

A disk with color scheme option off.

Page 7: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Same disk with color scheme on. Treemap

Page 8: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Treemap

Efficient use of display spaceConstructed via recursive

subdivision of the initial rectangleSize of each rectangle is

proportional to the size of the nodeSubdivision is alternated per level:

first horizontally, next vertically…

Page 9: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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?

Page 10: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Example: 3600 Employees

Page 11: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 12: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Nested Tree-Map Non-nested Tree-Map

Page 13: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu
Page 14: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 15: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

The Parabolic Surfice

Z is height of such a surface.

Page 16: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 17: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu
Page 18: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu
Page 19: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

<- Sound Garden

Sound Garden Studio Albums Only

Cure

Cure--Disintegration

Page 20: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu
Page 21: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu
Page 22: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu
Page 23: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Cushion Treemaps (Conclusion)

Efficient, quick generation of treemap image

Effective (shading provide a strong cue for identifying substructures)

Compact, no scrolling neccessaryEasy to implement (with the shown

algorithm)Easy to control with intuitive parametersWide applicability

Page 24: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 25: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Strand Model

• Leaves are connected to root via a strand

• Area of branch is proportional to number of leaves.

Page 26: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Node and Link Diagram and Its Corresponding

Botanical Tree

Page 27: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 28: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

An Example Of A Messy Tree

Page 29: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 30: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Contraction Long Branches

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

Page 31: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 32: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

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.

Page 33: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Final Results

Page 34: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Complete Hard Disk

Page 35: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

A Unix Home Directory

Page 36: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

ConclusionsCone 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.

Page 37: Cushion Treemaps and Botanical Visualization Yimeng Dou 05-16-2002ydou@ics.uci.edu

Special thanks to Special thanks to Daniel Loewus-Daniel Loewus-Deitch for providing graphs of his Deitch for providing graphs of his

music library.music library.

ENDEND