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. ChignellGood 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 subcasesExamplesFamily histories, ancestriesFile/directory systems on computersOrganization chartsAnimal kingdom: phylum, genusObject-oriented software classesThe 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,AdjacencyNode-LinkContainmentOutlineMany 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,AdjacencyNode-LinkContainmentOutlineFor 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-LinkDiagram
5 Common Tree Representations Alignment,AdjacencyNode-LinkContainmentOutlineTreemaps is an representation under the containment category that draws nodes in a space filling matter.Node-LinkDiagramTreemap
6 Common Tree Representations Alignment,AdjacencyNode-LinkContainmentOutlineThe sunburst visualization is a variant within the alignment/adjacency category by layouting the nodes in the polar coordinate system.Node-LinkDiagramTreemapSunburst
7 Common Tree Representations Alignment,AdjacencyNode-LinkContainmentOutlineAnd the windows explorer is a familiar implementation of Tree visualization of the outline strategyNode-LinkDiagramTreemapSunburstExplorer
8 Tree Visualization Challenges Structure AND data within itemsScalability (exponential growth)Context (when focus changes)Multiple hierarchies or polyarchiesMultiple 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 notThirdly, 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 polyarchiesAnd, 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 propertiesTopology (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 propertiesTopology (dense vs. sparse)Data content (image vs. text)Dynamic dataHierarchies evolveAdjustment required for content, context, topologyFurthermore, 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-LinkDiagramTreemapSunburstExplorerWith 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-LinkDiagramTreemapSunburstExplorerStructure vs. data within itemsIt’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-LinkDiagramTreemapSunburstExplorerStructure vs. data within itemsExpressivityAnd 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-LinkDiagramTreemapSunburstExplorerStructure vs. data within itemsExpressivityStatic representationFurther 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-LinkDiagramTreemapSunburstExplorerStructure vs. data within itemsExpressivityStatic representationNow, 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 itemsScalable, space efficientEases comparison of branch patternsConsHard to scale (100 nodes)Less familiarHard to see structure
17 Node-Link & Treemap Node-Link Treemap Pros Familiar Shows both structure and itemsScalable, space efficientEases comparison of branch patternsConsHard to scale (100 nodes)Less familiarHard to see structure
18 Node-Link & Treemap Node-Link Treemap Pros Familiar Shows both structure and itemsScalable, space efficientEases comparison of branch patternsConsHard to scale (100 nodes)Less familiarHard to see structureThe pros of node-link nicely complements the cons of treemap
19 Node-Link & Treemap Node-Link Treemap Pros Familiar Shows both structure and itemsScalable, space efficientEases comparison of branch patternsConsHard to scale (100 nodes)Less familiarHard to see structureThe 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 ProblemHybridize complementary representations to balance structure and scalabilityWhat 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 ProblemHybridize complementary representations to balance structure and scalabilityRepresentational adaptations for branches and tasksBy doing so, we gain the flexibility to adapt to the different characteristics of branches and tasks.
22 Solving the ProblemHybridize complementary representations to balance structure and scalabilityRepresentational adaptations for branches and tasksUser manipulation and automatic adjustmentAnd, 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-LinkSo 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-LinkTreemapAnd treemap is put at the other end.
25 Combine Multiple Representations Node-LinkHybrid 1TreemapOne 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-LinkHybrid 1Hybrid 2TreemapAnother 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-LinkHybrid 1Hybrid 2TreemapAnd there are many other possibilities to hybridize node-link and treemap for a particular tree.
28 Combine Multiple Representations ………Node-LinkHybrid 1Hybrid 2TreemapAnd 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 DiagramNow, 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 DiagramTreemapElastic HierarchyElastic HierarchyFocus+contextAdaptability+user controlMultiple fociBased 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 TaxonomyyxEarlier 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 topologyWe preserve the familiar topological visualization of top level nodes.
43 Treemap Outside Node-Link Preserve top-level topologySpace filling at crowded lower levelsAnd uses the space filling technique for the more crowded leaf nodes.
44 Treemap Outside Node-Link Preserve top-level topologySpace filling at crowded lower levelsPattern comparison among branchesBy 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+ContextBy combining these two forms, we can put selected branches and nodes within context.
47 Treemap/Node-Link Outside Treemap Focus+ContextMultiple fociBecause we can pull out multiple branches from different places of the tree and place them side by side, it’s a good way to enableMultiple foci visualization within a large tree.
48 Treemap/Node-Link Outside Treemap Focus+ContextMultiple fociOcclusionHowever, 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 contextBut, has tight space constrainsIn 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 contextBut, has tight space constrainsMore space if resizing is allowedBut, resizing changes visual landmarksWe 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 TogetherBy combining these basic hybrid forms, we can create effective tree visualization.
53 Working TogetherBy 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 ImplementationWe 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 ImplementationThe 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 ImplementationThe right panel is the panel for elastic hierarchy.
57 ImplementationWithin the panel, you can see the entired tree is drawn using a hybrid representation.
58 ImplementationThe 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 subtreeResizing of any subtree are also supported.
62 User Interactions Toggle between representations Pan, zoom Resize any subtreeUnambiguous selection within Treemaps using tabsWe 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 TreemapIn conclusion, we introduced a new dynamic representation type called elastic hierarchies by combining multiple representations.
65 Contributions Elastic representation Design space … … … Node-Link Hybrid 1Hybrid 2TreemapThe design space of such is explored.
66 Contributions Elastic representation Design space Interaction techniques………Node-LinkHybrid 1Hybrid 2TreemapFinally, 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 AcknowledgmentsBen 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