cluterTree.html~

<!DOCTYPE html>
<html>
  <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>d3.js ~ Dendrogram</title>
    <script type="text/javascript" src="cluster_files/d3_002.js"></script><script src="cluster_files/d3.js"></script>
    <style type="text/css">

@import url("../style.css?1.10.0");
@import url("../syntax.css?1.6.0");

    </style>
  </head>
  <body>
    <div class="body">
      <div class="content">
        

<h1 id="dendrogram">Dendrogram</h1>


<link href="cluster_files/cluster.css" rel="stylesheet" type="text/css"><script src="cluster_files/cluster.js" type="text/javascript"> </script>

<h3 id="source_code">Source Code</h3>

      </div>
      <div class="foot">Copyright © 2012 <a href="http://bost.ocks.org/mike/">Mike Bostock</a></div>
    </div>


<script type="text/javascript" src="brainData.js"></script>   
	<script type="text/javascript" >

 var width = 960,
      height = 2200;
  
  var cluster = d3.layout.cluster()
      .size([height, width - 160]);
  
  var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.y, d.x]; });
  
 var vis = d3.select("#chart").append("svg")
     .attr("width", width)
     .attr("height", height)
   .append("g")
     .attr("transform", "translate(40, 0)");
 

   var nodes = cluster.nodes(treeData);
 
   var link = vis.selectAll("path.link")
       .data(cluster.links(nodes))
     .enter().append("path")
       .attr("class", "link")
       .attr("d", diagonal);
 
   var node = vis.selectAll("g.node")
       .data(nodes)
     .enter().append("g")
       .attr("class", "node")
       .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

   node.append("circle")
       .attr("r", 4.5);
 
   node.append("text")
       .attr("dx", function(d) { return d.children ? -8 : 8; })
       .attr("dy", 3)
       .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
       .text(function(d) { return d.name; });
 
</script>

</body>
</html>