Source code for Javascript tree that features in “Inventing on Principle” video

Question

I was quite inspired by Bret Victor\'s Inventing on Principle video (http://vimeo.com/36579366).

Also, I was very fascinated by that tree drawn using Javascript. I

Answer 1

Credit to Ian Johnson ( @enjalot ) for sharing this with me, but here is a link to d3js version of a tree. http://tributary.io/inlet/4b0a56692447fa75d8a1 which is adapted from this version by Peter Cook http://prcweb.co.uk/lab/d3-tree/

Uses combo of paths:

var pathGenerator = d3.svg.line()
.x(function(d) {
  return d.x;
})
.y(function(d) {
  return d.y;
})

And functions that fetch parents, points and paths:

function getPoints(branches) {
  var points = [];
  branches.forEach(function(branch) {
    points.push( {x: x1(branch), y: y1(branch) });
    points.push( {x: x2(branch), y: y2(branch) });
  });
  return points;
}

function getParent(branch, p, branches) {
  if(!branch.parent) return;
  var b = branches[branch.parent];
  p.push({x: b.x, y: b.y})
  getParent(b, p, branches);

}


function getPaths(branches) {
  var paths = [];

  var i = 0;
  branches.forEach(function(branch) {
    if(branch.d < maxDepth) return;
    var p = [{x: branch.x, y: branch.y}];
    getParent(branch, p, branches);
    p.push(seed);
    paths.push(p);
  });
  return paths;
}

Again, HT to Ian. Live demo here.