spherical layout – layout for 3d tree visualization

IADIS International Conference Interfaces and Human Computer Interaction 2007

SPHERICAL LAYOUT – LAYOUT FOR 3D TREE VISUALIZATION Martín L. Larrea, Sergio R. Martig, Silvia M. Castro Visualization and Computer Graphics Research and Development Laboratory Departamento de Ciencias e Ingenería de la Computación Universidad Nacional del Sur Avenida Alem 1253

ABSTRACT The 3D tree visualization faces multiples challenges: the election of an appropriate layout, the use of the interactions that make it easier the data exploration and a metaphor that helps the information understanding. A good combination of these three elements (layout, interactions and metaphor) will result in a visualization that effectively convey the key features of a complex structure or system to a wide range of users and permits the analytical reasoning process. The goal of this work was centered in the 3D tree visualization. In spite of their apparent simplicity, the displaying of a tree in 3D can also introduce new problems that can be overcome with the appropriate interactions. So, we have developed a new visualization technique for 3D tree visualization; this includes the design of a new tree layout that we called Spherical layout and the set of interactions that can be applied on this representation. This technique allows representing hierarchical structures to different levels of detail and also can be used as a visualization technique that allows a tree with attribute to be visualized. The Spherical layout has shown good result for large trees without compromising the performance; this is a key issue in tree visualization. KEYWORDS Tree Layout. 3D Tree Visualization. Information Visualization.

1. INTRODUCTION Information Visualization is a field of research that has less than twenty years of history, but has growing very fast as a reach and interdisciplinary research field. The last advances in Visualization and, particularly in Information Visualization, also highlights fundamental research issues. Nowadays, it is currently a challenging task for designers to find out the strategies and tools available to visualize a particular type of information. The data characteristics and their organization are essential aspects when an adequate visual representation must be selected. The creation of adequate visual representations is a big challenge. A visual representation is able to convey relationships among many elements in parallel and provides the user with a tool to explore the data in an effective way. Visual representations are essential aids to human cognitive tasks to the extent that they provide stable and external reference points upon which dynamic activities and thought processes may be calibrated and upon which models and theories can be tested and confirmed. The interaction with visual representations makes many complex and intensive cognitive tasks feasible. Visual representations and interaction techniques must allow the users to see, explore and understand large amounts of information at once and are essential to the analytical reasoning process, in order to gain insight into the data. Information Visualization has become a large field and the tree visualization has emerged as an important subfield applicable when there is a hierarchical relation among the data elements to be visualized. Tree visualization has many areas of applications and many domains require the manipulation and comprehension of complex hierarchical datasets; to address this field, it is necessary to support interactive representations of large trees.

91

ISBN: 978-972-8924-39-3 © 2007 IADIS

The 3D tree visualization faces multiples challenges: the election of an appropriate layout, the support of the interactions that make it easier the data exploration and a metaphor that helps the information understanding. A good combination of these three elements (layout, interactions and metaphor) will result in a visualization that effectively convey the key features of a complex structure or system to a wide range of users and permits the analytical reasoning process. In this paper, we present a new 3D tree visualization technique. We propose a new 3D tree layout, the Spherical layout, and the associated interactions in order to browse the hierarchy. The characteristics include: the efficient use of available display area, different levels of detail depending on the multiresolution hierarchical structure and many interactive ways to browse the hierarchy. The Spherical layout is a 3D extension of the 2D radial layout; it positions the nodes on the surface of concentric spheres according to their depth in the tree. To do this, we have developed two different algorithms. With respect to the interactions, virtually all 3D displays of trees allow the user to interactively change the view by moving around in space. Besides the classical interactions of 3D visualizations we defined a set of interactions to fly through in the visualization. We differentiate between two types of navigation, the directed and the free one. It is also allowed for the user to have four different views of the same object. This paper is organized as follows: in the next section we present a brief description of the main characteristics of the 2D and 3D layouts. Then, we detail the Spherical layout and the associated interactions. Afterwards, we describe the implementation of one of the algorithms introduced for the Spherical layout and later we describe an application example. The last section is devoted to conclusions and future work.

