forked from CactusTrees/CactusTrees.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlayout.html
More file actions
77 lines (59 loc) · 6.8 KB
/
layout.html
File metadata and controls
77 lines (59 loc) · 6.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!-- Adapted from https://www.evl.uic.edu/aej/424/ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CactusTree Layout</title>
</head>
<body bgcolor="white" text="black">
<div align="left"><font style="font-family:
Helvetica,Arial,sans-serif;" color="black" size="4"><b>CactusTree Layout:</b></font></div>
<font style="font-family:Helvetica;" color="black" size="3">
<li style="margin-left: 30px">
<b>CactusTree</b> is a novel visualization technique for representing the structure and connectivity in deeply nested trees. <b>CactusTree</b> was inspired by our ongoing work in creating biological pathway visualizations that enable a range of different visual analytics tasks. Although biological pathways can be thought of as interconnected graph structures, domain experts tend to carve out particular subgraphs of pathways in order to limit their complexity and to focus on the components that are relevant to a particular research problem. For the most part, the representations of these pathways are hierarchical structures.<br></li>
<li style="margin-left: 30px">
An important consideration in visualizing biological pathways is clearly showing how particular biological elements influence or are influenced by other elements. That is, it can be necessary to highlight relevant interconnected sub-trees with a particular directionality, while at the same time making sure not to obscure the hierarchical information in the tree. <br></li>
<li style="margin-left: 30px">
<b>CactusTree</b> visualization technique is geared specifically towards more effectively representing overlaid bundles of intersecting links between nodes in the tree. This is a noteworthy approach toward solving the problem of collinearity that was observed in the original paper on hierarchical edge bundling (see Fig. 17 in
<a href="http://www.aviz.fr/wiki/uploads/Teaching2014/bundles_infovis.pdf">Hierarchical Edge Bundling</a> paper). Rather than investigating the bundling techniques themselves, as most existing approaches have attempted, here we have explored the potential of modifying to the underlying tree layout. <br></li>
</font>
<hr style="width: 100%; height: 1px;">
<div align="left"><font style="font-family:
Helvetica,Arial,sans-serif;" color="black" size="4"><b>Examples:</b></font></div>
<font style="font-family:Helvetica;" color="black" size="3">
<li style="margin-left: 30px">
The following figures show CactusTree visualization technique for the <i>Activation of Pro-caspase 8</i> and <a href="http://www.reactome.org/PathwayBrowser/#/R-HSA-1227986"><i>ERBB2</i></a> pathway. Blue (leaf) nodes are biochemical reactions within this pathway. Gray nodes are sub-pathways which are stacked directly on the top of parent pathway. We use red links to indicate the causal relationships between nodes (biochemical reactions). Connections of nodes in different sub-trees are wired (bundled) through the center of their closest common ancestor. <br>
<img style="width: 49%;" alt="" src="/figures/Activation of Pro-caspase 8 Pathway.png"><img src="figures/ERBB2 Pathway.png"
alt="ERBB2" style="width: 50%;">
<br><br>
<li style="margin-left: 30px">
<b>CactusTree</b> supports Google Maps-like navigation tools, including zooming in/out capability via a mouse scroll as well as navigatingcapability via dragging the mouse. The following figure shows strong causal relationships between 116 biochemical reactions in the <a href="http://www.reactome.org/PathwayBrowser/#/R-HSA-166520"><i>NGF</i></a> Pathway. The right panel shows zooming into a subtree.
</li>
<center><img style="width: 80%;" src="/figures/Cactus6.png"></center>
<br><br>
<li style="margin-left: 30px">
<b>CactusTree</b> also supports other interactions, such as collapsing or expanding of node in the hierarchy to simplify or or to fully explore its structure, selecting a connection between two nodes, and highlighting relationships involving an selected item in the hierarchy. The following figure shows <i>carnivora</i> hierarchy, which contains 63 meat-eating species. The data was downloaded from <a href="http://www.onezoom.org/"><i>OneZoom</i></a> and overlaid with the prey-predator data provided by taxonomy experts.
In this figure, we display the images of species within the <i>carnivora</i> food chain. The red links connect predators to their preys. Right panel shows brushing a leaf node under the arrow.
</li>
<center><img style="width: 100%;" src="/figures/Cactus15.png"></center>
<br><br>
<li style="margin-left: 30px">
Since child nodes in <b>CactusTree</b> are stacked along the half-arcs of their parent, every parent node has a separated entry for bundled links to its child nodes (the entry is the center of the other half-arc). Consequently, we can visualize interconnectivities between multiple <b>CactusTree</b>s as depicted in the following figure. The data are five biological pathways downloaded from <a href="http://www.reactome.org/PathwayBrowser/"><i>Reactome</i></a>.
</li>
<center><img style="width: 100%;" src="/figures/Cactus9.png"></center>
<li style="margin-left: 30px">
Multiple <b>CactusTrees</b> can also be interconnected in a circular manner as depicted in the next figure. The data are <a href="http://www.reactome.org/PathwayBrowser/#/R-HSA-1643685"><i>20 diseases </i></a> pathways, such as <a href="http://www.reactome.org/PathwayBrowser/#/R-HSA-5663205&PATH=R-HSA-1643685"><i>infectious diseases</i></a>, <a href="http://www.reactome.org/PathwayBrowser/#/R-HSA-3781865&PATH=R-HSA-1643685"><i>diseases of glycosylation</i></a>, and <a href="http://www.reactome.org/PathwayBrowser/#/R-HSA-5668914&PATH=R-HSA-1643685"><i>diseases of metabolism</i></a>. The red links indicate causal relationships between these pathways.
</li>
<center><img style="width: 65%;" alt="" src="/figures/Cactus10.png"></center>
<br>
<li style="margin-left: 30px">
<b>CactusTree</b> can be used to visualize data from many different domains, such as security and biodiversity. The following figure shows <i>prey-predator</i> relationships between <i>mammals</i>. <i>Carnivora</i> is an evolutionary subtree of the <i>mammal</i> hierarchy. The data is retrived from <a href="http://www.onezoom.org/"><i>OneZoom</i></a>.
</li>
<center><img style="width: 65%;" alt="" src="/figures/CactusMammals.png"></center>
<br>
</font>
<hr style="width: 100%; height: 1px;">
<div align="right"><font style="font-family:
Helvetica,Arial,sans-serif;" color="black" size="2">© Last revised: Oct 4th, 2016 </font></div>
</ul>
</body>
</html>