d3 cluster

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var width = 360,
    height = 360;

var cluster = d3.layout.cluster()
    .nodeSize([1, 100])
    .separation(function(a,b){
    	return 20 + d3.sum([a,b].map(function(d){
      	return d.status=="D" ? 70 : 0;
      }))
    });

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,200)");

var root = {    
     "name": "cs4001",
     "children": [
      {
       "name": "cs3212",
       "children": [
        {
         "name": "cs2121",
         "status": "D"
        }]
      },
         {
             "name": "cp2121",
             "status": "D"
         },
         {
             "name": "cp21214"
         },
         {
             "name": "cp21215"
         }
         
     ]
};

(function(root) {
  var nodes = cluster.nodes(root),
      links = cluster.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", function(d) {return d.status=="D" ? 70: null} );

  node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; });
})(root);

d3.select(self.frameElement).style("height", height + "px");