block by renecnielsen 02dde03ccff6748520e1

d3 src tree transitions

Full Screen

A comparison of the src directory for three versions of d3. Also see d3 src tree.

forked from syntagmatic‘s block: d3 src tree transitions

index.html

<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<script src="//d3js.org/d3.v2.js"></script>
<script src="//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>

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)
  };
};

d3.v1.tsv

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

d3.v2.tsv

size	file
4	src/core/xhr.js
4	src/core/number.js
4	src/core/xyz.js
4	src/core/collapse.js
4	src/core/max.js
4	src/core/selection-style.js
4	src/core/transition-text.js
4	src/core/mouse.js
8	src/core/rgb.js
4	src/core/selection-datum.js
4	src/core/selection-enter-select.js
4	src/core/median.js
4	src/core/requote.js
4	src/core/uninterpolate.js
4	src/core/transition-selectAll.js
4	src/core/hcl.js
4	src/core/selection-empty.js
4	src/core/last.js
4	src/core/selection.js
4	src/core/functor.js
4	src/core/identity.js
4	src/core/transition.js
4	src/core/dispatch.js
4	src/core/selection-text.js
4	src/core/ns.js
4	src/core/timer.js
4	src/core/transition-remove.js
4	src/core/selection-append.js
4	src/core/rebind.js
4	src/core/class.js
4	src/core/array.js
4	src/core/transition-filter.js
4	src/core/mean.js
4	src/core/descending.js
4	src/core/selection-order.js
4	src/core/selection-node.js
4	src/core/selection-remove.js
4	src/core/selection-selectAll.js
4	src/core/selection-each.js
4	src/core/permute.js
4	src/core/transition-style.js
4	src/core/zip.js
4	src/core/merge.js
4	src/core/random.js
4	src/core/true.js
4	src/core/transition-each.js
4	src/core/keys.js
4	src/core/selection-attr.js
4	src/core/extent.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/selection-select.js
4	src/core/this.js
4	src/core/transition-select.js
4	src/core/touches.js
4	src/core/ascending.js
4	src/core/transition-duration.js
4	src/core/map.js
4	src/core/transpose.js
4	src/core/selection-on.js
4	src/core/selection-root.js
4	src/core/bisect.js
4	src/core/selection-insert.js
4	src/core/range.js
4	src/core/selection-data.js
4	src/core/selection-filter.js
4	src/core/entries.js
4	src/core/round.js
4	src/core/noop.js
4	src/core/selection-enter.js
4	src/core/transition-delay.js
4	src/core/selection-sort.js
4	src/core/sum.js
4	src/core/formatPrefix.js
4	src/core/first.js
4	src/core/selection-transition.js
4	src/core/values.js
4	src/core/lab.js
4	src/core/selection-property.js
4	src/core/transition-transition.js
4	src/core/transition-attr.js
4	src/core/tween.js
4	src/core/quantile.js
4	src/core/selection-html.js
4	src/core/json.js
4	src/core/color.js
8	src/core/interpolate.js
4	src/core/min.js
4	src/core/xml.js
4	src/core/hsl.js
4	src/core/selection-call.js
4	src/core/selection-classed.js
4	src/core/transform.js
4	src/core/nest.js
4	src/core/core.js
408	src/core
4	src/component.js
4	src/package.js
4	src/time/scale-utc.js
4	src/time/format-utc.js
4	src/time/interval.js
4	src/time/hour.js
4	src/time/year.js
4	src/time/week.js
4	src/time/format-fr_FR.js
4	src/time/time.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/format-en_GB.js
4	src/time/scale.js
4	src/time/format-ru_RU.js
4	src/time/format-en_US.js
84	src/time
4	src/dsv/csv.js
4	src/dsv/tsv.js
4	src/dsv/dsv.js
16	src/dsv
4	src/behavior/behavior.js
8	src/behavior/zoom.js
4	src/behavior/drag.js
20	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/threshold.js
4	src/scale/bilinear.js
4	src/scale/identity.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
60	src/scale
4	src/geo/greatCircle.js
4	src/geo/mercator.js
4	src/geo/albers.js
4	src/geo/greatArc.js
4	src/geo/circle.js
4	src/geo/azimuthal.js
4	src/geo/equirectangular.js
4	src/geo/type.js
4	src/geo/bounds.js
4	src/geo/bonne.js
8	src/geo/path.js
4	src/geo/geo.js
56	src/geo
4	src/end.js
4	src/compat/style.js
4	src/compat/date.js
12	src/compat
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
12	src/svg/brush.js
4	src/svg/svg.js
4	src/svg/touches.js
12	src/svg/line.js
4	src/svg/arc.js
8	src/svg/axis.js
80	src/svg
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
876	src

d3.v3.tsv

