Tree-Maps: A Space-Filling Tree-Maps: A Space-Filling Approach to the Visualization of Approach to the Visualization of

Hierarchical Information StructuresHierarchical Information Structures

Presented by:Presented by:

Daniel Loewus-DeitchDaniel Loewus-Deitch

IntroductionIntroduction

Novel method for visualizing hierarchies.Novel method for visualizing hierarchies.– Makes 100% use of available spaceMakes 100% use of available space

Maps the full hierarchy onto the screen in Maps the full hierarchy onto the screen in a “space-filling manner.”a “space-filling manner.”– Called Tree-MapsCalled Tree-Maps

Interactive ControlInteractive Control– Allows users to specify presentation of both Allows users to specify presentation of both

structural and content informationstructural and content information

IntroductionIntroduction

Sections of hierarchy with more important Sections of hierarchy with more important information are allocated more display space.information are allocated more display space.

Collection of rectangular boxes represent the Collection of rectangular boxes represent the tree structure.tree structure.

Best suited to hierarchies whereBest suited to hierarchies where– The content of the leaf nodes and the structure of the The content of the leaf nodes and the structure of the

hierarchy are most important.hierarchy are most important.– The content information associated with internal The content information associated with internal

nodes is largely derived from their children.nodes is largely derived from their children.

Main ObjectivesMain Objectives

Efficient space utilizationEfficient space utilization

InteractivityInteractivity

ComprehensionComprehension

EstheticsEsthetics

Motivation Motivation (Problems with Current Methods)(Problems with Current Methods)

Traditional methods for displaying Traditional methods for displaying hierarchies can be classified into 3 hierarchies can be classified into 3 categories:categories:– Listings Listings – OutlinesOutlines– Tree diagramsTree diagrams

ListingsListings

Can provide detailed content information.Can provide detailed content information.

Present structural information poorly.Present structural information poorly.– Requires users to parse path information and Requires users to parse path information and

move manually through the hierarchy to get a move manually through the hierarchy to get a real idea of its structure.real idea of its structure.

OutlinesOutlines

Can nicely provide both structural and Can nicely provide both structural and content.content.

Structure can only be viewed a few lines at Structure can only be viewed a few lines at a time.a time.

Inadequate for displaying a hierarchical Inadequate for displaying a hierarchical structure with more than a few hundred structure with more than a few hundred nodes.nodes.

Tree DiagramsTree Diagrams

Excellent for small structures.Excellent for small structures.

Make poor use of available display space.Make poor use of available display space.– Too much space used up for background.Too much space used up for background.

Little content information.Little content information.– Presenting additional information clutters the Presenting additional information clutters the

display space.display space.

Why Tree-Maps are a good Why Tree-Maps are a good alternativealternative

They use display space efficiently.They use display space efficiently.Can provide structural information Can provide structural information implicitly.implicitly.– Eliminates the need to draw internal nodes.Eliminates the need to draw internal nodes.

Provide an overall (global) view of the Provide an overall (global) view of the entire hierarchy.entire hierarchy.– Makes navigation and orientation easier.Makes navigation and orientation easier.

Provides creative visual cues to Provides creative visual cues to communicate content information.communicate content information.

Presenting DirectoriesPresenting Directories

Problems with current methods:Problems with current methods:– None provide a graphical representation of None provide a graphical representation of

the relative sizes of files or directories.the relative sizes of files or directories.– Command line listings force user to piece Command line listings force user to piece

directory tree together manually.directory tree together manually.– Windows obscure each other and require too Windows obscure each other and require too

much effort to be arranged in any kind of much effort to be arranged in any kind of useful manner.useful manner.

– Icons only show the type of the file, but no Icons only show the type of the file, but no other properties.other properties.

Presenting DirectoriesPresenting Directories

Origin of Tree-Maps conceptOrigin of Tree-Maps concept– Venn diagramsVenn diagrams– Tree diagramsTree diagrams– Because these waste space, decided to use Because these waste space, decided to use

boxes instead of ovals, along with a bin-boxes instead of ovals, along with a bin-packing algorithm.packing algorithm.

– Worked well for small hierarchies only.Worked well for small hierarchies only.Nesting caused problems.Nesting caused problems.

Presenting DirectoriesPresenting Directories

Origin of Tree-Maps conceptOrigin of Tree-Maps concept– Discovered “slice and dice” method.Discovered “slice and dice” method.

Simple linear method (top-down).Simple linear method (top-down).

– Developed a weight-proportionate distribution.Developed a weight-proportionate distribution.– Added a pop-up dialog window for detailed Added a pop-up dialog window for detailed

content information.content information.– Simple color mapping helps distinguish Simple color mapping helps distinguish

various properties of files, such as type and various properties of files, such as type and size.size.

Tree Map MethodTree Map Method

Structural Information:Structural Information:– Interactive approach gives user control over Interactive approach gives user control over

