D3 Examples - Tree Map

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
​
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 800px;
  margin-top: 10px;
}
​
form {
  position: absolute;
  right: 10px;
  top: 10px;
}
​
.node {
  border: solid 3px white;
  color: white;
  line-height: 19px;
  overflow: hidden;
  position: absolute;
  text-indent: 5px;
}
​
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 800 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
​
// var color = d3.scale.category10();
var color = d3.scale.ordinal()
    .domain(d3.range(3))
    .range(["#013986","#FF2718","#7A7A7A"]);
​
var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.size; });
​
var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
​
d3.json("flare.json", function(error, root) {
  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
      .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; });
      
    node.append("text")
      .text(function(d) { return d.children ? null : d.name; })
        .style("font-size",function(d) { return d.children ? null : d.size; });
​
​
  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };
​
    node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});
​
function position() {
  this.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"; });
}
​
</script>
​
</body>
</html>
    