D3 Examples - Treemap

xxxxxxxxxx
 
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet"> 
<style>
​
​
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 50px;
}
  
   .d3-tip {
      line-height: 1;
      padding: 6px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }
 
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }
 
    /* Style northward tooltips specifically */
    .d3-tip.n:after {
      margin: -2px 0 0 0;
      top: 100%;
      left: 0;
    }
​
</style>
<h1>First names of all MPs elected since 1935</h1>
<svg></svg>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>
var tip = d3.tip().attr("class", "d3-tip").html(function(d) { return `${d.data.name}: ${d.value}`; })
​
var svg = d3.select("svg"),
    width = +window.innerWidth - 100,
    height = +window.innerHeight - 100;
  
d3.select("svg").attr("width", width).attr("height", height)
​
svg.call(tip)
​
var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
    color = d3.scaleOrdinal(d3.schemeCategory10.map(fader)),
    format = d3.format(",d");
​
var treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([width, height])
    .round(true)
    .paddingInner(1);
  
​
d3.json("flare.json", function(error, data) {
  if (error) throw error;
​
  var root = d3.hierarchy(data)
      .eachBefore(function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
      .sum(sumBySize)
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });
​
  treemap(root);
  
var concat_data = data["children"][0]["children"].concat(data["children"][1]["children"])
​
  var cell = svg.selectAll("g")
    .data(root.leaves())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
​
  cell.append("rect")
      .attr("id", function(d) { return d.data.id; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("fill", function(d) { return color(d.parent.data.id); })
        .on("mouseover", function(d) {
    d3.select(this).attr("opacity", 0.8);
    tip.show(d);
  })
        .on("mouseout", function(d) {
    d3.select(this).attr("opacity", 1);
    tip.hide;
  });
​
  cell.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.data.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#" + d.data.id; });
​
  cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
    .enter().append("tspan")
      .attr("x", 4)
      .attr("y", function(d, i) { return 20 + i * 10; })
      .text(function(d) { return d; })
  .style("pointer-events", "none");
  
  cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
    .enter().append("tspan")
      .attr("x", 4)
      .attr("y", function(d, i) { return 40 + i * 10; })
      .text(function(d) { return concat_data.filter(function(a) { return a.name == d })[0].size; })
  .style("pointer-events", "none");
  
​
});
​
function sumByCount(d) {
  return d.children ? 0 : 1;
}
​
function sumBySize(d) {
  return d.size;
}
​
</script>
​
    