1. Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams
Shengdong Zhao, Michael J. McGuffin, Mark H. Chignell
Good afternoon. In this talk, we will discuss our research attempt to solve the challenges of Tree visualization using a new dynamic representation called elastic hierarchy by combining two existing complementary styles. The rest of the talk will elaborate on the motivation, theory, and implementation of this research.
University of Toronto

2. Hierarchies (Trees) Definition Examples
Data where cases relate to subcases
Examples
Family histories, ancestries
File/directory systems on computers
Organization charts
Animal kingdom: phylum, genus
Object-oriented software classes
The domain of our research is on hierarchies or trees which can be generally defined as data where cases are related to subcases. Trees are universal and important, and many examples of its usage are listed here.

3. Common Tree Representations
Alignment,
Adjacency
Node-Link
Containment
Outline
Many visual representations have been proposed in the past. They can be categorized into roughly four common strategies: namely node-link, containment, alignment/adjacency, and outline. Under these categories, many examples or variants representations have been proposed.

4. Common Tree Representations
Alignment,
Adjacency
Node-Link
Containment
Outline
For example, one classic style under node-link category uses Reingold-Tilford and Walker algorithms to draw the nodes and edges in a tidy fashion.
Node-Link
Diagram

5. Common Tree Representations
Alignment,
Adjacency
Node-Link
Containment
Outline
Treemaps is an representation under the containment category that draws nodes in a space filling matter.
Node-Link
Diagram
Treemap

6. Common Tree Representations
Alignment,
Adjacency
Node-Link
Containment
Outline
The sunburst visualization is a variant within the alignment/adjacency category by layouting the nodes in the polar coordinate system.
Node-Link
Diagram
Treemap
Sunburst

7. Common Tree Representations
Alignment,
Adjacency
Node-Link
Containment
Outline
And the windows explorer is a familiar implementation of Tree visualization of the outline strategy
Node-Link
Diagram
Treemap
Sunburst
Explorer

8. Tree Visualization Challenges
Structure AND data within items
Scalability (exponential growth)
Context (when focus changes)
Multiple hierarchies or polyarchies
Multiple foci
[Furnas & Zacks]
Despite the many attempts in the past, tree visualization remains a very challenging problem.
It’s due to, first, tree has both structure, and content within the individual nodes. Effectively visualize both structure and content is difficult within a given space.
Secondly, the data size of a tree grows exponentially with the number of levels, but our screen space does not
Thirdly, it’s not always easy to maintain context when the focus on a large tree changes.
Fourthly, hierarchy itself can be rather complex, such as multiple hierarchies or polyarchies
And, users might be interested in multiple focal points within a large tree that are located at branches far apart from each other, causing additional difficulties in visualization.
[Robertson]

9. Tree Visualization Challenges
Different local properties
Topology (dense vs. sparse)
Data content (image vs. text)
In addition, a large tree can have very different local properties. These differences can happen in topology where certain branches can have a very high branching factor while the other branches having very low branching factors. Also, the content of the data can be of different types and having very different properties such as image vs. text. For example, we might want to use Treemap to visualize image nodes, while using another representation for the text node.

10. Tree Visualization Challenges
Different local properties
Topology (dense vs. sparse)
Data content (image vs. text)
Dynamic data
Hierarchies evolve
Adjustment required for content, context, topology
Furthermore, hierarchy often evolves through time, the adding and removing of data can affect the topology, content, and context of the tree.

11. Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
Explorer
With that many challenges, we found that any of the single representation proposed before has limitations and tradeoffs. A single representation is often optimized/catered toward one subset of the problems while limiting the other problems.

12. Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
Explorer
Structure vs. data within items
It’s hard to balance the display of the structure and the data within items. Often leaning toward one aspect will negatively impact the other.

13. Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
Explorer
Structure vs. data within items
Expressivity
And a single representation is often restricted in power in differentiating among various branches with distinctive local properties. A single representation is often not ideal for the multiple data types, and less adaptive to the changes of an evolving trees.

14. Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
Explorer
Structure vs. data within items
Expressivity
Static representation
Further more, a single representation is static, users are not allowed to manipulate the branches within the large trees to different representations.

15. Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
Explorer
Structure vs. data within items
Expressivity
Static representation
Now, let’s look at two of the more popular styles, namely the node-link diagram and the Treemaps, and discuss their pros and cons in more details

16. Node-Link & Treemap Node-Link Treemap Pros Familiar
Shows both structure and items
Scalable, space efficient
Eases comparison of branch patterns
Cons
Hard to scale (100 nodes)
Less familiar
Hard to see structure

17. Node-Link & Treemap Node-Link Treemap Pros Familiar
Shows both structure and items
Scalable, space efficient
Eases comparison of branch patterns
Cons
Hard to scale (100 nodes)
Less familiar
Hard to see structure

18. Node-Link & Treemap Node-Link Treemap Pros Familiar
Shows both structure and items
Scalable, space efficient
Eases comparison of branch patterns
Cons
Hard to scale (100 nodes)
Less familiar
Hard to see structure
The pros of node-link nicely complements the cons of treemap

19. Node-Link & Treemap Node-Link Treemap Pros Familiar
Shows both structure and items
Scalable, space efficient
Eases comparison of branch patterns
Cons
Hard to scale (100 nodes)
Less familiar
Hard to see structure
The pros of Treemap nicely complements the cons of node-link diagram. So these two representations nicely complements each other.
Can we use this observation to our advantage?

20. Solving the Problem
Hybridize complementary representations to balance structure and scalability
What about creating a hybrid solution to allow better balance the structure and scalability.
In biology, we know hybrids are often used to produce new species that combine the advantages of complementary species, and based on our analysis, it seems a hybrid solution using node-link and treemap could be advantageous.

21. Solving the Problem
Hybridize complementary representations to balance structure and scalability
Representational adaptations for branches and tasks
By doing so, we gain the flexibility to adapt to the different characteristics of branches and tasks.

22. Solving the Problem
Hybridize complementary representations to balance structure and scalability
Representational adaptations for branches and tasks
User manipulation and automatic adjustment
And, we can provide the user the power to manipulate representations at local points, and also design algorithms to automatically adjust the representation forms when condition changes.
This way, we can create a dynamic hybrid representation with better adaptivity and fits user’s need.

23. Combine Multiple Representations
Node-Link
So how to create such a hybrid representation using node-link diagram and treemaps. Assuming we have a design space, and node-link is put at one end of the spectrum.

24. Combine Multiple Representations
Node-Link
Treemap
And treemap is put at the other end.

25. Combine Multiple Representations
Node-Link
Hybrid 1
Treemap
One possible hybrid solution will be, we use node-links for all the top level nodes, and pack the lower level nodes use the space efficient treemaps.

26. Combine Multiple Representations
Node-Link
Hybrid 1
Hybrid 2
Treemap
Another possibility will be putting the treemap for all the top level nodes, while keeping the node-link forms for the lower level nodes.

27. Combine Multiple Representations… … …
Node-Link
Hybrid 1
Hybrid 2
Treemap
And there are many other possibilities to hybridize node-link and treemap for a particular tree.

28. Combine Multiple Representations… … …
Node-Link
Hybrid 1
Hybrid 2
Treemap
And we called the entire set of all possible hybrids, along with node-link and treemap forms as elastic hierarchy, where the individual forms can be adjusted and manipulated. (use interaction to traverse the set.)
Elastic Hierarchy:
Entire set of adjustable hybrids of multiple representations

29. Elastic Hierarchy A tree of ~3500 nodes using Node-Link Node–Link
Diagram
Now, let’s look at an example, here we have a tree with about 35 hundred nodes. Users are interested in the two colored branches within the tree, but in the node-link diagram, the leave nodes become too crowded, and it’s much harder to the selected branches in details.

