D3 Dendrogram

by Serhii Matrunchyk

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.js"></script>
<body>
    <div id="chart"></div>
</body>

CSS

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node circle {
opacity: .5;    
}
.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

path.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var data = {
  "name": "flare",
  "children": [{
      "name": "analytics",
      "children": [{
          "name": "cluster",
          "children": [{
              "name": "AgglomerativeCluster",
              "size": 3938
            },
            {
              "name": "CommunityStructure",
              "size": 3812
            },
            {
              "name": "HierarchicalCluster",
              "size": 6714
            },
            {
              "name": "MergeEdge",
              "size": 743
            }
          ]
        },
        {
          "name": "graph",
          "children": [{
              "name": "BetweennessCentrality",
              "size": 3534
            },
            {
              "name": "LinkDistance",
              "size": 5731
            },
            {
              "name": "MaxFlowMinCut",
              "size": 7840
            },
            {
              "name": "ShortestPaths",
              "size": 5914
            },
            {
              "name": "SpanningTree",
              "size": 3416
            }
          ]
        },
        {
          "name": "optimization",
          "children": [{
            "name": "AspectRatioBanker",
            "size": 7074
          }]
        }
      ]
    },
    {
      "name": "animate",
      "children": [{
          "name": "Easing",
          "size": 17010
        },
        {
          "name": "FunctionSequence",
          "size": 5842
        },
        {
          "name": "interpolate",
          "children": [{
              "name": "ArrayInterpolator",
              "size": 1983
            },
            {
              "name": "ColorInterpolator",
              "size": 2047
            },
            {
              "name": "DateInterpolator",
              "size": 1375
            },
            {
              "name": "Interpolator",
              "size": 8746
            },
            {
              "name": "MatrixInterpolator",
              "size":...