Old school D3 from simpler times

All examples By author By category About

jwilber

Full window Github gist

multiple waffles

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            },
            {
              "name": "CKD",
              "value": 3.21,
              "color": "#2F9599",
            },
            {
              "name": "CHD",
              "value": 2.57,
              "color": "#E8175D",
            },
            {
              "name": "Diabetes",
              "value": 11.92,
              "color": "#474747",
            },
            {
              "name": "Stroke",
              "value": 1.18,
              "color": "#CC527A",
            }
          ]
        },
        {
        "name": "Leeds",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.52,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.29,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.71,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.82,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Liverpool",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 5.90,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.71,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.70,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.88,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Manchester",
        "children": [
          {
            "name": "Cancer",
            "value": 1.78,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 2.95,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.61,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.05,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Sheffield",
        "children": [
          {
            "name": "Cancer",
            "value": 2.54,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 4.57,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.85,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.08,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
    ]
  },
  {
    "name": "South England",
    "children": [
      {
        "name": "Brighton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Bristol",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Luton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Milton Keynes",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color":"#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Southampton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      ]
    }
  ]
};

var treemapLayout = d3.treemap()
  .size([1000, 600])
  .paddingTop(20)
  .paddingInner(2);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

nodes
    .append('rect')
    .attr('width', function(d) { return d.x1 - d.x0; })
    .attr('height', function(d) { return d.y1 - d.y0; })
    .attr('opacity', function(d) { return 0.8 /* has to be like d.value / max or so */ })
    .attr('fill', function(d) { if (d.data.color) {
                                  return d.data.color
                                } else {
                                  return "white"
                                }})
  nodes
    .append('text')
    .attr('dx', 10)
    .attr('dy', 8)
		.text(function(d) {
      return d.data.value;
  });

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js