treemap example

forked from cramhead's block: tree example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
   	rect {
      fill: cadetblue;
      opacity: 0.3;
      stroke: white;
    }
    text {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      fill: white;
      font-size: 10px;
    }
  </style>
</head>

<body>
  <script>
 
    var width = 960, height = 500;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var chart = svg.append("g")
    var getFirstChildren = function getFirstChildren(d) {
 		 return d.assets.map(function (a) {
        name: a.name;
        size: a.size;
      });
    };
    var buildRoot = function buildRoot(data) {
      var app = {
        name: "app"
      };
      app.children = getFirstChildren(data);
      return app;
    };
		d3.json("stats.json", function(err, data){
    	var root = d3.hierarchy(data);
      root.sum(function(d){
        return d.value;
      });
      
			var treemap = d3.treemap();
      treemap.size([400, 200])
        .paddingTop(20)
  			.paddingInner(2);
      treemap.tile(d3.treemapSliceDice)

treemap(root);
      
      d3.select('svg g')
      .selectAll('rect')
      .data(root.descendants())
      .enter()
      .append('rect')
      .attr('x', function(d) { return d.x0; })
      .attr('y', function(d) { return d.y0; })
      .attr('width', function(d) { return d.x1 - d.x0; })
      .attr('height', function(d) { return d.y1 - d.y0; })
      
      var nodes = d3.select('svg g')
      .selectAll('g')
      .data(root.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; })

nodes
        .append('text')
        .attr('dx', 4)
        .attr('dy', 14)
        .text(function(d) {
          return d.data.name;
    		})
    })

</script>
</body>

https://d3js.org/d3.v4.min.js