Recursion by enjalot

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    
    .branch {
      fill: none;
      stroke: #111;
    }
  </style>
</head>

<body>
  <script>
    // RECURSION EXAMPLE
    var index = 0;
    function f(n) {
      var step = {
        step: index++,
        param: n
      }
      if(n > 1) {
        var child1 = f(n-1);
        var child2 = f(n-1);
        step.children = [child1, child2]
      }
      step.returnStep = index;
      return step;
    }
    
    // CALL THE FUNCTION
    var tree = f(4);
    console.log(tree);
    
    var color = d3.scale.linear()
    .domain([0, tree.returnStep])
    .range(["#eee", "#f00"])
    
    // RENDER THE VIS
    var width = 960;
    var height = 500;
    var svg = d3.select("body").append("svg")
    
    var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.x, d.y]; });
    
    var treegroup = svg.append("g")
    	.attr("transform", "translate(0, 20)")
    
    var treeLayout = d3.layout.tree()
      .size([width, height - 20])
    
    var leaves = treeLayout.nodes(tree)
    var branches = treeLayout.links(leaves)
    
    var branch = treegroup.selectAll(".branch")
      .data(branches)
    branch
    .enter().append("path").classed("branch", true)
    .attr({
      d: diagonal
    })

    var leaf = treegroup.selectAll(".leaf")
      .data(leaves)
    leaf
    .enter().append("circle")
      .classed("leaf", true)
      .attr({
        cx: function(d) { return d.x },
        cy: function(d) { return d.y}, 
        r: 10,
        fill: function(d) { return color(d.step)}
      })
    
    var steps = svg.selectAll("g.step")
      .data(leaves)
    var stepsEnter = steps.enter().append("g").classed("step", true)

    stepsEnter.append("text")
    .text(function(d) { return d.step })
    .attr({
      x: function(d,i) { return 100 + i * 20 },
      y: 600,
    })
    stepsEnter.append("rect")
    .attr({
      x: function(d,i) { return 100 + i * 20 },
      y: 600,
      width: 15,
      height: 15
    })
    .on("mouseover", function(step) {
      console.log("step", step)
      leaf
      .style({
        "fill-opacity": 1,
        r: 10
      })
        .filter(function(d) { return d.step > step.step })
      .style({
        "fill-opacity": 0.2,
        r: 3
      })
    })
    
    
    
  </script>
</body>