Skip to content

Instantly share code, notes, and snippets.

@wrightmikea

wrightmikea/README.md

Forked from syntagmatic/README.md
Created July 18, 2014 19:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wrightmikea/0e42c4159e41a8a97188 to your computer and use it in GitHub Desktop.
Save wrightmikea/0e42c4159e41a8a97188 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

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

Raw
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)
};
};
Raw
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
Raw
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
Raw
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
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment