Browse Hierarchical Data with the Degree of Interest Tree David Nation, Debbie Roberts National Security Agency 9800 Savage Road Fort George G. Meade, MD 20755 USA
[email protected] ABSTRACT
This demonstration shows a method and implementation to interactively display large hierarchies (up to 10,000 nodes) within a web browser. This software computes a degree of interest (DOI) for each node in the hierarchy and displays an overview of the complete hierarchy while showing more detail for nodes with a higher DOI value.
Stuart K. Card Xerox Palo Alto Research Center 3333 Coyote Hill Road Palo Alto, CA 94304 USA
[email protected] levels of detail depending on the user’s degree of interest in each item in a paper describing a “Fisheye View” [1] where a value is placed on each node of the tree. This DOI value is determined by a function of a node’s distance from the root of the tree and its distance from the focus of interest.
Example 2. Example 1. Keywords
Degree of Interest, hierarchical, tree, Web, Java, window. INTRODUCTION
Analysts today are confronted by large unstructured amounts of data and limited tools to organize relevant information about them. One method of organization is to place extracted information into a hierarchical structure. This type of structure can be represented as a tree. When large amounts of data are inserted in a tree it can become difficult to understand and manipulate because of the number of items and their distribution on multiple pages. Getting an overview of the data can be difficult. In order to produce a compact overview representation of a tree structure and still be able to see more detailed information about individual items, some form of distortion is required [2], [3], [4]. George Furnas proposed a method of representing information in a tree structure with different LEAVE BLANK THE LAST 2.5 cm (1”) OF THE LEFT COLUMN ON THE FIRST PAGE FOR THE COPYRIGHT NOTICE.
DESCRIPTION
The Degree of Interest Tree browser (DOITree) uses this function to determine one of a small set of sizes for each node of the tree with the node at the focus of interest getting the most space. A layout and scaling algorithm produces a display of the entire tree in a fixed size area in the Web browser. When the user clicks on another node it becomes the focus of interest and the rest of the tree grows or shrinks as appropriate to display the new view of the tree. Additional details about each node can be available using hypertext links when the node is in focus. Example 1 uses three distinct sizes to represent an organization with the focus of interest at the root node. The second largest size is used to represent the second level of the diagram. Each box in the DOITree represents both a position in the organization and the current person assigned to that position. No text is used on the smallest nodes. On the left side of each node is a picture of the individual if available. A different view of the org-chart can be produced by clicking with the mouse in the side area of one of the blocks or by dragging the mouse to the left or right over a node. All of the blocks in the chart are rotated 90 degrees in an animation sequence that takes approximately one second. The number of frames in the animation is
calculated based on the performance of the machine on which it is running. The user of a DOITree can change the focus of interest by clicking on any of the nodes of the tree. The tree then changes shape to show the new focus of interest in the largest size and other nodes in sizes based on their DOI value. Intermediate representations show nodes growing and shrinking as appropriate in a sequence that shows as many frames as possible in approximately one second. This time value, as well as many other variables, can be controlled with configurable parameters. As the number of nodes in the tree increases the size of each node tends to decrease because of the automatic scaling of the chart. One way to deal with this problem is to use the DOI value to prune parts of the tree below a threshold value and represent the pruned branch by a symbol representing the number of nodes pruned. The root node is at the top of the tree in Figure 2. All other nodes are derived from, and displayed in relation to, the root node. The current node of interest, selected by clicking on the node, is larger than the other nodes in the diagram. Details about the current node of interest are provided on its block, and it has a unique color (usually aqua). Parents of the current node of interest are larger and are shown in a lighter color than other nodes in the tree. After a new node of interest is selected, the tree is redrawn to display the new view. Clicking on the root node will return the display to its original configuration. The DOI value measures the distance of a node from the current node of interest. By default, the DOI value decreases by one for each level of vertical separation from the current node of interest or a parent node, and by fraction for each level of horizontal separation from the node of interest. The size of an individual node is based on its DOI value. Subtrees containing only nodes with DOI values below a user-specified threshold are displayed using a symbol under the parent node whose size represents the cumulative size of the subtree. Relationships between nodes can be visualized through a number of methods. For example, selected nodes can be temporarily hidden or permanently deleted; alternatively, they can be the only ones displayed in the tree. Associations between nodes can be highlighted. Nodes can be added to a DOITree to group nodes with the same information. There are a variety of options to customize the DOITree display. A set of the most commonly used options can be accessed through the onscreen Control Console. The complete set of options is available through the Preferences window. The data for the DOITrees can be represented in different formats. The first is a tab-delimited file that can be produced by writing from a spreadsheet program, a
database or a software application. An XML format file is used to define the mapping between columns in the data and on which node face and position to put the data. Columns are typically allocated to particular types of data such as a person’s name, organization, email address, or phone number. URL addresses can be linked to any of the data fields to show such things as organizational and personal home pages. If a node includes a URL the text for that item is displayed in a blue color indicating that a new page will be displayed if the user clicks on that field. The URLs are only active on the current node of interest. Another data format is a combined XML file with both layout information and data. Specific abbreviation rules are used for each type of information when there is insufficient space to display the whole entry. For example the first name will be abbreviated with the first letter and a period or eliminated entirely depending on the amount of space available for the name. The prefixes of a phone number will be eliminated if there is not enough space. The portion of an email address after the “@” sign is eliminated if needed. For organizational titles a small set of abbreviations for common words are stored in a text file. CONCLUSION
We believe the DOITree browser shows an overview of a large tree structure and at the same time maintains focus on the user’s specified area of interest. This combination of an overview with the detailed focus enables the user to easily navigate and manipulate large amounts of data and more importantly provides an engaging visual display to help the user understand the content of the data. ACKNOWLEDGMENTS
We thank Nancy Holl for developing users and developers manuals and Randy Jacobson and Ron Warehime for help with the DOITree module design. REFERENCES
1.
Furnas, G. W. The FISHEYE View: A new look at structured files. Reprinted in Card, S. K., Mackinlay, J. D.; and Shneiderman, B. (eds.) (1999). Information Visualization: Using Vision to Think. San Francisco: Morgan-Kaufmann, 1981/1999.
2.
Johnson, B. and Shneiderman, B. Treemaps: A spacefiling approach to the visualization of hierarchical information structures. Proceedings of IEEE Information Visualization ’91, 275-282.
3.
Lamping, J. and Rao, R.. Laying out and visualizing large trees using a hyperbolic space. Proceedings of UIST ’94, ACM Symposium on User Interface Software and Technology, 13-14.
4.
Robertson, G. G., Mackinlay, J. D. and Card, S. K. Cone trees: Animated 3D visualizations of hierarchical information. Proceedings of CHI ’91. ACM Conference on Human Factors in Computing Systems New York, 198-194, 1991.
