Graph Visualization: An Enhancement to the Treemap Data Visualization Tool

Transcription

1 Graph Visualization: An Enhancement to the Treemap Data Visualization Tool David T. Wang CMSC838F Spring 2002 Description: The Treemap Data Visualization Tool is a space-filling visualization for hierarchical structures, and Treemaps are effective in showing attributes of leaf nodes by size and color coding. However, although the Treemap Data Visualization Tool enable users to compare sizes of nodes and of sub-trees, and is especially capable of allowing users to spot unusual patterns that may exist in the attributes of the leaf nodes, the Treemap Data Visualization Tool is lacking in some functionality that could serve to further enhance its capability. One such functionality is the ability to reveal to the users of the relationships between the leaf nodes of the treemap, if any should exist. One structure that could benefit by revealing the relationships between leaf nodes is a graph that shows cross linkages between web pages of a server. Many web sites have a natural tree-like hierarchy, and each web page has a natural parent node and one or more children nodes. However, web pages in general more closely resemble nodes in a graph, as links in a web page may point to child nodes that may then contain links which point back to the original node. For this reason, it is difficult to arrange the web pages in a hierarchical tree-like structure. However, in the Treemap Data Visualization Tool, there is no ambiguity in the placement of the nodes in a graph of interlinked html web pages, since the nodes of the graph in this case are simply files that the Treemap Data Visualization Tool. In this manner, the Treemap Data Visualization Tool provides a natural hierarchy for the display of the nodes of the web pages, and is well suited as a vehicle to present the inter-relationships between the web pages of a given web server. For this reason, we explored various enhancements that would provide the html web page linkage visualization capability to the Treemap Data Visualization Tool. HTML Graph Visualization: In this section, we describe our work in enhancing the capability of the Treemap Data Visualization Program by allowing the inter-related links a web site to be shown in an intuitive manner to the user. To being with, we assume the existence of a web site with files contained in a unified files system. Web pages on this web site contain links that refer to other web pages as well as files of differing data types. The Treemap Data Visualization Program would then the visualization of the files on the web site by the strict hierarchy of the file system. Our proposed work is to augment the existing Treemap data visualization program by parsing the web pages of a web site, extract the links on the web pages, create a graph structure from the web pages, then finally display the links that reveal the relationships between the web pages of a web site. In figure 1, we show an abstract graph of a sample web site. Figure 1 shows that the web pages could have links that point to each other, links that point to data files, as well as links that point to an external web page. Although we do not show the existence of a cycle in figure 1, it is indeed common for links in a series of web pages to form a cycle in the graph. 4 Figure 1: Abstract Graph of a Sample Web Site 5 Legend: web page data file external link

2 In figure 2, we display the layout of a treemap that shows the files of the web site of figure 1. We illustrate that our Figure 2: HTML Network Visualization of Graph in Abstract Web Site addition would enable the treemap application to show the relationship between the web pages on this web site. Implementation: In order to provide the functionality of the graph visualization, we devised a strategy in which we first identified the necessary steps for display of the html graph visualization, then meticulously implemented each of these steps through the addition of data structures and functions that operate on those data structures. In this manner, we were able to accomplish our goal of displaying the relationships between html files of a file system. We started the process by an examination of the Treemap source code. In this code, we discovered that as its name implies, the treemap program makes use of a tree structure with discrete node objects. Our task then, was to create a data structure within each node of a treemap that the node can use to show linkages to other nodes. The creation of this data structure relied on our ability to properly parse the contents of an html file, and extract from within that html file the links that refer to other files in the same directory structure. In our examination of the treemap visualization program, we discovered that the program created the treemap structure in three discrete steps. In step one, the treemap program uses the method commonconstructor1() to set up the basic treemap and initializes some of the important properties of the nodes. Then in step two, the treemap program relies on the method readdirectory() to traverse the files of a given directory, extracts out the file properties, and creates temporary nodes of the treemap tree structure. Finally, in step three, the treemap program uses commonconstructor2() to remove the temporary nodes, and in their place, permanent nodes that removes some of the temporary data structures used in the construction of the treemap. The methodology we deployed to attach the relevant node linkages was very simple. We added a fourth method, attachhtmllinks(), after the creation of the temporary tree structure, but prior to the consolidation into the permanent treemap structure. The method attachhtmllinks() then performs the task of recursive tree traversal through the file system in the same manner as the initial construction of the temporary treemap tree structure. For each file, if the filename matched the known file extensions of htm, html, or shtml, the method attachhtmllinks() then attempted to parse out all of the links that follow the key tags of href and img src contained in that file. The method used for parsing here is a word by word comparison approach.

