Tree-Maps: a Space-Filling Approach to the Visualization of Hierarchical Information Structures Brian Johnson Ben Shneiderman Bri Anj@ Cs
Total Page:16
File Type:pdf, Size:1020Kb
Tree-Maps: A Space-Filling Approach to the Visualization of Hierarchical Information Structures Brian Johnson Ben Shneiderman bri anj@ cs. u md. ed u ben@ cs.umd.edu Department of Computer Science & Human-Computer Interaction Laboratory University of Maryland, College Park, MD 20742 Abstract which are less important to the specific task at hand can be This paper describes a novel methodfor the visualization allocated less space [9,101. of hierarchically structured information. The Tree-Map Tree-Maps partition the display space into a collection of visualization technique makes 100% use of the available rectangular bounding boxes representing the tree structure display space, mapping thefull hierarchy onto a rectangular [20]. The drawing of nodes within their bounding boxes is region in a space-filling manner. This efficient use of space entirely dependent on the content of the nodes, and can be allows very large hierarchies to be displayed in their entirety interactively controlled. Since the display size is user con- and facilitates the presentation of semantic information. mlled, the drawing size of each node varies inversely with the size of the tree (i.e., # of nodes). Trees with many nodes (lo00 or more) can be displayed and manipulated in a fixed 1 Introduction display space. The main objectives of our design are: A large quantity of the world’s information is hierarchi- Efficient Space Utilization cally structured: manuals, outlines, corporate organizations, Efficient use of space is essential for the presentation family trees, directory structures, intemet addressing, library of large information structures. cataloging, computer programs ... and the list goes on. Most Interactivity people come to understand the content and organization of Interactive control over the presentation of informa- these structures easily if they are small, but have great tion and real time feedback are essential. difficulty if the structures are large. Comprehension We propose an interactive visualization method for pre- The presentation method and its interactive feedback senting hierarchical information called Tree-Maps. We hope must facilitate the rapidexuactionof information with that the Tree-Map approach is a step forward in the visual- low perceptual and cognitive loads. ization of hierarchical information, and that it will produce Esthetics benefits similar to those achieved by visualization techniques Drawing and feedback must be esthetically pleasing. in other areas. As humans we have the ability to recognize the spatial Hierarchical information structures contain two kinds of configuration of elements in a picture and notice the relation- informa tion: structural (organization) information associated ships between elements quickly. This highly developed with the hierarchy, and content information associated with visual ability allows people to grasp the content of a picture each node. Tree-Maps are able to depict both the structure much faster than they can scan and understand iext [12]. and content of the hierarchy. However, our approach is best The Tree-Map visualization method maps hierarchical suited to hierarchies in which thecontentof theleafnodesand information to a rectangular 2-D display in a space-filling the structure of the hierarchy are of primary importance, and manner; 100% of the designated display space is utilized. the content information associated with internal nodes is Interactive control allows users to specify the presentation of largely derived from their children. both structural (depth bounds, etc.) and content (display properties such as color mappings) information. This is in 2 Motivation: Current Methods and contrast to traditional static methods of displaying hierarchi- Problems cally structured information, which generally make either poor useofdisplay spaceor hidevastquantitiesof information This work was initially motivated by the lack of adequate tools for the visualization of the large directory structures on from users. With the Tree-Map method, sections of the hard disk drives. hierarchy containing more important information can be Traditional methods for the presentation of hierarchically allocated more display space while portions of the hierarchy 284 CH3046-0/91/0000/02844/$01.OO 0 1991 IEEE -_~ structured information can be roughly classified into three nodes. Thus much more space is available for the rendering categories: listings, outlines, and tree diagrams. It is difficult of individual leaf nodes, and for providing visual cues related for people to extract information from large hierarchical to content information. information structures using these methods, as the navigation Tree-Maps provide an overall view of the entire hierar- of the structure is a great burden and content information is chy, making the navigation of large hierarchies much easier. often hidden within individual nodes [23]. Displaying the entire information structure at once allows Listings are capable of providing detailed content infor- users to move rapidly to any location in the space. As Beard mation, but are generally very poor at presenting structural states in his paper on navigating large two-dimensional information. Listings of the entire structure with explicit spaces [l], “If the two-dimensional information space fits paths can provide structural information, but require users to completely onto a display screen, there is no navigation parse path information to arrive at a mental model of the problem ... Users are never lost because they can see the structure. Alternatively, users may list each intemal node of complete information space.” the hierarchy independently, but this requires users to manu- ally traverse the hierarchy to determine its structure. Outline 3 A Directory Tree Example methods can explicitly provide both structural and content information, but since the structural indentation can only be Obtaining information about directory trees was the ini- tial motivation for this research and provides a familiar viewed a few lines at a time, it is often inadequate [4]. Thenumberofdisplay lines required topresent a hierarchy example domain. For illustrative reasons, the hierarchy in with both the listing and outline methods is linearly propor- this example is small and nodes haveonly an associated name and size. While reading through this example, think about tional to the number of nodes in he hierarchy. These methods are inadequate for structures containing more than a few how the techniques described would scale up to a directory hundred nodes. A great deal of effort is required to achieve tree containing loo0 files. An Apple Macintosh screen an mental model of the Structure in large hierarchies using snapshot showing a Tree-Map of loo0 files from one of our these methods. laboratory’s hard disk drives follows this example. Tree drawing algorithms have traditionally sought effi- Presenting directory structures is a very practical prob- cient and esthetically pleasing methods for the layout of node lem. The following are the methods widely available today: and link diagrams. These layouts are based on static pre- Command Line Listing (e.g. UNIX “ls”, DOS “dir”); Outlines (e.g. “du”, Microsoft Windows) sentations and are common in texts dealing with graph theory UNIX and data structures. They are excellcnt visualization tools for Windowing (e.g. Macintosh Finder) small trees [2,10,12.13,17]. However, these traditional node Tree Drawings (e.g. Openwindows File Manager) and link tree diagrams make poor use of the availabledisplay We are not aware of approaches that provide a visual representation of the relative sizes of or directories. space. In a typical v~edrawing more than 50% of the pixels files are used as background. For small tree diagrams this poor use Even moderately sized directory trees are difficult to of spaceisacceptable,and traditional layout methods produce visualize using standard operating system interfaces. With excellent results. But for large trees, traditional node and link command line interfaces such as UNIX “ls” or DOS “dir”, diagrams can not be drawn adequately in a limited display only the immediate children of any directory are listed. An space. Attempts to provide zooming and panning have only overall view of the directory tree must be pieced together by been only partially successful [lo]. traversing the various paths and listing the immediate chil- Another problem with tree diagrams is the lack of content dren of the currently active directory. information; typically each node has only a simple tcxt label. Desktop metaphors and their windowing strategies are This problem exists because presenting additional informa- another alternative. Oneof the problems with windows is that tion with each nodequickly overwhelms the display space for they often obscure each other, and users may spend much of trees with more than just a few nodes. their time may be spent mnging windows. Also. the tree The presentation of content information in all of these structure is not apparent unless windows havebeen carefully traditional methods has usually been text based. Although placed. Desktop icons generally show only the type of the me diagrams are a graphically based method capable of file. Much richer visual mappings are possible but are making use of visualization techniques, and many of the ideas currently not available, for instance, the depth of an icon’s presented in this paper. Unfortunately, global views of large shadow could be used to indicate file size. We will use