<story><title>Maze Tree</title><url>http://bl.ocks.org/mbostock/061b3929ba0f3964d335</url></story><parent_chain></parent_chain><comment><author>couchand</author><text>One of the coolest things about this gist is how little code is used for the animation; basically just these lines:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    d3.selectAll(nodes).transition()
        .duration(2500)
        .delay(function() { return this.depth * 50; })
        .ease(&amp;quot;quad-in-out&amp;quot;)
        .tween(&amp;quot;position&amp;quot;, function() {
          var d = this, i = d3.interpolate([d[0], d[1]], [d.y, d.x]);
          return function(t) { var p = i(t); d.t = t; d[0] = p[0]; d[1] = p[1]; };
        });
&lt;/code&gt;&lt;/pre&gt;
The tree layout auto-magically gives every node a depth property, we delay the transition by an amount proportional to the depth, and then over the course of two-and-a-half seconds tween the line segment into the new position.  Simple and effective.  The hard part is generating the maze.</text></comment>
<story><title>Maze Tree</title><url>http://bl.ocks.org/mbostock/061b3929ba0f3964d335</url></story><parent_chain></parent_chain><comment><author>roberthahn</author><text>It&amp;#x27;s not clear to me whether the tree is mapping the paths of the maze or the walls - the transformation makes it appear as though the walls are being mapped but that doesn&amp;#x27;t make sense.&lt;p&gt;I wonder if this works backwards - given a tree could you construct a maze? efficiently?</text></comment>