D3 Examples - d3.phylogram.js, stackoverflow answer

xxxxxxxxxx
 
<!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.v2.min.js"></script>
    <script src="d3.phylogram.js" type="text/javascript"></script>
​
    <style type="text/css" media="screen">
      body { font-family: "Helvetica Neue", Helvetica, sans-serif; }
      td { vertical-align: top; }
​
      /* tell the SVG path to be a thin blue line without any area fill */
      path {
        stroke: steelblue;
        stroke-width: 1;
        fill: none;
      }
    </style>
  </head>
  <body>
    <div id='phylogram'></div>
    <script>
      var data = {
        "branchset": [
          {
            "name": "", "length": 0.05,
            "branchset": [
              {
                "name": "", "length": 0.05,
                "branchset": [ { "name": "A", "length": 0.05 }, { "name": "B", "length": 0.05 } ]
              },
              {
                "name": "", "length": 0.05,
                "branchset": [ { "name": "C", "length": 0.05 }, { "name": "D", "length": 0.05 } ]
              }
            ]      
          },
          {
            "name": "", "length": 0.1, 
            "branchset": [ { "name": "E", "length": 0.05 }, { "name": "F", "length": 0.05 }
            ]
          },
          {
            "name": "", "length": 0.05,
            "branchset": [
              {
                "name": "", "length": 0.05,
                "branchset": [ { "name": "G", "length": 0.05 }, { "name": "H", "length": 0.05 } ]         
              },
              { "name": "I", "length": 0.1 }
            ]
          }
        ],
        "name": ""
      } 
​
      d3.phylogram.build('#phylogram', data, {
        width: 300,
        height: 400
      });
    </script>
  </body>
</html>
​
    