function drawBlock(parent, width, depth) {
    var newWidth = Math.sqrt(2 * Math.pow(width / 2, 2));
    var color = 'rgba(' + [0, Math.floor(depth * 25), 100, (1 - depth / 40)].join(',') + ');';
    console.log(color);
    var style = 'width: ' + newWidth + 'px;height: ' + newWidth + 'px;background-color: ' + color;
    var left = $('<div class="block left" style="' + style + '"></div>');
    var right = $('<div class="block right" style="' + style + '"></div>');

    left.hide();
    right.hide();

    parent.append(left);
    parent.append(right);

    left.fadeIn(1000);
    right.fadeIn(1000);

    if (depth > 0) {
        setTimeout(function() {
            drawBlock(left, newWidth, depth - 1);
            drawBlock(right, newWidth, depth - 1);
        }, 500);
    }

}

// TODO - Append to DOM once it's completely built out
drawBlock($('#root'), 100, 7);
@@ -1,55 +1,134 @@
-function drawBlock(parent, wid
+console.time('tree');%0A%0A// TODO - Return the entire HTML for that depth.  %0Avar map = %7B%7D;%0Afunction getData(dep
 th, 
-dep
+wid
 th) %7B%0A
+%0A
     var 
 newW
@@ -127,65 +127,110 @@
 var 
-newWidth = Math.sqrt(2 * Math.pow(width / 2, 2));%0A
+color,%0A        left,%0A        nextWidth,%0A        right,%0A        style;%0A%0A    if (!map%5Bdepth%5D) %7B%0A%0A  
     
-var
+ 
  col
@@ -321,35 +321,70 @@
     
-console.log(color
+    nextWidth = Math.sqrt(2 * Math.pow(width / 2, 2)
 );%0A    
-var
+   
  sty
@@ -394,33 +394,34 @@
 = 'width: ' + ne
-w
+xt
 Width + 'px;heig
@@ -430,17 +430,18 @@
 : ' + ne
-w
+xt
 Width + 
@@ -477,19 +477,19 @@
 or;%0A    
-var
+   
  left = 
@@ -551,19 +551,19 @@
 ');%0A    
-var
+   
  right =
@@ -632,197 +632,381 @@
     
-left.hide();%0A    right.hide();%0A%0A    parent.append(left);
+    map%5Bdepth%5D = %7B%0A            left: left,%0A            nextWidth: nextWidth,%0A            right: right%0A        %7D;%0A    %7D%0A%0A    return map%5Bdepth%5D;%0A%7D%0A%0Afunction drawBlock(parent, width, depth) %7B
 %0A    
-parent.append(right);%0A%0A    left.fadeIn(1000);%0A    right.fadeIn(1000);%0A%0A    if (depth %3E 0) %7B%0A        setTimeout(function() %7B%0A    
+var data  = getData(depth, width),%0A        left  = data.left.clone(),%0A        right = data.right.clone();%0A%0A    parent.append(left);%0A    parent.append(right);%0A%0A    if (depth %3E 0) %7B%0A
     
@@ -1025,19 +1025,25 @@
 k(left, 
-new
+data.next
 Width, d
@@ -1057,28 +1057,24 @@
 1);%0A        
-    
 drawBlock(ri
@@ -1082,11 +1082,17 @@
 ht, 
-new
+data.next
 Widt
@@ -1110,25 +1110,8 @@
 1);%0A
-        %7D, 500);%0A
     
@@ -1202,7 +1202,34 @@
 00, 
-7
+10);%0Aconsole.timeEnd('tree'
 );
+%0A

Add timer, only calculate values once for each depth level, and remove delayed 'growth' of tree