syntagmatic · October 12, 2015 21:58
diff --git a/README.md b/README.md
diff --git a/burrow.js b/burrow.js
 // nest rows with keys array, requires Underscore.js
 function burrow(table) {
  // create simple nested object
  var obj = {};
  _(table).each(function(d) {
    var _obj = obj;
    _(d.keys.slice(1)).each(function(key,depth) {
      _obj[key] = _obj[key] || {}
      _obj = _obj[key];
    });
  });

  // recursively create children array
  function descend(obj) {
    var arr = [];
    _(obj).each(function(v,k) {
      var b = {
        name: k,
        children: descend(v)
      };
      arr.push(b);
    });
    return arr;
  };
  
  // nested object
  return {
    name: table[0].keys[0],
    maxDepth: _(table).chain().pluck("keys").pluck("length").max().value(),
    children: descend(obj)
  };
 };
diff --git a/d3.v1.tsv b/d3.v1.tsv
diff --git a/d3.v2.tsv b/d3.v2.tsv
diff --git a/d3.v3.tsv b/d3.v3.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <title></title>
 <meta charset="utf-8">
 <script src="http://d3js.org/d3.v2.js"></script>
 <script src="http://underscorejs.org/underscore.js"></script>
 <script src="burrow.js"></script>

 <style>

 .node circle {
  fill: steelblue;
  stroke-width: 1.5px;
  stroke: #fff;
 }

 .node {
  font: 10px sans-serif;
 }

 .link {
  fill: none;
  stroke: #ccc;
  stroke-opacity: 0.6;
  stroke-width: 1.5px;
 }

 </style>
 <body>
 </body>
 <script>
 /* Reingold-Tilford Tree */

 var diameter = 960;
 var padding = 210;

 var tree = d3.layout.tree()
    .size([360, diameter / 2 - padding])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

 var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

 var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

 d3.selection.prototype.moveToFront = function() {
  return this.each(function() {
    this.parentNode.appendChild(this);
  });
 };

 d3.tsv("d3.v1.tsv", function(files) {
  var nested1 = processData(files);
  svg.append("text")
    .attr("id", "version")
    .text("v1.29.7")
    .attr("x", -diameter*0.4)
    .attr("y", -diameter*0.4)
    .style("font-size", "32px");
  treemap(nested1);
  d3.tsv("d3.v2.tsv", function(files) {
    var nested2 = processData(files);
    function update2() {
      svg.select("#version")
        .transition().duration(500)
        .style("opacity", 0)
        .transition().delay(500)
        .text("2.10.3")
        .transition()
        .style("opacity", 1)
      treemap(nested2);
    };
    setTimeout(update2, 5200);
    d3.tsv("d3.v3.tsv", function(files2) {
      var nested3 = processData(files2);
      function update3() {
        svg.select("#version")
        .transition().duration(500)
        .style("opacity", 0)
        .transition().delay(500)
        .text("3.0.0pre")
        .transition()
        .style("opacity", 1)
        treemap(nested3);
      };
      setTimeout(update3, 11800);
    });
  });
 });

 function processData(files) {
  files.forEach(function(d) {
    d.size = parseInt(d.size);
    d.keys = d.file.replace(".js","").split("/");
    d.keys.forEach(function(sect,i) {
      d["section" + i] = sect;
    });
  });

  return burrow(files);
 }

 function treemap(root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
    .data(links, function(d) { return d.source.name + "-" + d.target.name;})

  link
    .transition()
      .delay(400)
      .duration(600)
      .attr("d", diagonal);

  link
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal)
      .style("opacity", 0)
      .transition()
      .duration(300)
      .delay(function(d,i) {
        return 24*i;
      })
      .style("opacity", 1);

  link.exit()
    .transition()
      .duration(400)
      .style("opacity", 0)
      .delay(400)
      .remove();

  var node = svg.selectAll(".node")
      .moveToFront()
      .data(nodes, function(d) { return d.name + "-" + (d.parent ? d.parent.name : "root");})

   node.exit()
    .transition()
      .duration(400)
      .style("opacity", 0)
      .delay(400)
      .remove();

  node
    .transition()
      .delay(400)
      .duration(800)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  node.selectAll("text")
    .transition()
      .duration(800)
      .attr("font-weight", null)
      .attr("fill", "#555")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });

  var g = node
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  g.append("circle")
    .attr("r", 3)
    .style("opacity", 0)
    .transition()
      .duration(300)
      .delay(function(d,i) {
        return 24*i;
      })
      .style("opacity", 1);

  g.append("text")
    .attr("dy", ".31em")
    .attr("font-weight", "bold")
    .attr("fill", "black")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
    .text(function(d) { return d.name; })
    .style("opacity", 0)
    .transition()
      .duration(300)
      .delay(function(d,i) {
        return 24*i;
      })
      .style("opacity", 1);

 };

 d3.select(self.frameElement).style("height", diameter + "px");
 </script>
