tnt.tree
Version:
TnT tree display
60 lines (45 loc) • 2 kB
HTML
<head>
<!-- D3 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- TnT -->
<link rel="stylesheet" href="../../build/tnt.tree.css" />
<script src="../../build/tnt.tree.js"></script>
</head>
<body>
<span>Search in tree: <input type="text" oninput="search(this.value)"></input></span>
<div id="mydiv"></div>
<script>
<!-- search -->
function color (node, val) {
var name = node.node_name();
if (name.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return "steelblue";
}
return "black";
}
function search(val) {
var root = tree_vis.root();
tree_vis.node_display()
.fill(function (node) {
return color(node, val);
});
tree_vis.label()
.color(function (node) {
return color(node, val);
})
tree_vis.update_nodes();
}
var newick = "(((C.elegans,Fly),(((((((((Tasmanian Devil,Wallaby,Opossum),((Armadillo,Sloth),(Rock hyrax,Tenrec,Elephant),(((Rabbit,Pika),(((Rat,Mouse),Kangaroo rat,Squirrel),Guinea Pig)),((Mouse lemur,Bushbaby),((((((Chimp,Human,Gorilla),Orangutan),Gibbon),Macaque),Marmoset),Tarsier)),Tree Shrew),((Microbat,Flying fox),(Hedgehog,Shrew),((Panda,Dog,Domestic ferret),Cat),((Cow,Sheep),Pig,Alpaca,Dolphin),Horse))),Platypus),((((Collared flycatcher,Zebra finch),(Chicken,Turkey),Duck),Chinese softshell turtle),Anole lizard)),Xenopus),Coelacanth),(((Zebrafish,Cave fish),((((Medaka,Platyfish),Stickleback),(Fugu,Tetraodon),Tilapia),Cod)),Spotted gar)),Lamprey),(C.savignyi,C.intestinalis))),S.cerevisiae);";
var tree_vis = tnt.tree()
.data(tnt.tree.parse_newick(newick));
tree_vis.layout()
.width(500)
.scale(false);
tree_vis.node_display()
.fill("steelblue");
tree_vis.label()
.color("steelblue");
tree_vis(document.getElementById("mydiv"));
</script>
</body>