3 although in a future enhancement, we would explore the use of a formal html parser such as DocumentParser() for greater generality and flexibility. Finally, the extracted link, in the form of a text string is further parsed and corrected to a given node in the existing temporary treemap tree structure. In the case that the node could not be found, as in the case of a stale link to a file that no longer exists, or to an external file, the search simply terminates, and a link ID of -1 is added to the node. After attachhtmllinks() completes its own traversal of the file structure, we then rely on the method commonconstructor2() to remove the temporary data structures, and construct a permanent tree for the visualization program. Finally, with the creation of these data structures, we then continue on with the task of displaying these links as interconnections between nodes. After struggling through the difficulties of attaching the html node links and image source links, we discovered that with the functionality provided in the existing source code of the Treemap Data Visualization Tool, it was relatively simple to displayed the html and image source node links. The source code provided the functionality to custom methods that wish to query the location of the node as displayed on screen. In this manner, our enhancement code simply traversed through all of the links of a given node, and drew each link individually. One item worthy of note at this point was our method for drawing that link between a source and a destination node of a link. The simplest way to illustrate a connection from the source node to the destination node is by drawing a single line. However, we found the attributes of a thin straight line unappealing. A thin straight line, as drawn from source to destination, is lacking in several important attributes. A thin straight line does not illustrate which end of the line is the source, and which end is the destination. As a result, a graph that shows three nodes that all point to the same node would have the same appearance as a graph that show the one node pointing outward to the same three nodes. In our implementation of the network visualization, we used two alternative visualizations for the appearance of linkage between nodes. One solution, one that we believe to be simple and yet elegant, is the lopsided quadrilateral. In figure 3, we illustrate the simple concept of the lopsided quadrilateral. In this figure, we show the four corners of the source node, y Center of Dest Node Point 0 Point 1 Dest Node quadrant 0 quadrant 3 Src Node x quadrant 1 quadrant 2 Point 3 Point 2 Center of Src Node Figure 3a: Drawing a Lopsided Quadrilateral abbreviated as Src Node. We also show the center of an abstract destination node, abbreviated as Dest Node. The algorithm simply compares the coordinates of the source node and the destination node, and if the destination node is in quadrant 0

4 Figure 4: Combination of Three Lopsided Quadrilaterals relative to the source node, then point 0 is replaced by the coordinates of the center of the destination node. Figure 3 shows that the destination node is located in quadrant 1, and as such, point 1 in the quadrilateral is replaced by the center of the destination node. In this manner, we were able to draw simple and yet effective connections that shows the source and destination of an html link, and this drawing method is scalable to different lengths and widths as allowed in between nodes of a Treemap Tree. In figure 4, we show that when multiple links are drawn, the visualization is effective in showing the source and destination of each link. However, one immediate drawback from the use of lopsided quadrilaterals is that while lopsided quadrilaterals are effective in displaying links from a single node to multiple nodes, a busy graph filled with such links quickly becomes unreadable and the effectiveness of the visualization is greatly reduced. For this reason, we continued our exploration of alternative methods that may be used to display the links in an effective manner. A second visualization technique that we explored was the use of a curved line. The curved line has the benefit of showing distinctly separate link paths that would have been displayed as a single path if a straight line had been used. For the drawing of the curved line, we relied on the use of the built in graphics2d object QuadCurve2D. QuadCurve2D draws a simple curved line through the use of 3 points. In addition to the source and destination, QuadCurve2D uses a third point as the reference control point, as shown in figure 5a. The difficulty in the use of QuadCurve2D was the location of the control point that could be generalized so that all of the curved lines in the network visualization could have a similar appearance. Our solu- Control Destination Source Figure 5a: Use of Control Point in Drawing of a Curved Line Control 60 o Mid point Destination Source Figure 5b: Rotation of Midpoint by 60 Degrees About the Source Point