how tree is displayed.how tree is displayed.– Requires that a weight be assigned to each Requires that a weight be assigned to each

node, which determines the size of that node, which determines the size of that node’s bounding box.node’s bounding box.

Tree Map MethodTree Map Method

Structural Information:Structural Information:– There are some properties that always hold, There are some properties that always hold,

maintaining a consistent relationship between maintaining a consistent relationship between the structure of the hierarchy and its Tree-the structure of the hierarchy and its Tree-Map representation (pg. 156).Map representation (pg. 156).

– Structural information is implicitly presented, Structural information is implicitly presented, but can be nested to explicitly indicate.but can be nested to explicitly indicate.

– Non-nested display explicity provides direct Non-nested display explicity provides direct selection only for leaf nodes.selection only for leaf nodes.

Tree Map MethodTree Map Method

Content Information:Content Information:– Variety of display properties determines how Variety of display properties determines how

the node is drawn.the node is drawn.– Color is the most important property.Color is the most important property.– Other properties include pitch of tone and Other properties include pitch of tone and

color saturation.color saturation.– Pop-up display provides information about the Pop-up display provides information about the

node currently under the cursor.node currently under the cursor.

Coping With SizeCoping With Size

Groups of small files can become Groups of small files can become indistinguishable (completely black indistinguishable (completely black regions).regions).

Zooming in on these regions helps the Zooming in on these regions helps the local structure become clear.local structure become clear.

Future ResearchFuture Research

Exploration of alternate structural Exploration of alternate structural partitioning schemes.partitioning schemes.

Appropriate visual display of both numeric Appropriate visual display of both numeric and non-numeric content information.and non-numeric content information.

Dynamic viewsDynamic views– Animated time sliceAnimated time slice

Future ResearchFuture Research

Extended operationsExtended operations– ZoomingZooming– MarkingMarking– SelectingSelecting– SearchingSearching

Space-Filling Software Space-Filling Software VisualizationVisualization

Presented by:Presented by:

Daniel Loewus-DeitchDaniel Loewus-Deitch

IntroductionIntroduction

SeeSys is a system that allows users to SeeSys is a system that allows users to visualize statistics associated with code visualize statistics associated with code that is divided hierarchically into that is divided hierarchically into subsystems, directories, and files.subsystems, directories, and files.

IntroductionIntroduction

Problems with current methods:Problems with current methods:– Ineffective for large software systems.Ineffective for large software systems.– Routines for producing flow charts, function Routines for producing flow charts, function

call graphs, and structure diagrams often call graphs, and structure diagrams often break down.break down.

– Incomprehensible, cluttered display.Incomprehensible, cluttered display.

IntroductionIntroduction

Project managers need a tool that Project managers need a tool that facilitates management issues of software facilitates management issues of software development.development.– Where new development activity is occurring.Where new development activity is occurring.– Which modules are error prone.Which modules are error prone.

Motivation for SeeSys came from AT&T’s Motivation for SeeSys came from AT&T’s massive communications software system.massive communications software system.Five questions for project managers (pg. Five questions for project managers (pg. 162)162)

IntroductionIntroduction

Statistical methods, alone, don’t provide Statistical methods, alone, don’t provide the the contextcontext necessary to make valid necessary to make valid analyses.analyses.SeeSys visualizes subsystem, directory, SeeSys visualizes subsystem, directory, and file statistics, but within appropriate and file statistics, but within appropriate context.context.– Preserves hierarchical relationships in the Preserves hierarchical relationships in the

code.code.– Makes it easy to relate the statistics to the Makes it easy to relate the statistics to the

components. components.

ApproachApproach

Based on idea that software system can Based on idea that software system can be decomposed into its individual be decomposed into its individual components.components.Subsystems labeled with letters.Subsystems labeled with letters.Subsystems are partitioned vertically and Subsystems are partitioned vertically and their area is based on a particular their area is based on a particular subsystem statistic.subsystem statistic.Allows for visual comparison of directories Allows for visual comparison of directories within a subsystem.within a subsystem.

ApproachApproach

Fill represents a second statistic, such as Fill represents a second statistic, such as indicating newly-developed code.indicating newly-developed code.

Zoom view to get a closer look at an Zoom view to get a closer look at an individual subsystem.individual subsystem.

Hierarchical decomposition immediately Hierarchical decomposition immediately relates the files to their directories and the relates the files to their directories and the directories to their subsystems.directories to their subsystems.– Makes cross unit comparisons easy.Makes cross unit comparisons easy.

ApproachApproach

The fill represents percentages.The fill represents percentages.– Allows for quick discovery of outliers.Allows for quick discovery of outliers.

ApplicationsApplications

Subsystem informationSubsystem information– Size and color brightness represent the size Size and color brightness represent the size

or individual subsystems.or individual subsystems.

Directory informationDirectory information– Each subsystem is partitioned vertically to Each subsystem is partitioned vertically to

