spond/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Different tree layouts.

In addition to linear/cladogram layouts,
phylotree.js also implements a radial or cicrular
layout. Invoking it is a matter of overriding the default setting.
It is important to set the radial option prior to binding Newick data to the tree,
because at that time nodes are mapped to screen coordinates using current settings.
The layout mode can be changed after the tree has been rendered, but then it is
necessary to call the functions which lay out the tree object in screen coordinates
again: placenodes and
update.

  
## 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>
  <div>
      <form>
        <label>Radial layout
        <input type = "checkbox" id = "layout" checked/>
      </form>
  </div>


  <svg id = "tree_display"></svg>

  <script>
      d3.text ("yokoyama.nwk", function (error, newick) {

              var tree = d3.layout.phylotree()
                     .svg (d3.select ("#tree_display"))
                     .radial (true);

              tree (d3_phylotree_newick_parser (newick))
                   .layout();

               $("#layout").on ("click", function (e) {
                    tree.radial ($(this).prop ("checked")).placenodes().update ();
              });
        });
  </script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## 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)
	<!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>
	<div>
	<form>
	<label>Radial layout
	<input type = "checkbox" id = "layout" checked/>
	</form>
	</div>


	<svg id = "tree_display"></svg>

	<script>
	d3.text ("yokoyama.nwk", function (error, newick) {

	var tree = d3.layout.phylotree()
	.svg (d3.select ("#tree_display"))
	.radial (true);

	tree (d3_phylotree_newick_parser (newick))
	.layout();

	$("#layout").on ("click", function (e) {
	tree.radial ($(this).prop ("checked")).placenodes().update ();
	});
	});
	</script>

	</body>
	</html>