D3 Dendrogram

by Joseph Tate

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": 2202},
 ...