D3 - Tree Layout

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<div id="search"></div>

<div class="tree-diagram"></div>

CSS

.node {
		cursor: pointer;
	}

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

	.node text {
	  font: 12px sans-serif;
	}

	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}
  
  /*Just to ensure the select2 box is "glued" to the top*/
.search {
	width: 400px;
}
#search {
	width: 400px;
}

JavaScript

var treeData = {
  "name": "Program",
  "column_to_sort_by": null,
  "type": "program",
  "children": [{
    "name": "ProgramGroup1",
    "column_to_sort_by": null,
    "type": "program_group",
    "children": [{
      "name": "POGroup1",
      "column_to_sort_by": null,
      "type": "1program_outcome_group",
      "children": [{
        "name": "PO1",
        "column_to_sort_by": null,
        "type": "program_outcome",
        "children": [{
          "name": "Unit1",
          "column_to_sort_by": "Unit1",
          "children": [{
            "name": "UG1-LE",
            "column_to_sort_by": null,
            "type": "unit_group",
            "children": [{
              "name": "LE1",
              "column_to_sort_by": "LE1",
              "type": "learning_event"
            }, {
              "name": "LE10",
              "column_to_sort_by": "LE10",
              "type": "learning_event"
            }, {
              "name": "LE11",
              "column_to_sort_by": "LE11",
              "type": "learning_event"
            }, {
              "name": "LE12",
              "column_to_sort_by": "LE12",
              "type": "learning_event"
            }, {
              "name": "LE13",
              "column_to_sort_by": "LE13",
              "type": "learning_event"
            }, {
              "name": "LE14",
              "column_to_sort_by": "LE14",
              "type": "learning_event"
            }, {
              "name": "LE15",
              "column_to_sort_by": "LE15",
              "type": "learning_event"
            }, {
              "name": "LE2",
              "column_to_sort_by": "LE2",
              "type": "learning_event"
            }, {
              "name": "LE4",
              "column_to_sort_by": "LE4",
              "type": "learning_event"
            }, {
              "name": "LE5",
              "column_to_sort_by": "LE5",
              "type": "learning_event"
            }, {
              "name": "LE6",
             ...