Visualisation Research Group
Select the above image to enter the 3D visualisation
or you can view the full size image shown above.
A full description of the CallStax visualisation is available in a computer science technical report. This paper entitled "A New View of Call Graphs for Visualising Code Structures" deals with the topic of 3D Software Visualisation in general but concentrates on the CallStax visualisation. The following text describing CallStax is extracted verbatim from this report.
CallStax is a visualisation which attempts to move away from the standard visualisations of call-graph structures, i.e. a network consisting of nodes and arcs. CallStax makes full use of the extra dimension afforded by VR to maximise the amount of information available and the flexibility for displaying and interacting with that information.
It is not generally the number of components in the call-graph which complicates the visualisation, rather it is the typically much larger set of relationships between these components. Simple operations which we may wish to perform on these graphs, such as grouping particular nodes or finding an acceptable layout, are complicated by the large set of arcs which follow these nodes wherever placed. CallStax attempts to reduce the complexity overhead which these explicit relationships place on the visualisation by making them implicit. This effectively reduces the complexity of the visualisation, but increases the cognitive load of the user as they then have to reconstruct these relationships mentally. The benefit of such an approach depends on which is more mentally demanding to the user, attempting to decipher the relationships from a complex visualisation or attempting to reconstruct the relationships from a simpler visualisation. Hopefully, the latter will prove more profitable.
CallStax takes a different view on visualising the network of call relations within a software system. 2D visualisations of call-graphs generally visualise the call relations as a network, or graph. That is, each component is represented as a single node in the graph and the relationships between components are drawn between the corresponding nodes. There is no redundancy in this system, each entity or relationship within the software has exactly one representation in the call-graph. CallStax is different in that it visualises the paths through the graph rather than the graph as a network.
visualises each possible path through the program as a stack of
individual function representations, in the simplest case as coloured
cubes. Each of these cubes represents a particular component or function
and identical representations or cubes represent the same component. The
base function (e.g.
main) resides at the bottom of the stack, with the
functions called along a particular path stacked above it. In order to
create the CallStax, the call-graph must be structured as a hierarchical
tree. Unfortunately, almost all software does not have a tree structured
call-graph making it necessary to transform the more typical network
into a tree prior to visualisation. This transformation is performed by
introducing redundancy into the graph, duplicating nodes to remove links
between branches of the tree.
A CallStax visualisation of a typical software system will result in a large number of stacks, each positioned arbitrarily through the 3D environment. In order to make any use of this information it is necessary to provide facilities for querying and exploring the information presented. The basic technique used in CallStax allows the user to select a particular function, or cube, as their current focus of interest. Once selected, all of the stacks in the visualisation will move vertically to align all occurrences of that function within all stacks into a horizontal plane. Any stacks which do not contain that function fall a set distance below the horizontal plane, thus moving them from the immediate attention of the user yet leaving them visible to maintain a notion of context in the results. Optionally, these deselected stacks may be hidden from view completely to allow greater focus on the stacks of interest.
The power of the CallStax visualisation lies in it’s flexibility. The stacks are not explicitly connected in any way which affords great freedom in the positioning, grouping, insertion and deletion of stacks. Additionally, the scale of the system under scrutiny does not adversely affect the visualisation to the same extent as in the standard call-graph. Unfortunately this flexibility comes at a price. The implicit relationships between duplicate representations of functions is reliant solely on the visual appearance of those functions. The representations used must therefore concentrate on being unique and distinctive. It is relatively easy to fashion such properties in the case of a small visualisation (see example below) but it becomes very difficult when a large number of distinct functions are present. Within a standard call-graph, it is the position and the node label which provide the unique and distinctive representation, CallStax can rely on neither of these (though a label can provide a unique identity within a small collection of stacks).
The following example shows the construction
of a CallStax visualisation using a simple program as the basis. Figure
1 shows a standard 2D call-graph of the program "
lines.c". The nodes on
the graph have been coloured to show the main functions belonging to the
program, whereas the plain nodes represent library functions called by
the program. The CallStax visualisation is constructed by generating a
number of stacks of function representations, each stack corresponding
to a single path through the call-graph. Figure 2 shows a 2D
representation of these stacks. The path represented by each stack
begins at the lowest function (main in the case of these stacks) and
proceeds upwards, the deeper the call nesting then the taller the stack.
Figure 1. Standard 2D call-graph of a simple program.
Coloured nodes represent functions local to the program while other nodes represent library functions.
As can be seen from the Stacks shown in Figure 2, the CallStax visualisation contains the same information presented in the standard call-graph. The main difference between these visualisations is the manner in which that information is communicated to the viewer. It can be seen from the 2D CallStax shown in Figure 2 that the use of 2D makes for a very space inefficient display. Stacks as we would imagine them are inherently three dimensional structures, they have a variable height and typically a uniform surface area at each level. Figure 3 shows the same CallStax visualisation but shown in a 3D perspective using the Superscape VR package.
Figure 2. 2D CallStax visualisation of the graph shown in Figure 1.
This figure shows a 2D depiction of the CallStax created from the graph shown in Figure 1. As previously mentioned, each stack represents a path through the graph.
Figure 3 shows the stacks in a position where the user has expressed an interest in the function qsort. The stacks have aligned themselves with all occurrences of qsort on the same horizontal plane, this ‘selection plane’ is indicated by a translucent mesh. All stacks which do not contain an occurrence of qsort have receded to the ‘bottom’ of the view. These stacks are still visible to give the user some notion of context. Similarly, the selection mesh contains holes which correspond to the deselected stacks. This aids users in relating the deselected stacks to their corresponding positions within the currently selected stacks. From looking at the currently selected stacks, it can be easily seen which functions call qsort, and which functions are called by qsort. Additionally, it’s depth within the call hierarchy can be rapidly found from the stack which extends the furthest down from the selection plane.
Figure 3. CallStax visualisation shown in 3D using Superscape VR package.
All occurrences of the currently selected function, qsort, are aligned in a horizontal plane. Any stacks not containing qsort recede to the bottom of the view.
Function call information only gives a superficial view of the software being visualised. When a particular area of interest is located it is often desirable to retrieve further information on that area. CallStax implements this functionality in two ways. Firstly the user can move closer to an item of interest, e.g. a function, as they approach the original basic representation of the function will change to a more detailed visualisation of the component and its properties (Figure 4). The representation shown here displays simple structural and metrics information about the function. Secondly, CallStax can be integrated with other information sources such as the source code, metrics information, profiling information or other visualisations.
Figure 4. CallStax zoomed in view revealing further detail.
This figure illustrates how the user can move closer to a particular area of interest within the visualisation and obtain more detailed information.
The more detailed function representations shown in Figure 4 are revealed as the user approaches one of the stacks. Each of these representations displays metric details and simple structural information about the function. The metric details are represented by the two vertical bar-charts which display the McCabe complexity and Lines of Code metrics as a percentage of the maximum values in this program. The base of each representation is a pie-chart which shows the distribution of lines of code, comment lines and blank lines within each function. Finally, the coloured planes are a crude depiction of the control structure of the function. The more complex the control structure then the more complex this visual arrangement will become. A quick comparison can be made between the two representations apparent in Figure 4, the function swap is represented at the top of the stack with qsort below it.
Also shown in Figure 4 is a simple widget set which allows the user to control both the visualisation itself, their movement through it and their viewpoint on it. In this simple case, users can specify whether or not deselected stacks remain visible and they can toggle text labels on or off. Other controls governing movement and viewpoint orientation are also provided.
As previously mentioned, an important feature of software visualisation systems is the ability to correlate or integrate the information they present with other forms of information on the system, such as the source code, documentation or other visualisations. In the case of CallStax this integration is provided via existing WWW technology which allows for a rich multimedia presentation. This demonstration shows the CallStax visualisation integrated into a WWW presentation. In this example a syntax highlighted source code window and 2D call graph are also available. The user can navigate between windows by selecting appropriate areas with the mouse. For example, selecting a function in the CallStax window will automatically position the source code at the corresponding function definition. Similarly, selecting functions from within the source code or 2D call-graph will result in the CallStax aligning to that function.
The CallStax visualisation has a number of advantages:
Though unfortunately there are also some serious disadvantages:
This demo visualisation (as above) which was produced using Zebedee integrates three sources of information using available WWW technology. In order to view this demonstration you will require a frames compatible browser with Superscape's Viscape VR plug-in installed. It would also be an advantage to have a high color display configured.
The Planes visualisation and a prototype toolset is also incorporated within this visualisation. The Planes are setup on a table within an office which is to the left of the initial camera position. To enter/exit the office you must toggle the viewpoint by selecting the "eyeball" on the right of the toolset. The Planes and CallStax visualisations are linked together and changes in one will affect the other.
Navigation through the 3D environment can be facilitated simply by using the directional control icons at the bottom of the frame. Alternatively, a more efficient though trickier control method can be activated by selecting the 3D frame then pressing the space bar. This produces a white box called the dead zone. Moving the mouse out of this box will result in movement through the 3D world. Various methods of movement can be facilitated by using the left and right mouse buttons in conjunction with moving the pointer. The left mouse button allows rotation control over pitch and yaw (i.e. turning on the spot) and the right mouse button allows translation horizontally and vertically (moving left/right, up/down while facing the same direction).
This page is maintained by Peter Young, please send any comments, jokes, insults or general abuse to (email@example.com).
Last updated: Tuesday 13 May, 1997.