xxxxxxxxxx
<html lang='en' xml:lang='en' xmlns='https://www.w3.org/1999/xhtml'>
<head>
<meta content='text/html;charset=UTF-8' http-equiv='content-type'>
<title>Right-angle phylograms and dendrograms with d3</title>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="newick.js" type="text/javascript"></script>
<script src="d3.phylogram.js" type="text/javascript"></script>
<script>
function load() {
var newick = Newick.parse("(((Crotalus_oreganus_oreganus_cytochrome_b:0.00800,Crotalus_horridus_cytochrome_b:0.05866):0.04732,(Thamnophis_elegans_terrestris_cytochrome_b:0.00366,Thamnophis_atratus_cytochrome_b:0.00172):0.06255):0.00555,(Pituophis_catenifer_vertebralis_cytochrome_b:0.00552,Lampropeltis_getula_cytochrome_b:0.02035):0.05762,((Diadophis_punctatus_cytochrome_b:0.06486,Contia_tenuis_cytochrome_b:0.05342):0.01037,Hypsiglena_torquata_cytochrome_b:0.05346):0.00779);")
var newickNodes = []
function buildNewickNodes(node, callback) {
newickNodes.push(node)
if (node.branchset) {
for (var i=0; i < node.branchset.length; i++) {
buildNewickNodes(node.branchset[i])
}
}
}
buildNewickNodes(newick)
d3.phylogram.buildRadial('#radialtree', newick, {
width: 400,
skipLabels: true
})
d3.phylogram.build('#phylogram', newick, {
width: 300,
height: 400
});
}
</script>
<style type="text/css" media="screen">
body { font-family: "Helvetica Neue", Helvetica, sans-serif; }
td { vertical-align: top; }
</style>
</head>
<body onload="load()">
<table>
<tr>
<td>
<h2>Circular Dendrogram</h2>
<div id='radialtree'></div>
</td>
<td>
<h2>Phylogram</h2>
<div id='phylogram'></div>
</td>
</tr>
</table>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js