show its internal directories.show its internal directories.– Area and color represent size.Area and color represent size.– Fill is related to new development.Fill is related to new development.– Figure 3 is the “software skyline.”Figure 3 is the “software skyline.”

ApplicationsApplications

Error-prone codeError-prone code– Directory spikes represent detail for directory Directory spikes represent detail for directory

bug fixing.bug fixing.– Subsystem g shows an example of a very Subsystem g shows an example of a very

high bug rate (figure 5), represented by the high bug rate (figure 5), represented by the light gray subsystem rectangle.light gray subsystem rectangle.

System evolutionSystem evolution– Animated display portrays growth through the Animated display portrays growth through the

software’s version releases.software’s version releases.– Shows history and trends of each subsystem.Shows history and trends of each subsystem.

The Visualization SystemThe Visualization System

SeeSys was designed to display software SeeSys was designed to display software metrics that have two propertiesmetrics that have two properties– Quantitative measureQuantitative measure– AdditiveAdditive

May be extended to display complexity May be extended to display complexity metrics.metrics.

User InteractionUser Interaction

Tracks mouse movements and shows Tracks mouse movements and shows extra information about the component extra information about the component that the mouse cursor is touching.that the mouse cursor is touching.– Active component indicated by a red Active component indicated by a red

highlighted boundary.highlighted boundary.

Available stats are shown on lower left Available stats are shown on lower left side of screen.side of screen.Clicking these stats creates a redrawn Clicking these stats creates a redrawn display focused on this particular statistic.display focused on this particular statistic.

User InteractionUser Interaction

Five buttons control various options such Five buttons control various options such as presence of fill and zoom activation.as presence of fill and zoom activation.ROWS slider controls the number of rows ROWS slider controls the number of rows in the display.in the display.Speed slider and frame slider control Speed slider and frame slider control animation.animation.During animation, one can watch the During animation, one can watch the active bar in the slider to see that active bar in the slider to see that particular subsystem’s evolution.particular subsystem’s evolution.

Display PrinciplesDisplay Principles

Based on 3 principles:Based on 3 principles:– Individual components can be assembled to Individual components can be assembled to

form the whole.form the whole.Allows users to see relationships between Allows users to see relationships between components.components.

– Pairs of components can be compared.Pairs of components can be compared.– Components can be disassembled into Components can be disassembled into

smaller components.smaller components.Allows structure of display to reflect structure of Allows structure of display to reflect structure of software.software.

Screen Real-EstateScreen Real-Estate

100% of display area is utilized.100% of display area is utilized.

Components with large statistics are Components with large statistics are visually dominant.visually dominant.

Zoom feature allows user to see small Zoom feature allows user to see small directories.directories.

Spatial RelationshipsSpatial Relationships

Takes advantage of human ability to Takes advantage of human ability to recognize spatial relationships.recognize spatial relationships.People relate each component to the People relate each component to the whole.whole.It is easier to see relationships between It is easier to see relationships between components if the heights of the components if the heights of the rectangles are equal.rectangles are equal.– Row slider allows user to choose number of Row slider allows user to choose number of

rows displayed for an optimal display.rows displayed for an optimal display.

ColorColor

Redundantly encodes size.Redundantly encodes size.

Can also be used to encode age, Can also be used to encode age, complexity, activity, number of complexity, activity, number of programmers, etc.programmers, etc.

ImplementationImplementation

Four linked views of data:Four linked views of data:– Colorful space-filling display.Colorful space-filling display.– Leftspace – controls, buttons, sliders.Leftspace – controls, buttons, sliders.– Bottomspace – color scale and statistics.Bottomspace – color scale and statistics.– Zoom view – details of a particular subsystem.Zoom view – details of a particular subsystem.

SummarySummary

SeeSys provides the following utilities:SeeSys provides the following utilities:– Shows the sizes of the subsystems and Shows the sizes of the subsystems and

directories and where the recent activity has directories and where the recent activity has occurred.occurred.

– Zoom in on particular subsystems.Zoom in on particular subsystems.– Explore where bug fixes and new functionality Explore where bug fixes and new functionality

have occurred.have occurred.– Identify directories and subsystems with high Identify directories and subsystems with high

fix-on-fix rates.fix-on-fix rates.– Find historically active and extinct subsystemsFind historically active and extinct subsystems

SummarySummary

3 principles should ultimately be observed 3 principles should ultimately be observed when designing any visualization system when designing any visualization system for large software systems:for large software systems:– Structure of display should reflect structure of Structure of display should reflect structure of

software.software.– Individual components should by comparable Individual components should by comparable

and decomposable.and decomposable.– Animation helps user visualize the evolution Animation helps user visualize the evolution

of the software.of the software.

SummarySummary

Potential users of SeeSys:Potential users of SeeSys:– Project managersProject managers– Feature engineersFeature engineers– Software developersSoftware developers