Presentation on theme: "Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams"— Presentation transcript:
1Elastic 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
2Hierarchies (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.
3Common 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.
4Common 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
5Common Tree Representations Alignment,AdjacencyNode-LinkContainmentOutlineTreemaps is an representation under the containment category that draws nodes in a space filling matter.Node-LinkDiagramTreemap
6Common 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
7Common Tree Representations Alignment,AdjacencyNode-LinkContainmentOutlineAnd the windows explorer is a familiar implementation of Tree visualization of the outline strategyNode-LinkDiagramTreemapSunburstExplorer
8Tree 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]
9Tree 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.
10Tree 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.
11Single 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.
12Single 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.
13Single 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.
14Single 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.
15Single 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
16Node-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
17Node-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
18Node-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
19Node-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?
20Solving 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.
21Solving 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.
22Solving 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.
23Combine 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.
24Combine Multiple Representations Node-LinkTreemapAnd treemap is put at the other end.
25Combine 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.
26Combine 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.
27Combine Multiple Representations ………Node-LinkHybrid 1Hybrid 2TreemapAnd there are many other possibilities to hybridize node-link and treemap for a particular tree.
28Combine 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
29Elastic 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.
30Elastic 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.
31Elastic 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.
32Elastic 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.
33TaxonomyyxEarlier 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.
34Taxonomy 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.
35Taxonomy 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.
36Taxonomy 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)
37Taxonomy 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)
38Taxonomy 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)
39Taxonomy 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)
40Taxonomy 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)
41Treemap Outside Node-Link The first one is Treemap outside of node-link diagram. In this hybrid form,
42Treemap Outside Node-Link Preserve top-level topologyWe preserve the familiar topological visualization of top level nodes.
43Treemap Outside Node-Link Preserve top-level topologySpace filling at crowded lower levelsAnd uses the space filling technique for the more crowded leaf nodes.
44Treemap 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.
45Treemap/Node-Link Outside Treemap The second and the third hybrid forms are treemap or node-link outside of Treemaps.
46Treemap/Node-Link Outside Treemap Focus+ContextBy combining these two forms, we can put selected branches and nodes within context.
47Treemap/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.
48Treemap/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.
49Node-Link Inside Treemap The last hybrid form is the node-link inside of a treemap.
50Node-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.
51Node-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.
52Working TogetherBy combining these basic hybrid forms, we can create effective tree visualization.
53Working 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.
54ImplementationWe 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
55ImplementationThe 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.
56ImplementationThe right panel is the panel for elastic hierarchy.
57ImplementationWithin the panel, you can see the entired tree is drawn using a hybrid representation.
58ImplementationThe bottom panel is a search panel to allow user to type in the text to search for nodes within the tree.
59User 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.
60User Interactions Toggle between representations Pan, zoom Pan and Zoom are supported.
61User Interactions Toggle between representations Pan, zoom Resize any subtreeResizing of any subtree are also supported.
62User 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.
63Elastic Hierarchy Video Please download the video separately at
64Contributions Elastic representation … … … Node-Link Hybrid 1 Hybrid 2 TreemapIn conclusion, we introduced a new dynamic representation type called elastic hierarchies by combining multiple representations.
65Contributions Elastic representation Design space … … … Node-Link Hybrid 1Hybrid 2TreemapThe design space of such is explored.
66Contributions Elastic representation Design space Interaction techniques………Node-LinkHybrid 1Hybrid 2TreemapFinally, we design a set of the interaction techniques of such representation.
67Future 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.
68AcknowledgmentsBen 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