5 tion to this problem was the use of a vector rotation formula as applied to the midpoint between the source and destination. We show our generalized solution to the creation of the control point in figure 5b. By using the midpoint between the source and destination, then rotating the point about the source point by 60 degrees in a clockwise manner, we were able to create a generalized control point that would scale with respect to the orientation and distances between the source and destination points. Through the use of the curved line, we were able to show more links. The reason for the increase is that the line is now only a single pixel in width, and more lines could be shown simultaneously. With the increase in the number of links that could be displayed, we are then able to effectively display additional links such as links from html files to image files. In figure Figure 6: Network Visualization Enhancement for the Treemap Application 6, we use blue lines to represent html reference links, while red lines were used to represent image links to graphics files. In figure 6, we showed that although link were displayed without obvious distinctions between the source or destination, users may be trained to distinguish between the source and destination nodes of a given link. The distinguishing feature that may be used for this task is the curvature of the link. Due to our use of the control point as generated from the midpoint of the line rotated about the source node, the displayed links show the greatest curvature closer to the source node than to the destination node. Links appear to curve dramatically as they leave their respective source nodes then travel directly toward the destination node. With this information at hand, users may be trained to distinguish between source and destination nodes of a given without displaying additional image enhancements that may be counter productive and clutter up the display in a busy graph.

6 Finally, with the addition of the appropriate data structures and the alternative display methods of the html and image links, we turned attention into providing a simple interface for users to control the html link visualization. For this purpose, we again leveraged off of the existing infrastructure within the Treemap Data Visualization Tool and added a pane to the control panel dedicated to the control of the html network visualization. As seen in figure 6, the html network visualization control panel allows the user to individually alter the color of the various links, as well as the ability to control the display of only certain types of links. Furthermore, the control panel allows the user to select between the two different types of links, the curved links for general use, and the lopsided quadrilateral can be used in sparse graphs to enhance the appearance of the links. We believe that with the addition of approximately five hundred lines of code to the Treemap 3.1 source, we were successful in enhancing the capability of the Treemap Data Visualization Tool. Enhanced Capability In the implementation section, we briefly described our implementation of the Graph Visualization capability to the Treemap Data Visualization Tool. In this section, we will describe the tasks that may be enabled with our Graph Visualization enhancement. One capability that we believe that will be helpful to web masters is the ability to see not just the outgoing links from an html file that goes outward, but also the various other html files that may refer to the html file in question. The capability to visualize and inspect inbound links means that web masters will be more easily able to move or delete an html file within the file system. Since the movement or deletion of an html file would necessarily alter its place in the file system, all of the links that refer to the file would necessarily become an invalid link if it were not properly updated in the referring web page. With the web page graph visualization enhancement, the task of preventing the existence of dead links could be simplified. Furthermore, the graph visualization can also be easily modified to specifically highlight nodes that contain links that are no longer valid. In this sense, the graph visualization enhancement to Treemap can be an invaluable tool to web masters. A second way in which our enhancement could be useful to web masters is that the visualization could be used to display the hierarchy of a particular web site. In the case of a web site with a properly designed hierarchy, the graph visualization will reveal the regularity of the linkage pattern. In the case of a poorly designed web site, the graph visualization will also reveal the irregularity of the linkage pattern, and perhaps suggest a more natural hierarchy that can be used to facilitate easier maintenance of the web site. Summary In this paper, we have described the work performed in adding the capability of visualizing the interrelationships between html files of a unified file directory structure. As seen in figure 6 and appendix A and B, with the addition of approximately five hundred lines of new code, we were successful in adding the html graph visualization enhancement to the Treemap Data Visualization Tool. We believe that we have provided a solid foundation with which future enhancements may be based upon. Even in the absence of such future enhancements, the graph visualization allows a web master the ability to view the files in the file system and gain insights into the physical structures into the design of the web site. We believe that the result of such insights can only help in easing the task of maintaining a large and complext web site.

7 Appendix A: Treemap Program with HTML Links Shown as Lopsided Quadrilaterals

8 Appendix B: Treemap Program with HTML Links Shown as Curved Lines