Treemap 4.0

forked from mbostock's block: Treemap 4.0 and all praise, credit, and attribution belongs there. This fork simply adds a select box to demonstrate the new tile methods of d3_hierarchy.

forked from timelyportfolio's block: Treemap 4.0

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

text {
  font: 10px sans-serif;
}

tspan:last-child {
  font-size: 9px;
  fill-opacity: 0.8;
}

rect {
  fill-opacity: 0.6;
}

</style>

<select name="select" id="tile-selector" style="display:block;">
 		<option value="Split">Split</option>
    <option value="Squarify" selected>Squarify</option> 
    <option value="Slice">Slice</option>
    <option value="Dice">Dice</option>
    <option value="SliceDice">SliceDice</option>
    <option value="Binary">Binary</option>
</select>

var format = d3.format(",d");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var treemap = d3.treemap()
    .size([width, height])
    .round(true)
    .padding(1);

d3.csv("flare.csv", function(error, data) {
  if (error) throw error;
  
  data = d3.stratify()
      .parentId(function(d) { var i = d.id.lastIndexOf("."); return i >= 0 ? d.id.slice(0, i) : null; })
  		.id(function(d) { return d.id; })(data)
  		.sum(function(d) {return d.value ? 1 : 0;});

draw();
 
 
function draw(){
  var tile_selector = d3.select("#tile-selector").node();
  //https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
  var t0 = performance.now();
  treemap.tile(
    d3["treemap" + (tile_selector.options[tile_selector.selectedIndex].value ? tile_selector.options[tile_selector.selectedIndex].value : "Squarify")]
  );
  var t1 = performance.now();
  d3.select("#speed-result")
    .text("treemap" + (tile_selector.options[tile_selector.selectedIndex].value ? tile_selector.options[tile_selector.selectedIndex].value : "Squarify") + " took " + (t1 - t0) + " milliseconds.")
    
  var cell = svg.selectAll("g")
      .data(treemap(data).leaves());

cell = cell.enter().append("g").merge(cell);

cell
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });

cell.selectAll("*").remove();
  cell.append("rect")
        .attr("id", function(d) { return "rect-" + d.id; })
        .attr("width", function(d) { return d.x1 - d.x0; })
        .attr("height", function(d) { return d.y1 - d.y0; })
        .style("fill", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); });

cell.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#rect-" + d.id + ""; });
  cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.id.split(".").pop().split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)); })
    .enter().append("tspan")
      .attr("x", 4)
      .attr("y", function(d, i) { return 13 + i * 10; })
      .text(function(d) { return d; });
  cell.append("title")
      .text(function(d) { return d.id + "\n" + format(d.value); });

}

d3.select("#tile-selector").on("change",draw);
});

</script>

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