D3 Source Treemap

This treemap shows the file size in bytes of D3 4.4.0’s source code. Click on any cell to view the corresponding source.

<!DOCTYPE html>
<style>

svg {
  font: 10px sans-serif;
}

a:hover tspan:first-child {
  text-decoration: underline;
}

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

</style>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

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

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

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

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

var version = {
  "d3-array": "1.0.2",
  "d3-axis": "1.0.4",
  "d3-brush": "1.0.3",
  "d3-chord": "1.0.3",
  "d3-collection": "1.0.2",
  "d3-color": "1.0.2",
  "d3-dispatch": "1.0.2",
  "d3-drag": "1.0.2",
  "d3-dsv": "1.0.3",
  "d3-ease": "1.0.2",
  "d3-force": "1.0.4",
  "d3-format": "1.0.2",
  "d3-geo": "1.4.0",
  "d3-hierarchy": "1.0.3",
  "d3-interpolate": "1.1.2",
  "d3-path": "1.0.3",
  "d3-polygon": "1.0.2",
  "d3-quadtree": "1.0.2",
  "d3-queue": "3.0.3",
  "d3-random": "1.0.2",
  "d3-request": "1.0.3",
  "d3-scale": "1.0.4",
  "d3-selection": "1.0.3",
  "d3-shape": "1.0.4",
  "d3-time": "1.0.4",
  "d3-time-format": "2.0.3",
  "d3-timer": "1.0.3",
  "d3-transition": "1.0.3",
  "d3-voronoi": "1.1.0",
  "d3-zoom": "1.1.0"
};

d3.csv("d3.csv", function(d) {
  d.size = +d.size;
  return d;
}, function(error, data) {
  if (error) throw error;

treemap(root);

var cell = svg.selectAll("a")
    .data(root.leaves())
    .enter().append("a")
      .attr("target", "_blank")
      .attr("xlink:href", function(d) { var p = d.data.path.split("/"); return "https://github.com/" + p.slice(0, 2).join("/") + "/blob/v" + version[p[1]] + "/src/" + p.slice(2).join("/"); })
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });

cell.append("rect")
      .attr("id", function(d) { return d.id; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("fill", function(d) { var a = d.ancestors(); return color(a[a.length - 2].id); });

cell.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#" + d.id; });

var label = cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; });

label.append("tspan")
      .attr("x", 4)
      .attr("y", 13)
      .text(function(d) { return d.data.path.substring(d.data.path.lastIndexOf("/") + 1, d.data.path.lastIndexOf(".")); });

label.append("tspan")
      .attr("x", 4)
      .attr("y", 25)
      .text(function(d) { return format(d.value); });

cell.append("title")
      .text(function(d) { return d.id + "\n" + format(d.value); });
});

</script>

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