size	file
4	src/core/xhr.js
4	src/core/number.js
4	src/core/xyz.js
4	src/core/collapse.js
4	src/core/max.js
4	src/core/selection-style.js
4	src/core/transition-text.js
4	src/core/mouse.js
8	src/core/rgb.js
4	src/core/selection-datum.js
4	src/core/selection-enter-select.js
4	src/core/median.js
4	src/core/requote.js
4	src/core/uninterpolate.js
4	src/core/transition-selectAll.js
4	src/core/hcl.js
4	src/core/selection-empty.js
4	src/core/selection.js
4	src/core/functor.js
4	src/core/identity.js
4	src/core/transition.js
4	src/core/dispatch.js
4	src/core/selection-text.js
4	src/core/transition-tween.js
4	src/core/ns.js
4	src/core/timer.js
4	src/core/transition-remove.js
4	src/core/selection-append.js
4	src/core/rebind.js
4	src/core/class.js
4	src/core/array.js
4	src/core/transition-filter.js
4	src/core/mean.js
4	src/core/descending.js
4	src/core/selection-order.js
4	src/core/selection-node.js
4	src/core/selection-remove.js
4	src/core/selection-selectAll.js
4	src/core/selection-each.js
4	src/core/permute.js
4	src/core/transition-style.js
4	src/core/zip.js
4	src/core/merge.js
4	src/core/random.js
4	src/core/true.js
4	src/core/transition-each.js
4	src/core/keys.js
4	src/core/selection-attr.js
4	src/core/extent.js
4	src/core/event.js
4	src/core/format-locale.js
4	src/core/ease.js
8	src/core/format.js
4	src/core/transition-ease.js
4	src/core/text.js
4	src/core/html.js
4	src/core/selection-select.js
4	src/core/transition-select.js
4	src/core/touches.js
4	src/core/ascending.js
4	src/core/transition-duration.js
4	src/core/map.js
4	src/core/transpose.js
4	src/core/selection-on.js
4	src/core/selection-root.js
4	src/core/bisect.js
4	src/core/selection-insert.js
4	src/core/range.js
4	src/core/selection-data.js
4	src/core/selection-filter.js
4	src/core/entries.js
4	src/core/round.js
4	src/core/noop.js
4	src/core/selection-enter.js
4	src/core/transition-delay.js
4	src/core/selection-sort.js
4	src/core/sum.js
4	src/core/formatPrefix.js
4	src/core/selection-transition.js
4	src/core/values.js
4	src/core/lab.js
4	src/core/selection-property.js
4	src/core/transition-transition.js
4	src/core/transition-attr.js
4	src/core/quantile.js
4	src/core/selection-html.js
4	src/core/json.js
4	src/core/color.js
8	src/core/interpolate.js
4	src/core/min.js
4	src/core/xml.js
4	src/core/hsl.js
4	src/core/selection-call.js
4	src/core/selection-classed.js
4	src/core/transform.js
4	src/core/nest.js
4	src/core/core.js
404	src/core
4	src/component.js
4	src/package.js
4	src/time/scale-utc.js
4	src/time/format-utc.js
4	src/time/interval.js
4	src/time/hour.js
4	src/time/year.js
4	src/time/week.js
4	src/time/time.js
4	src/time/month.js
4	src/time/second.js
4	src/time/minute.js
4	src/time/format-locale.js
4	src/time/day.js
12	src/time/format.js
4	src/time/format-iso.js
4	src/time/scale.js
72	src/time
4	src/dsv/csv.js
4	src/dsv/tsv.js
4	src/dsv/dsv.js
16	src/dsv
4	src/locale.js
4	src/behavior/behavior.js
8	src/behavior/zoom.js
4	src/behavior/drag.js
20	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/threshold.js
4	src/scale/bilinear.js
4	src/scale/identity.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
60	src/scale
4	src/geo/compose.js
4	src/geo/mercator.js
4	src/geo/azimuthal-equidistant.js
4	src/geo/albers.js
4	src/geo/greatArc.js
16	src/geo/circle.js
4	src/geo/azimuthal.js
4	src/geo/equirectangular.js
4	src/geo/graticule.js
4	src/geo/azimuthal-equal-area.js
4	src/geo/type.js
4	src/geo/stereographic.js
4	src/geo/bounds.js
4	src/geo/orthographic.js
4	src/geo/rotation.js
8	src/geo/projection.js
4	src/geo/gnomonic.js
4	src/geo/albers-usa.js
8	src/geo/path.js
4	src/geo/geo.js
104	src/geo
4	src/end.js
4	src/compat/style.js
4	src/compat/date.js
12	src/compat
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/diagonal-radial.js
4	src/svg/area.js
4	src/svg/line-radial.js
4	src/svg/symbol.js
12	src/svg/brush.js
4	src/svg/svg.js
12	src/svg/line.js
4	src/svg/arc.js
8	src/svg/axis.js
72	src/svg
12	src/geom/voronoi.js
4	src/geom/delaunay.js
4	src/geom/polygon.js
4	src/geom/quadtree.js
4	src/geom/geom.js
4	src/geom/hull.js
36	src/geom
4	src/start.js
900	src