EXAMPLES OF WEB GRAPH DISPLAYS

The best demonstration of our web graph display system is through some examples. Figure 1 shows an online web sub-graph. Our system can ensure that any online web sub-graph has no overlapping node images and fits in the window. We provide three kinds of modes for the user 's intersection.

Figure 1: A Web Sub-Graph Display

In the LayoutAdjust mode, the user can adjust a web sub-graph layout. For example, if the user clicks a node in the web sub-graph, the node's subgraph is changed from invisible to visible, or from visible to invisible. Figure 2 shows the results after the user clicks the nodes ” Phone, Fax and Teaching ” in the web sub-graph shown in Figure 1. If the user clicks these nodes again, their sub-graphs would become invisible (i.e., they would disappear, as shown in Figure 1). In this way, the user can define a node's sub-graph as visible or invisible by direct manipulation.

Figure 2: Some Sub-Graphs Become Visible After the User's Interaction

When a node's sub-graph becomes visible, our system checks whether there will be overlaps between this sub-graph and any part of the current display. If so, those parts overlapping the sub-graph automatically become invisible. For instance, in Figure 3, after the user clicks the node with label Research, the sub-graph of this node appears and the sub-graph of the node Teaching automatically disappears.

Figure 3: A Sub-Graph Becoming Visible Makes Another One Invisible

A node in the web graph is linked to a URL. For example, the node with label Computer Graphics is linked to the web site of the unit 66333 ” Computer Graphics. The user can switch into the ShowPage mode by clicking the middle mouse button. Our system can support the display of a detailed web page corresponding to a node in a web sub-graph (after the ShowPage model is set up). Figure 4 shows the result of the user selecting the node with label Computer Graphics in the ShowPage mode.

Figure 4: A Web Page Corresponding to a Node is Shown Up

The third interaction mode is the Navigation mode, which can be selected by clicking the right mouse button. In this mode, the user can change the focused node to get another web sub-graph. Suppose that the user's current focused node is Wiley. After the user clicks the node Links, and then the node CNN under the node Link in the navigation model, we can get the web sub-graph corresponding to the user's new current focused node, CNN. This web subgraph is shown in the window on the left in Figure 5. A web sub-graph keeps track of the user's navigation. That is, it includes two nodes ” Wiley and Links ” for indicating the previous two steps of navigation. The other nodes linking to the node with label CNN are formed in this way: our system analyzed the source HTML file of the CNN web site and extracted the URLs in this file to form those nodes. In this way, we could test whether the system can navigate from one web site to another.

The user can switch among the three interaction modes. For example, after selecting the ShowPage mode, if the user clicks the node CNN, the web page of CNN appears (see Figure 5). The user can also use the LayoutAdjust mode by clicking the left mouse button. More complex web sub-graph displays are shown in Figure 6 and Figure 7.

Figure 5: Another Web Site and Its Web Graph

Figure 6: A Web Sub-Graph for the Focused Node "Dept"

Figure 7: Navigating the Web Graph from the Node "Dept" to the Nodes "Staff", etc.

Our online web sub-graph is formed dynamically, based on the user's focus. When the user changes the focus (i.e., he clicks a node in the Navigation mode), a new web sub-graph is formed by dropping old nodes and adding new ones. This is similar to driving a car: new views arrive in the front and old views vanish in the back.