Loss Triangles

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="colorbrewer.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
    font-family: sans-serif; }
    svg { width:100%; height: 100% }
    text { text-anchor: end; }
  form {
    position: absolute;
    right: 10px;
    top: 50px;
    font-family: sans-serif;
  }
</style>
</head>
<body>
<form>
  <label><input type="checkbox" name="tritype" value="Calendar"> Calendar Year</label>
</form>
  <script>

svg.selectAll("text.amount")
            	.transition()
            .ease("linear")
            	//.delay(function(d){ return d.k * 500; })
            	.duration(function(d){ return (d.k - 1) * t ; })
              .attr("x", function(d){ return x(d.d); })

} else {
            console.log("development age");
            x.domain(d3.extent(data, function(d){ return d.j; }));

svg.selectAll("text.amount")
              .transition()
            .ease("linear")
            	//.delay(function(d){ return d.k * 500; })
            	.duration(function(d){ return (d.k - 1) * t; })
              .attr("x", function(d){ return x(d.j); })
          };
        }
      );
    })

</script>
</body>

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