2. TREE LAYOUT The basic tree drawing problem can be put simply: given a set of nodes with a set of edges (hierarchical relations), calculate the position of the nodes and the curve to be drawn for each edge. A wide variety of tasks related to the tree drawing have been studied: layering a tree, minimizing the area occupied by the layout, minimizing the number of bends in edges, etc. Unfortunately, many of the associated algorithms are too complex to be practical for applications but fortunately this has motivated the development of effective heuristics to overcome the complexity of some of these problems. In tree visualization, a key issue that needs to be addressed is the size of the tree. Few systems can claim to deal effectively with thousands of nodes, although trees with this and higher order of magnitude appear in a wide variety of application domains. The size of a tree can make a normally good layout algorithm completely unusable. In fact, a layout algorithm may produce good layouts for trees of several hundred nodes, but this does not guarantee that will scale up to several thousand nodes.

2.1 2D tree layouts A 2D tree layout algorithm goal is to place a tree in the bidimensional plane; a classical tree layout will position children nodes below their common ancestor. The algorithm by Reingold and Tilford ([RT81]) is probably the best know layout technique in the 2D tree layout category (Figure 1). It can be adapted to produce top-down as well as left-to-right tree layout, and can also be set to output grid-like positioning. H-Tree layouts are also classical representations for binary trees which only perform well on balanced trees. The radial positioning by Eades places nodes on concentric circles according to their depth in the tree. A subtree is then laid out over a sector of the circle and the algorithm ensures that two adjacent sectors do not overlap. The cone tree algorithm can be used to obtain a balloon view of the tree by projecting it onto the plane, where sibling subtrees are included in circles attached to the father node. The Reinglod and Tilford algorithm produces a more classical drawing in the sense that drawing clearly reflects the intrinsic hierarchy of the data. The radial and H-Tree positioning are different in this respect, because it is less clear where the root of the tree is and thus one might explorer the tree in a less hierarchical fashion. Occlusion, edge crossing, available space, … are some of the problems that a 2D layout designer must face; there is a large number of effective algorithms for the generation of trees in 2D; however, the 3D tree representation offers, among others benefits, the extra dimension. This extra dimension gives greater flexibility for placing nodes and this would ease the problem of displaying large structures. The work done by Young ([You96]) and Ware ([War00]) are examples of this type of generalization.

92

IADIS International Conference Interfaces and Human Computer Interaction 2007

Figure 1. The Reinglod and Tilford layout ([HMM00])

2.2 3D tree layouts In spite of their apparent simplicity, displaying trees in 3D can also introduce new problems. Objects in 3D can occlude one another, and it is difficult to choose the best view in space; as a consequence, new challenges arise. The disadvantages of 3D displays of trees can be weakened by the use of interactions and the inclusion of additional visual clues, like transparency, depth queuing, etc. Many 3D layouts are simple generalizations or extensions of 2D layouts algorithms; the information cubes are a 3D generalization of the Treemaps techniques and the 3D hyperbolic layout is an extension of its 2D version. The cone tree ([RMC91], [RMC93]) is one of the best know 3D tree layout techniques in information visualization (Figure 2); in contrast to the other examples, the cone trees have been developed directly for 3D.

Figure 2. A cone tree

The extra dimension is not the only advantage of 3D visualization; we, humans, are familiarized with 3D because of our daily contact with our 3D world. Based on this it is possible to create real world metaphors that should help in perceiving complex structures and also to conceive new interactions.

3. SPHERICAL LAYOUT The extension of the Radial layout from two to three dimensions is not straightforward, because the nodes must be placed on a surface instead of an arc and this adds many possibilities. In the next subsection we give a brief presentation of the Radial layout and then we introduce two Spherical layout techniques.

