Using Orthographic Projection and Animation to Convey ... - SAS Blogs

Poster: Using Orthographic Projection and Animation to Convey Treemap Structure Jordan Riley Benson, Lee Sullivan, Rajiv Ramarajan, Frank Wimmer and Paul Hankey SAS Institute Inc.

  ABSTRACT We present an alternative treemap visualization method that maintains the space-filling and area comparison benefits of the standard treemap while improving the range of possible comparisons and the clarity of the hierarchy. Our visualization uses an orthographic stack representation and relies on interaction and animation to reveal the structure of the treemap to the user, but is still effective in a static environment once the user reaches a view that interests them. KEYWORDS: information visualization, hierarchy visualization, orthographic treemap, data exploration INDEX TERMS: H.5.2 [Information Interfaces and Presentation]: User Interfaces – Interaction Styles. 1

INTRODUCTION

Treemap visualizations of data sets with deep or complex hierarchies often have trouble effectively displaying multiple levels of the hierarchy at the same time.

A nested layers view, Figure 1-C, adds the hierarchy information back into the visualization by showing the parent-child relationships [3]. However, without double encoding the depth of the node, using color for example, it can become difficult to determine which nodes are on the same level in the hierarchy. Also, the relative sizes of the nodes may no longer be comparable due to the padding adding during the nesting. Another solution to the problem employs a cascading view [4], as shown in Figure 1-D. This method does not distort the relative sizes of the nodes and still allows the hierarchy to be represented. However, comparison between non leaf nodes is still difficult, and without using color to distinguish the different levels, it can be hard to determine what level a given node is from. A visualization technique is needed that allows for effective comparison between all nodes in the tree and maintains a coherent and navigable representation of the structure of the data at the same time. 2

ORTHOGRAPHIC LAYERS

Our solution to this problem began with creating a series of planar layers comprised of tiles generated from each node in the source hierarchy. Any treemap tiling algorithm would be applicable to our layout, but the squarified [2] algorithm is preferred since the ease with which users can interact with tiles is of high importance. The resultant layers are arranged into an orthographic stack with the root tile at the top to mimic typical node-link diagrams of trees. Like the cascaded view, avoiding nesting keeps the tiles close together and easy to compare.

    Figure 1. Treemap variations. Displaying levels of the hierarchy individually makes it easy to compare tree nodes that are at the same depth, which is a common use of treemaps, but it is not easy to compare tree nodes at different levels nor is it easy to understand the structure of the data since the relationships between the nodes are not visible. SAS Campus Drive, Cary, NC 27513. [email protected]

Figure 2. Orthographic layering. As shown in Figure 2, simply stacking the layers obscures the lower levels of the hierarchy. The immediate benefit of this arrangement is that the levels in the treemap can be easily identified and labeled, but comparing nodes and understanding the structure is still difficult. Therefore, further improvements were made to address these shortcomings. 3

INTERACTION AND ANIMATION

The orthographic treemap can be toggled to a more familiar, flattened view at any time. This way the space-filling and area comparison benefits of the traditional treemap layout are not lost. Additionally, to further allow the user to select the view that best suits them, the ability to rotate the treemap was also added.

The topmost layer in the treemap is the working layer and all layers below it are representative of levels in the hierarchy of the data set. Single-clicking any of these sub-layers will move the tiles at that level into the working layer. Single-clicking a tile in the working layer will perform an expansion on that tile. This is represented by moving the tile’s children from the appropriate sub-layer into the working layer and replacing the parent tile. Double-clicking a tile in the working layer will perform a zoom on that tile, making it the new root of the treemap. This is represented by scaling the selected tile to the full size of the treemap before revealing the new set of sub-layers. All of the manipulations that can be performed on the treemap are animated in our visualization to help reduce the amount of time wasted on restoring context after each change [1]. The ability to selectively expand tiles can lead to the working layer containing tiles from differing levels in the hierarchy. So that this condition is evident, and so that tiles from the same level can be visually identified, a bordering method is used to separate the tiles in the working layer only. Figure 3 shows an instance where there are tiles from three different levels all shown in the working layer at the same time.

where leaf nodes are not always at the same depth, and handling tile layouts where there are tiles that need to be rendered at sizes smaller than can reasonably be interacted with. More formal tests are needed to determine the relative effectiveness of our visualization method. Future tests will likely focus on determining whether the orthographic treemap layout assists users in understanding the structure of the underlying hierarchy more effectively than other presentations. As a final step in applying our treemap visualization to the exploration of a hierarchical dataset, we plan to pursue the ability to generate more appropriate types of visualizations from the currently selected tiles in the working layer.

  Figure 4. Tooltips and shadowing on hover.   Figure 3. Mixed-level bordering. When hovering over a tile in the working layer a tooltip appears to show further details and a shadowing effect is used to indicate which tiles in the sub layers are the immediate descendants of the current tile. This is demonstrated in Figure 4. As a way of previewing the effect of selecting one of the sublayers, hovering over them will give them temporary focus and allow the user to see the layout of the tiles in that layer. This is demonstrated in Figure 5. 4

RESULTS

Two informal tests were performed, each using 4 to 6 participants that had little or no prior experience with treemaps of any form. The first group was exposed to the treemap starting in the orthographic mode and the second group began with the treemap in the traditional flattened view. The same types of tasks were performed by all participants and involved making simple comparisons and finding outliers. Both groups were eventually shown how to toggle between the two modes and in both cases participants indicated that it would have been useful to know about that feature while completing their tasks, though for different reasons. Users found the orthographic view difficult when searching a single layer for a specific item and found the flattened view harder to navigate. Also, it took users some time to become accustomed to the idea of interacting with the sub-layers and users did not make use of the rotation feature after discovering it. 5

LIMITATIONS AND FUTURE WORK

There are many problems common to all treemaps. The two largest facing our implementation are accommodating hierarchies

  Figure 5. Level preview on hover. REFERENCES [1]

Bladh, T. Carr, D.A. and Kljun, M. The Effect of Animated Transitions on User Navigation in 3D Treemaps. Proceedings of Information Visualization 2005, 297-305.

[2]

Bruls, M., Huizing, K. and Van Wijk, J.J. (2000). Squarified Treemaps. Proceedings of the Joint Eurographics and IEEE TCVG Symposium on Visualization (TCVG 2000), 33-42.

[3]

Johnson, B. and Shneiderman, B. (1991). Tree-Maps: A Space-Filling Approach to the Visualization of Hierarchical Information Structures. Proceedings of IEEE Conference on Visualization (Vis 1991), 284-291.

[4]

Lu, Hao and Fogarty, James. Cascaded Treemaps: Examining the Visibility and Stability of Structure in Treemaps. Graphics Interface 2008, 259-266.