Zoomable Icicle (d3 v4)

Click anywhere to zoom in, or click on the top bar to zoom out.

Converting Bostock's classic to d3 v4. You may find the diff helpful in understanding the d3-hierarchy api changes! Note that I didn't touch the json.

forked from tophtucker's block: Zoomable Icicle (d3 v4)

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

rect {
  stroke: #fff;
}

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

var width = 960,
    height = 500;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([0, height]);

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

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var rect = svg.selectAll("rect");

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

root = d3.hierarchy(d3.entries(root)[0], function(d) {
      return d3.entries(d.value)
    })
    .sum(function(d) { return d.value })
    .sort(function(a, b) { return b.value - a.value; });

partition(root);

rect = 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; })
      .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
      .on("click", clicked);
});

function clicked(d) {
  x.domain([d.x0, d.x1]);
  y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);

rect.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x0); })
      .attr("y", function(d) { return y(d.y0); })
      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
      .attr("height", function(d) { return y(d.y1) - y(d.y0); });
}

</script>

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