Treemap Padding

forked from mbostock's block: Treemap Padding

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .padding(4)
    .value(function(d) { return d.size; });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", width + "px")
    .style("height", height + "px");

d3.json("flare.json", function(error, root) {
  if (error) throw error;

div.selectAll(".node")
      .data(treemap.nodes(root))
    .enter().append("div")
      .attr("class", "node")
      .style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .text(function(d) { return d.children ? null : d.name; });
});

</script>

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