Presentation is loading. Please wait.

Presentation is loading. Please wait.

Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams

Similar presentations


Presentation on theme: "Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams"— Presentation transcript:

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


Download ppt "Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams"

Similar presentations


Ads by Google