D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kueda
Full window
Github gist
Right-angle phylograms and circular dendrograms with d3. To preview see http://bl.ocks.org/kueda/1036776
<!DOCTYPE html> <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