3.1 Radial Layout A radial drawing is a variation of a layered drawing where the root of the tree is placed at the origin and the layers are concentric circles centered at the origin (Figure 3). In Radial layout ([YFD01]) nodes are arranged on concentric rings around the root node. Each node lies on the ring corresponding to its distance from the root. Immediate neighbors of the root node lie on the smallest inner ring, their children’s lie on the second smallest ring, and so on. The angular position of a node on its ring is determined by the sector of the ring allocated to it. Each node is allocated a sector within the sector assigned to its parent, with size proportional to the angular width of that node’s subtree.

93

ISBN: 978-972-8924-39-3 © 2007 IADIS

Figure 3. A Radial drawing of a tree ([GDBT99])

Figure 4. Two angles for each node must be calculated in radial layout

When using the radial technique, a subtree is usually drawn within an annulus wedge. The layers C1, C2, …, Ck (where k is the height of a tree) of a radial drawing and four annulus wedges are illustrated in Figure 4. It will be observe that vertices of depth i are placed on circle Ci. The subtree rooted at vertex v is drawn in the annulus wedge Wv. The angle of Wv can be proportional to the number of leaves in the subtree root at v; Battista presented a different approach ([GDBT99]) to obtain the angle of Wv. For each node in the tree we must calculate two angles: α that is the annulus wedge and Uα, which is the angular position of the node in the 2D space.

3.2 Spherical Layout The basis of the Radial layout are the concentric circles where the nodes are placed; the first step to an 3D generalization is to map this circles into a 3D space. To achieve this goal we consider concentric spheres on which surfaces the nodes are going to be placed (Figure 5).

Figure 5. The concentric spheres are the basis of the Spherical layout

Figure 6. In spherical layout the region assigned to a node is defined by a pyramid

In the Radial layout each node, except the root, is allocated in a 2D sector within the sector assigned to its parent; in Spherical layout we replace the 2D plane with a 3D region and the nodes are allocated within the surfaces defined by it (Figure 5). To position each 3D region it is necessary to specify four angles; two of them (α1, α2) will define the pyramid size (Figure 76 and 7) and the other two (Uα1, Uα2) will place the node in the 3D space (Figure 8).

3.2.1 VeHo Algorithm This algorithm is an adapted generalization of the one used by Wills ([Wil97]) in the Radial layout. For simplification purposes we consider a fixed value for the α2 angle in the root (Figure 9); all direct descendent of the root will be placed inside the established region, all descendents of these nodes will be arranged in the projection of this region into the next sphere and so on. The reason to use a fixed value for the angle α2 is to avoid placing nodes in the poles of the sphere and to achieve a better distribution of the nodes on the surfaces. This algorithm start by placing the root node at the center of the space and by creating as many concentric spheres as levels the tree has. Using the equator ring of the inner sphere as in a classic 2D Radial layout we calculate, with Wills ([Wil97]) method, the distribution of the root’s children on this circle, but instead of associating a sector of the curve to each node we associate a region on the surface of the sphere as is shown in Figure 10. The next step is to arrange the descendents of the root children; we project each region into the next inner sphere and again we use Wills method to calculate the appropriate angle but instead of dividing the sector of the curve, as in the first step, we divide the α2 angle.

94

IADIS International Conference Interfaces and Human Computer Interaction 2007

Figure 7. On the left is α1 and on the right is α2; when combined they define a pyramid

Figure 8. On the left is Uα1 and on the right is Uα2; when combined the set the position of a node in space

Figure 9. A fixed value of α2 will be used in this algorithm

We call the first division of the equator ring a vertical division and this last one a horizontal division. In all cases we place each node in the center of its corresponding region. For each division we switch between a horizontal and a vertical one; Figure 11 shows how this process continues. The execution time of this algorithm is in the order of the number of nodes in the tree. This is a first approximation for the optimal use of the sphere surface; with this algorithm we can see how it is possible to use the spheres surfaces to place more nodes than in the radial layout. There are other alternatives for the implementation of the layout; one option could be to use the entire sphere surface through a more uniform and efficient distribution. The algorithm in the next subsection succeeds in using more effectively the sphere surface.