30. Elastic Hierarchy Same tree using Treemap Treemap
The same tree drawn in treemap uses the space better, but the layout make it difficult to observe the structure of the selected branches, and it’s less familiar to the users.

31. Elastic Hierarchy Same tree using Elastic Hierarchy Elastic Hierarchy
Using elastic hierarchy, we nicely put the two selected branches in the context of the entire tree, you can clearly see both the structure and the content of the selected branches while still maintain a good overview of the entire tree.

32. Elastic Hierarchy Elastic Hierarchy Focus+context
Node–Link Diagram
Treemap
Elastic Hierarchy
Elastic Hierarchy
Focus+context
Adaptability+user control
Multiple foci
Based on this comparison, we found that Elastic Hierarchy allows better focusing of selected branches while still maintain their context.
Each of the individual branches of the tree can change its representation by either the user or the system to adapt to the changes. Multiple foci is also naturally supported.

33. Taxonomy y x
Earlier we showed a slide of elastic hierarchies as a set of all possible hybrids, now if we look at each of these hybrids, and the way we depict each parent and child, there are only a few different graphical transitions we can have from a parent to a child and these can be classified in a taxonomy.

34. Taxonomy Node-Link (NL) Treemap (TM) x y
Within a tree, for any parent node X, and its child node Y. The parent node X can be either a node-link type or a treemap type, so does the child node Y.

35. Taxonomy Node-Link (NL) Treemap (TM) inside outside x y
The relationship between parent node X and child node Y are either y is inside of its parent or y is outside of its parent. This gives us three elements, namely X, Y, and the relationship between them. Each element has 2 possibilities.

36. Taxonomy Node-Link (NL) Treemap (TM) inside outside
NL outside NL …….(A)
TM outside NL …….(B)
This yields a total of 8 possible combination among the three elements.
NL outside TM …….(C)
TM outside TM …….(D)
NL inside TM …….(E)
TM inside TM …….(F)
NL inside NL …….(G)
TM inside NL …….(H)

37. Taxonomy Node-Link (NL) Treemap (TM) inside outside
NL outside NL …….(A)
TM outside NL …….(B)
Among them, two are not possible by definition. Namely, we don’t allow any nodes of node-link type to contain any other nodes.
NL outside TM …….(C)
TM outside TM …….(D)
NL inside TM …….(E)
TM inside TM …….(F)
NL inside NL …….(G)
TM inside NL …….(H)

38. Taxonomy Node-Link (NL) Treemap (TM) inside outside
NL outside NL …….(A)
TM outside NL …….(B)
The remaining six possible cases can be depicted using examples shown on the right.
NL outside TM …….(C)
TM outside TM …….(D)
NL inside TM …….(E)
TM inside TM …….(F)

39. Taxonomy Node-Link (NL) Treemap (TM) inside outside
NL outside NL …….(A)
TM outside NL …….(B)
Two of them are the traditional node-link diagram which is sub graph A, and Treemaps which is subgraph F.
NL outside TM …….(C)
TM outside TM …….(D)
NL inside TM …….(E)
TM inside TM …….(F)

40. Taxonomy Node-Link (NL) Treemap (TM) inside outside
NL outside NL …….(A)
TM outside NL …….(B)
The rest four are the hybrid possibilities, and we will describe them in more details in the following slides.
NL outside TM …….(C)
TM outside TM …….(D)
NL inside TM …….(E)
TM inside TM …….(F)

41. Treemap Outside Node-Link
The first one is Treemap outside of node-link diagram. In this hybrid form,

42. Treemap Outside Node-Link
Preserve top-level topology
We preserve the familiar topological visualization of top level nodes.

43. Treemap Outside Node-Link
Preserve top-level topology
Space filling at crowded lower levels
And uses the space filling technique for the more crowded leaf nodes.

44. Treemap Outside Node-Link
Preserve top-level topology
Space filling at crowded lower levels
Pattern comparison among branches
By doing so, we nicely allows pattern comparison among various branches.

