Create a phylotree.js object from a Newick tree string, and display it in an SVG element using default settings and styles. Because the default tree view supports clickable nodes, it is necessary to include jQuery and Bootstrap. It is always necessary to include d3, and phylotree.js script and styles (unless overridden by the user).
Click on internal nodes to bring up menus that allow you to collapse/select them.
| <!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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <svg id="tree_display" /> | |
| <script> | |
| var example_tree = "(((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.397100):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.157450):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)" | |
| // tree from Yokoyama et al http://www.ncbi.nlm.nih.gov/pubmed/18768804 | |
| var tree = d3.layout.phylotree() | |
| // create a tree layout object | |
| .svg(d3.select("#tree_display")); | |
| // render to this SVG element | |
| tree(d3.layout.newick_parser(example_tree)) | |
| // parse the Newick into a d3 hierarchy object with additional fields | |
| .layout(); | |
| // layout and render the tree | |
| </script> | |
| </body> | |
| </html> |