Figure 10. Each node is arrange in the center of its region

3.2.2 TriSphere Algorithm In this algorithm the nodes will be uniformly distributed on the spheres surfaces; to achieve this goal we first discretize the surfaces of the spheres with triangles and place the nodes in the center of some of the triangles. Unlike the VeHo algorithm, this one will arrange nodes in all the spheres surfaces. Let h be the number of leaf in the tree T and n the deepest level of it; we start by creating n concentric spheres with h triangles each. The root node of T is placed at the origin of all the spheres. Let En be the outer sphere; if T has p direct descendents with ph leaves on each, we divide the En surface into p subregions with ph triangles each. Let’s call Re one of these subregions (Figure 12(c)) and suppose that the sphere S (Figure 12(a)) represents the deepest level of T; if T has six leaves on this level, those leaves must be arrange on the surface of this sphere, in particular, inside the subregion Re. To place these six leaves, we must obtain a new subregion Re+, inside the mentioned Re, with six contiguous triangles. Each leaf will correspond to each triangle in this new subregion and will be placed in the center of the triangle. Figure 13 shows how to place the six leaves of T. The parent node of a leaf will be placed in the next inner sphere, S-1 and its position will be calculated from the subregion where its children are. Because of all the spheres have the same number of triangles with the same distribution, we can project Re directly into S-1, in particularly Re+ will be present in this projection. The node node, the parent of the six leaves, is placed in the center of the new subregion Re+ and all the necessaries edges are added. The hierarchical relations of the tree are present here trough the projection of the region and subregion from one sphere to the next inner sphere (Figure 14). The execution time of this algorithm is in the order of the number of leaves by the depth of the tree.

95

ISBN: 978-972-8924-39-3 © 2007 IADIS

Figure 11. The nodes are distributed on the sphere surfaces

Figure 12(a) Figure 12(c) Figure 12(b) Figure 12. The outer sphere is divided into subregions, as many as direct descendents the root has.

Figure 13(a) Figure 13(b) Figure 13(c) Figure 13. The hierarchal relation of the tree is map into the spheres through the regions and subregions

This algorithm was implemented as part of an application for the visualization of a hierarchical directory structure, more details about this implementation are presented in Section 5 and 6.

Figure 14. Each region can be projected directly to the next inner one

4. INTERACTIONS Visualization exploration is more than presentation; the interaction with both the data and its depiction is as important as the data and depiction itself. Significant visualization research has focused on the generation of visualizations (the depiction); less effort has focused on the exploratory aspects of visualization (the process); through these interactions users are able to explore patterns, test hypotheses, discover exceptions, and explain what they find to others. Navigation is a classic interaction, both on 2D or 3D visualization. We defined two types of navigation, directed and free; in directed navigation the user must select an object, edge or node, as his destination and the technique will take him there. When using free navigation the user is free to move around the

96

IADIS International Conference Interfaces and Human Computer Interaction 2007

visualization without selecting any object. These two interactions include a third one, the selection, another classic interaction included in this technique.

Figure 15(a).

Figure 15(b).

Figure 15(c).

Figure 15(d).

We also defined four types of views: full view, third-person view, first-person view and in-person view. In full view (Figure 15(a)) the point of view is set so that the user can have an overview of the entire graph; third-person view (Figure 15(b)) set the point of view inside the spheres, the user is watching the selected element which is the one in the center of the view; with first-person view (Figure 15(c)) the point of view is placed on the selected element, as if the user where stood on that element; finally in-person view (Figure 15(d)) places the point of view inside the selected element, the user can see what the selected element see.

5. IMPLEMENTATION The implementation of the TriSphere algorithm was made in JAVA using VTK ([MOO98]) and PREFUSE ([HEE05]) libraries. The PREFUSE library was used to store the tree hierarchy structure (class Tree) and the output visualization was created using VTK. To obtain a contiguous region of triangles we adapt Rossignac’s Edgebreaker 3D compression algorithm ([SZY01]), this allows efficient way to walk through contiguous triangles.

