project goal

Some researchers have explored visualization methods to help understand usage data and identify major traffic patterns. We have developed techniques to visualize content changes, linkage structures, site usage, and so on. The DiskTree technique was developed in this context to visualize the structure of a web site hierarchy. We have explored how DiskTrees can be used to identify specific usability problems at large Web sites.

The first-level goal of early Web visualizations was to help users navigate more effectively by visually representing the document structure. Figure 1 shows one of the earliest visualizations, based on the Cone Tree visualization.

Figure 1. Top view of a site structure visualization. The center of the graph is a red glyph depicting the root node of the site. The green glyphs represent pages that are one click away from the root node, while blue glyphs represent pages that are two clicks away.

The Disk Tree uses a circular layout to visualizing the hierarchy. Each successive circle denotes levels in the tree. The layout algorithm runs in two passes. In the first pass, the algorithm traverses the entire hierarchy using postorder traversal. At each node, the algorithm calculates the number of leaf nodes in that subtree. So we know the total number of leaves in this tree. We then calculate the amount of angular space each leaf node should be allocated
(360/Total # of Leaves). In the second pass, the algorithm traverses the hierarchy using breadth-first traversal. At each node, it allocates the amount of angular space for that node by looking to see how many leaf nodes are rooted at that subtree. In this manner, each leaf node is guaranteed a fixed amount of angular space. The result is shown in the figure below. Each
concentric circle is a new level in the tree.

Figure 2 illustrates the disk tree visualization technique for about one week’s worth of usage data for the 7,588 documents at the Xerox site. The center of the disk tree is the root page, and each line represents a link to another page in the site. Yellow lines represent links to deleted content, and red lines represent links to added content. The brighter the green links, and the wider the lines, the more frequent that link was traversed. Links one hop away are on the first concentric ring; two hops away are on the second concentric ring; and so on. The basic disk tree algorithm allocates angular space proportional to the number of children each node on the concentric rings has. The system displays detailed usage information on the side for each node the mouse passes over. The user can thus probe the structure to learn where each area of the site appears on the disk tree.

Figure 2. Disk tree technique. This visualization represents a week’s worth of usage data for the 7,588 documents at www.xerox.com. The center of each disk is the root page of the Web site. [Legend: Yellow lines: deleted content; Red lines: added content.]

Ed H. Chi. A Framework for Visualizing Information. April 2002. Kluwer Academic Publishers, Netherlands. Order from Amazon

Ed H. Chi. A Framework for Information Visualization Spreadsheets. Ph.D. Thesis. University of Minnesota, Computer Science Department. March, 1999.

Ed H. Chi. Improving Web Usability Through Visualization. IEEE Internet Computing, pp. 64--71. March, 2002. IEEE Press.

Ed H. Chi, Peter Pirolli, James Pitkow. The Scent of a Site: A System for Analyzing and Predicting Information Scent, Usage, and Usability of a Web Site. In Proc. of ACM CHI 2000 Conference on Human Factors in Computing Systems, pp. 161--168, 581, 582. ACM Press, 2000. Amsterdam, Netherlands. Figures

Ed H. Chi, James Pitkow, Jock Mackinlay, Peter Pirolli, Rich Gossweiler, Stuart K. Card. Visualizing the Evolution of Web Ecologies. In Proc. of ACM CHI 98 Conference on Human Factors in Computing Systems, pp. 400--407, 644--645. ACM Press, 1998. Los Angeles, California.

Ed Huai-hsin Chi, Phillip Barry, John Riedl, Joseph Konstan. A Spreadsheet Approach to Information Visualization. In Proc. of the Symposium on Information Visualization (InfoVis '97), pp. 17--24,116. IEEE CS, 1997. Phoenix, Arizona.

                                                                                                        more publications

                                                     DiskTrees in the news

  
 LumberJack
 Bloodhound
 Information Scent
 IUNIS
 WUFIS
 Webology

  Ed Chi,