D3 Source Treemap

D3 v4 size in 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.

forked from mbostock's block: D3 Source Treemap

<!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.2.1",
  "d3-axis": "1.0.8",
  "d3-brush": "1.0.4",
  "d3-chord": "1.0.4",
  "d3-collection": "1.0.4",
  "d3-color": "1.0.3",
  "d3-dispatch": "1.0.3",
  "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