D3 Tree

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
</head>
<body>
  <button onclick="drawTree.init()">Recreate tree!</button>

drawTree.svg.selectAll('rect').remove()
      drawTree.generateTree(drawTree.width / 2, drawTree.height * .95, drawTree.width * .1, 25, Math.PI, drawTree.maxDepth);

},
    generateTree: function(x, y, length, width, angle, depth){

if (depth == 0) {
        return;
      }

var branchData = {
        x: x,
        y: y,
        length: length,
        width: width,
        angle: angle,
        depth: depth
      };

var endx = x - length * Math.sin(angle);
      var endy = y + length * Math.cos(angle);
      var newlength = length * .8;
      var newwidth = width * .8;
      var newangle = angle + Math.random() * ( Math.PI / 2) - ( Math.PI / 2) * .5;
      var newdepth = depth - 1;
      var branchNumber = ~~(Math.random() * 3) + 1;

for (var i = 0; i < branchNumber; i++) {
        drawTree.generateTree(endx, endy, newlength, newwidth, newangle, newdepth);
      }

}

};

drawTree.init()
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js