6. APPLICATION The previous section detailed the general layout implementation. We will now introduce an application that visualizes a directory structure through the Spherical layout. Using the implementations characteristics seen in Section 5 we create a 3D representation of the directory; a color value is assigned to each subtree of the root, this color is used to paint the nodes in the subtrees (Figure 16(a)). To enrich the visual representation, we allow the user to see the triangles that were used to place the nodes; these triangles are painted with the same color that the one in the node plus a high level of transparency (Figure 16(b)). In case of very large trees, it is possible to remove the nodes and edges from the visual representations and leave the triangles, providing an overview of the hierarchical structure and improving the application performance (Figure 16(c)). The figure 17 shows an example with five thousand elements, figure 17(a) and 17(b) offers two view points of the same visualization. Figure 17(c) is an overview of the hierarchical structure. The user can explore interactively the visualization using the free navigation mode trough the full view option.

7. CONCLUSION AND FUTURE WORK We have developed a new 3D graph layout, the Spherical layout and a set of interactions on this representation. Our 3D Spherical layout allocates a larger number of nodes than the radial layout and allows us to introduce a new set of interactions; some of these interactions are common in the visualization domain while other were specially design for this technique.

97

ISBN: 978-972-8924-39-3 © 2007 IADIS

Figure 16(b). The “Show Triangles” option ON

Figure 16(a). The initial visualization

Figure 17(a).

Figure 17(b).

Figure 16(c). The “Show nodes” and “Show edges” options OFF

Figure 17(c).

Figure 17. A tree with five thousand elements

Both algorithm are extremely fast and work well with larger graphs; as future work we plan to design new algorithms that present alternative distributions of the nodes on the sphere in order to do a better sphere surface use optimization. With respect to the interactions we will continue searching for new ways to enhance the communication and interaction between the user and the visualization.

ACKNOWLEDGEMENT This work was partially supported by the PGI 24/N015 and 24/ZN12, Science and Technology Department of the Universidad Nacional del Sur (SECyT, UNS) and the PICT 2003 Nº 15043, Agencia Nacional de Promoción Científica y Tecnológica.

REFERENCES [GDBT99] Giuseppe Di Battista, et at, 1999, Graph Drawing: Algorithms for the visualization of graphs. Prentice Hall, New York, NY, USA. [HEE05] Heer, J., et al, 2005, Prefuse: a toolkit for interactive information visualization. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Portland, Oregon, USA, April 02 - 07, 2005). CHI '05. ACM Press, New York, NY, 421-430. [HMM00] Herman, I., et al., 2000, Graph visualization and navigation in information visualization. a survey. IEEE Transactions on Visualization and Computer Graphics 6, 1 (2000), pp. 24-43. [TC05] James T, et al., editor, Illuminating the Path, National Visualization and Analytics Center, ISBN 0-7695-2323. [MOO98] Moore, J. C. 1998, Visualizing with VTK. Linux J. 1998, 53es (Sep. 1998), 5. [RCM93] Robertson, G. G., et al, 1993, Information Visualization using 3D interactive animation. ACM 36, 4, pp. 57-71. [RT81] Reingold, E., et al,, 1981, Tidier drawing of trees. IEEE Transactions on Software Engineering, pp. 223-228. [SZY01] Szymczak, A., et al., 2001, An edgebreaker-based efficient compression scheme for regular meshes. Comput. Geom. Theory Appl. 20, 1-2 (Oct. 2001), 53-68. [WAR00] Ware, C., 2000, Information visualization: perception for design. Morgan Kaufmann Publishers., San Francisco, CA, USA. [YFD01] Yee, K. P., et al, 2001, Animated exploration of dynamic graphs with radial layout. Proceedings of the IEEE Symposium on Information Visualization 2001. pp. 43-51. [YOU96] Young, P., 1996, Three dimensional information visualization. Tech. Rep., University of Durham.

98