Skip to content

Instantly share code, notes, and snippets.

@stevenweaver

stevenweaver/README.md

Last active June 2, 2016 21:11
Show Gist options
  • Save stevenweaver/1c9c8e5c42560dee520685f056561ae2 to your computer and use it in GitHub Desktop.
Save stevenweaver/1c9c8e5c42560dee520685f056561ae2 to your computer and use it in GitHub Desktop.
Download ZIP
tree_layout
Raw
README.md

Using update_layout

This is an example of using phylotree.js using the update_layout method.

The Newick string is loaded from a file using an asynchronous d3.text call.

Raw
index.html
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href="//veg.github.io/phylotree.js/phylotree.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//veg.github.io/phylotree.js/phylotree.js"></script>
</head>
<body>
<svg id = "tree_display"></svg>
<script>
var nodeColorizer = function(element, data) {
var random = Math.random();
element.style('fill', function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
data["random"] = random;
}
d3.text ("yokoyama.nwk", function (error, newick) {
var height = 400,
width = 400,
tree = d3.layout.phylotree()
.svg (d3.select ("#tree_display"))
.options (
{'left-right-spacing' : 'fit-to-size',
// fit to given size top-to-bottom
'top-bottom-spacing' : 'fit-to-size',
// fit to given size left-to-right
'selectable' : false,
// make nodes and branches not selectable
'collapsible' : false,
// turn off the menu on internal nodes
'transitions' : false
// turn off d3 animations
}
)
.size([height, width])
.node_circle_size (0) // do not show "circles" at internal nodes
.layout_handler (function (tree) {
console.log(tree.get_nodes()[1]["random"]);
});
tree.style_nodes(nodeColorizer);
tree (d3_phylotree_newick_parser (newick))
// parse the Newick into a d3 hierarchy object with additional fields
// generate node coordinates
.layout();
// render the tree
window.setInterval(tree.update_layout, 1000);
});
</script>
</body>
</html>
Raw
yokoyama.nwk
(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.3971):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.15745):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment