d3:tree-map

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

CSS

body {
  font: 10px sans-serif;
  position: relative;
}

.node {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

.node-label {
  padding: 4px;
  line-height: 1em;
  white-space: pre;
}

.node-value {
  color: rgba(0,0,0,0.8);
  font-size: 9px;
  margin-top: 1px;
}

JavaScript

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