Skip to content

Instantly share code, notes, and snippets.

@emepyc

emepyc/README.md

Last active January 12, 2016 16:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emepyc/a0c7e747dbfb1804d4b8 to your computer and use it in GitHub Desktop.
Save emepyc/a0c7e747dbfb1804d4b8 to your computer and use it in GitHub Desktop.
Download ZIP
Node height
Raw
README.md

By default, the layout calculates the height of the tree by using the size of the nodes. If nodes have different sizes, the maximum node size is used. All nodes are given the same space (vertical or radial depending on the layout)

In TnT Tree, all the nodes are given the same space (vertical or radial, depending on the layout) and this space is determined by the size of the nodes. If nodes are of different sizes, the maximum node size is used. For a given node, its size is determined by the maximum value between the node display and its label. In the vertical layout, the total height of the tree is given by the sum of the node heights (ie, the number of nodes times the maximum node height).

There are different ways of giving the nodes extra space, for example by giving more height to text labels. This example creates the same effect by giving the node a size different from the one that is used to plot the nodes themselves.

Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
<style>
#mydiv {
margin-top : 50px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script>
var newick = "(((((homo_sapiens:9,pan_troglodytes:9)207598:34,callithrix_jacchus:43)314293:52,(mus_musculus:95,rat:100)rodents:55)314146:215,taeniopygia_guttata:310)32524:107,danio_rerio:417)117571:135;";
var data = tnt.tree.parse_newick(newick);
// Show different node shapes for collapsed/non-collapsed nodes
var node_fill="lightgrey";
var node_stroke="black";
var circle_node = tnt.tree.node_display.circle()
.size(14) // This is used only for the circle display
.fill(node_fill)
.stroke(node_stroke);
var node_display = tnt.tree.node_display()
.size(24) // This is used for the layout calculation
.display (function (node) {
circle_node.display().call(this, node);
});
var tree = tnt.tree();
tree
.node_display(node_display)
.data(data)
.label(tree.label()
.fontsize(14)
)
.layout(tnt.tree.layout.vertical()
.width(600)
.scale(false)
);
// The visualization is started at this point
tree(document.getElementById("mydiv"));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment