Built with blockbuilder.org
xxxxxxxxxx<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