Zoomable Graphical Sketchpad
We are exploring several different types of interactive visualizations within Pad++, some of which are described briefly here. Each takes advantage of the variable resolution available for both representation and interaction.
Layout of graphical objects within a multi-resolution space is an interesting problem, and is quite different than traditional fixed-resolution layout. Deciding how to visually represent an arbitrary graph on a non-zoomable surface is extremely difficult. Often it is impossible to position all objects near logically related objects. Also, representing the links between objects often requires overlapping or crossing edges. Even laying out a tree is difficult because, generally speaking, there are an exponential number of children that won't fit in a fixed size space.
Traditional layout techniques use sophisticated iterative, adaptive algorithms for laying out general graphs, and still result in graphs that are hard to understand. Large trees are often represented hierarchically with one sub-tree depicted by a single box that references another tree.
Using an interactive zoomable surface, however, allows very different methods of visually representing large data structures. The fact that there is always more room to put information "between the cracks" gives many more options. Pad++ is particularly well suited to visualizing hierarchical data because information that is deeper in the hierarchy can be made smaller. Accessing this information is accomplished by zooming.
In traditional window-based systems, there is no graphical depiction of the relationship among windows even when there is a strong semantic relationship. For example, in many hypertext systems, clicking on a hyperlink brings up a new window with the linked text (or alternatively replaces the contents of the existing window). While there is an important relationship between these windows (parent and child), this relationship is not represented.
We are experimenting with multiscale layouts of hypertext document traversals where the parent-child relationships between links is represented visually. The layout represents a tree that is distorted so that the page that has the focus (i.e. the one being looked at) is quite large. As nodes get further away from the focus, they get smaller. The distortion is controllable with a pop-up window. This is an example of a graphical fisheye view [16]. As links are followed, they are added to the tree and become the current focus. The view is animated so that the new node is centered and large enough to read.
Pad++ reads hypertext written in the Hypertext Markup Language (HTML), the language used to describe hypertext documents used by WWW browsers such as Mosaic and Netscape. Pad++ also can follow links across the internet. Figure 5 shows a snapshot where several hypertext links have been followed. Two views show the same tree focused on different nodes. The Pad++ user interface for accessing hypertext is similar to traditional systems, but zooming mechanisms are employed. There are also special mechanisms to return to an object's parent.
An alternative layout technique (not shown here) uses a camera with a special zoomed in view of the tree. The idea is to give an overview of the tree in one view while allowing individual pages to be read in another view. This gives both a global context and local detail simultaneously. The camera can be dragged around the overview, and the detail view is updated to see what the camera is pointing at. Clicking on a page causes the camera to animate to that page and when a new page is brought in, the camera centers its view on it.
This layout problem is challenging because the underlying data can be an arbitrary cyclic graph. Any graph can be viewed as a hierarchy by taking a single node and calling it the root node. Imagine taking that node and shaking the graph out. Its neighbors become children, and the children's neighbors become grandchildren, etc. We use this approach to display HTML documents where the order of the links that are followed describe the particular hierarchy imposed on the data. When a cycle is encountered (i.e., a link is followed to a page that is already loaded), the user is brought to the original copy of the page that was loaded, and the focus is put upon it.
Figure 5: Many diferent HTML documents loaded in Pad++. Their layout implicitly shows the history of the users interaction. The two views show the same tree focused on different nodes.
We built a zoomable directory browser as another exploration of multiscale layout. The directory browser provides a graphical interface for accessing the directory structure of a filesystem (see Figure 6). Each directory is represented by a folder icon and files are represented by solid squares colored by file type. Both directories and files show their filenames as labels when the user is sufficiently close to be able to read them. Each directory has all of its subdirectories and files organized alphabetically inside of it. Searching through the directory structure can be done by zooming in and out of the directory tree, or by using the content based search mechanisms described above. Zooming into a file automatically loads its text or image inside the colored square and it can then be annotated. At any particular view, typically three levels of the hierarchy are visible.
Figure 6: A view of our filesystem.
Scale can be used to convey temporal information. Events which take place over a long period of time use a large scale and brief events are shown at a small scale. We used this notion to visualize some of the history of computing and user interfaces.
The timeline visualization shows decades as large numbers. Zooming in on a decade reveals the years within that decade. Further zooming on a particular year shows events which took place during that year. Figure 7 shows a sequence of snapshots as the view is zoomed in.
Figure 7: A sequence views into the history of computers and interfaces.
Since objects on the Pad++ surface reside at absolute locations, the relative positions of objects can be used to encode information. Thus, with the Pad++ HTML browser, position is used to encode the order of a user's traversal of a hypertext document. In the Oval Document Layout, position is used to reinforce the narrative structure of documents (such as guided tours) in which the reader follows a sequence of steps which eventually lead back to the starting point.
In this layout, the first page is placed at the bottom edge of an arc. Subsequent pages are placed around the edge of the arc, and are drawn at a scale which reflects their position in the tour -- middle pages are shown distant and small, whereas start and end pages appear larger and closer to the user.
Navigation buttons at the bottom edge of each page are used to advance through the document. Clicking on a page when it is distant causes Pad++ to pan and zoom so that the page fills most of the screen.
One advantage of this layout is that as the system animates from one page to the next, the user can infer progress through the document by the direction of the animation: near the start, pages move down and to the left; towards the end, pages move up and to the right.
The layout is also effective for non-linear access to pages within the document. Zooming out a small distance reveals the whole document, and clicking on a page within the document takes you to that page.
Hotwords and hyperlink buttons in an oval document can be shown with arrows which point towards the destination object. Clicking on the hyperlink animates the Pad++ surface in the direction indicated by the arrow, reducing the sense of disorientation that many users experience when navigating hypertext documents.
The Oval document view illustrates that a pan/zoom coordinate system can lead to interesting new ways of laying out even traditional page based material. However, the layout has several drawbacks. It is only practical for relatively short documents, and for documents which adopt a circular narrative structure.
Copyright Computer Science Department, The University of New Mexico