45. Treemap/Node-Link Outside Treemap
The second and the third hybrid forms are treemap or node-link outside of Treemaps.

46. Treemap/Node-Link Outside Treemap
Focus+Context
By combining these two forms, we can put selected branches and nodes within context.

47. Treemap/Node-Link Outside Treemap
Focus+Context
Multiple foci
Because we can pull out multiple branches from different places of the tree and place them side by side, it’s a good way to enable
Multiple foci visualization within a large tree.

48. Treemap/Node-Link Outside Treemap
Focus+Context
Multiple foci
Occlusion
However, because branches and nodes can be linked to the inside of their treemap parent. If multiple nodes are pulled out from a treemap node, it could cause minor occlusion problems.

49. Node-Link Inside Treemap
The last hybrid form is the node-link inside of a treemap.

50. Node-Link Inside Treemap
Local topology within context
But, has tight space constrains
In this form, we try to maintain the familiar visualization for the local topology, however, it could be constrained by tight spaces.

51. Node-Link Inside Treemap
Local topology within context
But, has tight space constrains
More space if resizing is allowed
But, resizing changes visual landmarks
We could allow resizing the subbranches of a treemap to relax the space constrain, but it may cause change of visual landmarks and maybe inconvenient.

52. Working Together
By combining these basic hybrid forms, we can create effective tree visualization.

53. Working Together
By combining these basic hybrid forms, we can create effective tree visualization. In this example, we have multiple branches in focus while maintain the context of each branches relative to the entire tree.

54. Implementation
We will talk about the implementation of elastic hierarchy in our prototype. In our implementation, to increase scalability, we also tried the overview plus detailed technique

55. Implementation
The left panel is a treemap overview of the entire tree. In this example, the six subtrees was draw within a long rectangle representing the root.

56. Implementation
The right panel is the panel for elastic hierarchy.

57. Implementation
Within the panel, you can see the entired tree is drawn using a hybrid representation.

58. Implementation
The bottom panel is a search panel to allow user to type in the text to search for nodes within the tree.

59. User Interactions Toggle between representations
We have implement a set of user interactions for the prototype. In particular, we allow toggle between representations within the tree.

60. User Interactions Toggle between representations Pan, zoom
Pan and Zoom are supported.

61. User Interactions Toggle between representations Pan, zoom
Resize any subtree
Resizing of any subtree are also supported.

62. User Interactions Toggle between representations Pan, zoom
Resize any subtree
Unambiguous selection within Treemaps using tabs
We also implemented an unambiguous selection technique for nodes within a treemap using tabs.

63. Elastic Hierarchy Video
Please download the video separately at

64. Contributions Elastic representation … … … Node-Link Hybrid 1 Hybrid 2
Treemap
In conclusion, we introduced a new dynamic representation type called elastic hierarchies by combining multiple representations.

65. Contributions Elastic representation Design space … … … Node-Link
Hybrid 1
Hybrid 2
Treemap
The design space of such is explored.

66. Contributions Elastic representation Design space
Interaction techniques … … …
Node-Link
Hybrid 1
Hybrid 2
Treemap
Finally, we design a set of the interaction techniques of such representation.

67. Future Work Empirical evaluation Other useful elastic representations
The research presented here is still at its beginning stage. There are many future work remain to done. We are planning to perform empirical evaluation comparing elastic hierarchy with various existing representations using real world data.
We are also interested in exploring other useful elastic representations by hybridizing other existing representations not only in trees, but also in other form of information visualization.

68. Acknowledgments
Ben Bederson, Ben Shneiderman, Ravin Balakrishnan, Maneesh Agrawala, Ed Chi, Amy Zhu, John Hancock, Joe Laszlo, Jim Chengming Cai, Noah Lockwood, Bowen Hui, anonymous reviewers, and other IML & DGP members at University of Toronto

69. Questions
Node–Link Diagram
Treemap
Elastic Hierarchy