diff --git a/thumbnail.png b/thumbnail.png
	// nest rows with keys array, requires Underscore.js
	function burrow(table) {
	// create simple nested object
	var obj = {};
	_(table).each(function(d) {
	var _obj = obj;
	_(d.keys.slice(1)).each(function(key,depth) {
	_obj[key] = _obj[key] \|\| {}
	_obj = _obj[key];
	});
	});

	// recursively create children array
	function descend(obj) {
	var arr = [];
	_(obj).each(function(v,k) {
	var b = {
	name: k,
	children: descend(v)
	};
	arr.push(b);
	});
	return arr;
	};

	// nested object
	return {
	name: table[0].keys[0],
	maxDepth: _(table).chain().pluck("keys").pluck("length").max().value(),
	children: descend(obj)
	};
	};
	size	file
	4	src/core/xhr.js
	4	src/core/collapse.js
	4	src/core/max.js
	8	src/core/rgb.js
	4	src/core/requote.js
	4	src/core/uninterpolate.js
	4	src/core/last.js
	20	src/core/selection.js
	4	src/core/functor.js
	8	src/core/transition.js
	4	src/core/dispatch.js
	4	src/core/ns.js
	4	src/core/timer.js
	4	src/core/rebind.js
	4	src/core/array.js
	4	src/core/descending.js
	4	src/core/permute.js
	4	src/core/zip.js
	4	src/core/merge.js
	4	src/core/keys.js
	4	src/core/event.js
	4	src/core/ease.js
	4	src/core/format.js
	4	src/core/text.js
	4	src/core/split.js
	4	src/core/html.js
	4	src/core/object.js
	4	src/core/ascending.js
	4	src/core/bisect.js
	4	src/core/range.js
	4	src/core/entries.js
	4	src/core/round.js
	4	src/core/noop.js
	4	src/core/sum.js
	4	src/core/first.js
	4	src/core/values.js
	4	src/core/date.js
	4	src/core/quantile.js
	4	src/core/json.js
	4	src/core/call.js
	8	src/core/interpolate.js
	4	src/core/min.js
	4	src/core/xml.js
	4	src/core/hsl.js
	4	src/core/nest.js
	4	src/core/core.js
	216	src/core
	12	src/chart/box.js
	4	src/chart/chart.js
	8	src/chart/qq.js
	8	src/chart/bullet.js
	8	src/chart/horizon.js
	44	src/chart
	4	src/time/months.js
	4	src/time/scale-utc.js
	4	src/time/format-utc.js
	4	src/time/hour.js
	4	src/time/year.js
	4	src/time/days.js
	4	src/time/week.js
	4	src/time/seconds.js
	4	src/time/time.js
	4	src/time/hours.js
	4	src/time/month.js
	4	src/time/second.js
	4	src/time/minute.js
	4	src/time/day.js
	12	src/time/format.js
	4	src/time/format-iso.js
	4	src/time/weeks.js
	4	src/time/range.js
	4	src/time/years.js
	4	src/time/scale.js
	4	src/time/minutes.js
	96	src/time
	4	src/externs.js
	4	src/behavior/behavior.js
	8	src/behavior/zoom.js
	16	src/behavior
	4	src/scale/ordinal.js
	4	src/scale/sqrt.js
	4	src/scale/category.js
	4	src/scale/log.js
	4	src/scale/bilinear.js
	4	src/scale/linear.js
	4	src/scale/polylinear.js
	4	src/scale/quantize.js
	4	src/scale/nice.js
	4	src/scale/pow.js
	4	src/scale/quantile.js
	4	src/scale/scale.js
	52	src/scale
	4	src/geo/mercator.js
	4	src/geo/albers.js
	4	src/geo/azimuthal.js
	4	src/geo/bounds.js
	8	src/geo/path.js
	4	src/geo/geo.js
	32	src/geo
	4	src/end.js
	4	src/layout/histogram.js
	4	src/layout/chord.js
	8	src/layout/tree.js
	4	src/layout/hierarchy.js
	4	src/layout/cluster.js
	4	src/layout/layout.js
	4	src/layout/bundle.js
	8	src/layout/treemap.js
	8	src/layout/stack.js
	8	src/layout/pack.js
	12	src/layout/force.js
	4	src/layout/pie.js
	4	src/layout/partition.js
	80	src/layout
	4	src/svg/chord.js
	4	src/svg/diagonal.js
	4	src/svg/area-radial.js
	4	src/svg/mouse.js
	4	src/svg/diagonal-radial.js
	4	src/svg/area.js
	4	src/svg/line-radial.js
	4	src/svg/symbol.js
	4	src/svg/svg.js
	4	src/svg/touches.js
	12	src/svg/line.js
	4	src/svg/arc.js
	60	src/svg
	4	src/csv/csv.js
	4	src/csv/parse.js
	4	src/csv/format.js
	16	src/csv
	12	src/geom/voronoi.js
	4	src/geom/delaunay.js
	4	src/geom/polygon.js
	4	src/geom/contour.js
	4	src/geom/quadtree.js
	4	src/geom/geom.js
	4	src/geom/hull.js
	40	src/geom
	4	src/start.js
	668	src
	<!DOCTYPE html>
	<title></title>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v2.js"></script>
	<script src="http://underscorejs.org/underscore.js"></script>
	<script src="burrow.js"></script>

	<style>

	.node circle {
	fill: steelblue;
	stroke-width: 1.5px;
	stroke: #fff;
	}

	.node {
	font: 10px sans-serif;
	}

	.link {
	fill: none;
	stroke: #ccc;
	stroke-opacity: 0.6;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	</body>
	<script>
	/* Reingold-Tilford Tree */

	var diameter = 960;
	var padding = 210;

	var tree = d3.layout.tree()
	.size([360, diameter / 2 - padding])
	.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

	var diagonal = d3.svg.diagonal.radial()
	.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

	var svg = d3.select("body").append("svg")
	.attr("width", diameter)
	.attr("height", diameter)
	.append("g")
	.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

	d3.selection.prototype.moveToFront = function() {
	return this.each(function() {
	this.parentNode.appendChild(this);
	});
	};

	d3.tsv("d3.v1.tsv", function(files) {
	var nested1 = processData(files);
	svg.append("text")
	.attr("id", "version")
	.text("v1.29.7")
	.attr("x", -diameter*0.4)
	.attr("y", -diameter*0.4)
	.style("font-size", "32px");
	treemap(nested1);
	d3.tsv("d3.v2.tsv", function(files) {
	var nested2 = processData(files);
	function update2() {
	svg.select("#version")
	.transition().duration(500)
	.style("opacity", 0)
	.transition().delay(500)
	.text("2.10.3")
	.transition()
	.style("opacity", 1)
	treemap(nested2);
	};
	setTimeout(update2, 5200);
	d3.tsv("d3.v3.tsv", function(files2) {
	var nested3 = processData(files2);
	function update3() {
	svg.select("#version")
	.transition().duration(500)
	.style("opacity", 0)
	.transition().delay(500)
	.text("3.0.0pre")
	.transition()
	.style("opacity", 1)
	treemap(nested3);
	};
	setTimeout(update3, 11800);
	});
	});
	});

	function processData(files) {
	files.forEach(function(d) {
	d.size = parseInt(d.size);
	d.keys = d.file.replace(".js","").split("/");
	d.keys.forEach(function(sect,i) {
	d["section" + i] = sect;
	});
	});

	return burrow(files);
	}

	function treemap(root) {
	var nodes = tree.nodes(root),
	links = tree.links(nodes);

	var link = svg.selectAll(".link")
	.data(links, function(d) { return d.source.name + "-" + d.target.name;})

	link
	.transition()
	.delay(400)
	.duration(600)
	.attr("d", diagonal);

	link
	.enter().append("path")
	.attr("class", "link")
	.attr("d", diagonal)
	.style("opacity", 0)
	.transition()
	.duration(300)
	.delay(function(d,i) {
	return 24*i;
	})
	.style("opacity", 1);

	link.exit()
	.transition()
	.duration(400)
	.style("opacity", 0)
	.delay(400)
	.remove();

	var node = svg.selectAll(".node")
	.moveToFront()
	.data(nodes, function(d) { return d.name + "-" + (d.parent ? d.parent.name : "root");})

	node.exit()
	.transition()
	.duration(400)
	.style("opacity", 0)
	.delay(400)
	.remove();

	node
	.transition()
	.delay(400)
	.duration(800)
	.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

	node.selectAll("text")
	.transition()
	.duration(800)
	.attr("font-weight", null)
	.attr("fill", "#555")
	.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
	.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
	.text(function(d) { return d.name; });

	var g = node
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

	g.append("circle")
	.attr("r", 3)
	.style("opacity", 0)
	.transition()
	.duration(300)
	.delay(function(d,i) {
	return 24*i;
	})
	.style("opacity", 1);

	g.append("text")
	.attr("dy", ".31em")
	.attr("font-weight", "bold")
	.attr("fill", "black")
	.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
	.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
	.text(function(d) { return d.name; })
	.style("opacity", 0)
	.transition()
	.duration(300)
	.delay(function(d,i) {
	return 24*i;
	})
	.style("opacity", 1);

	};

	d3.select(self.frameElement).style("height", diameter + "px");
	</script>