pinto-gogol

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:30;right:10;bottom:10;left:10; }
    
    .ldf {
      fill: none;
      stroke-width: 2px;
    }
    .fd.ldf { stroke: crimson; }
    .net.ldf { stroke: seagreen; }
    .ded.ldf { stroke: steelblue; }
    
    .ilf {
      stroke-width: 0;
    }
    .fd.ilf { fill: crimson; }
    .net.ilf { fill: seagreen; }
    .ded.ilf { fill: steelblue; }
    
    
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    		width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom
    		w = 500, h = 300;
    
    var x = d3.scaleLinear().range([0, w]),
        y = d3.scaleLinear().range([h, 0]);

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
      if (error) throw error;

// format the data
      data.forEach(function(d) {
          d.age = +d.age;
          d.ldf = +d.ldf;
      });

// Scale the range of the data
      x.domain(d3.extent(data, function(d) { return d.age; }));
      y.domain([0, Math.max(ilf["fd"], ilf["ded"])]);
      y.domain([0, 2]);

// fd ldf
      svg.append("path")
          .data([data])
          .attr("class", "fd ldf")
          .attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d.fd_ldf * 1.0); })
          )
      .transition().delay(t).duration(t)
      	.attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d.fd_ldf * ilf.fd); })
          )
      .transition().delay(5 * t).duration(t)
      	.attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d.fd_ldf * 1.0); })
          );
      
      // ded ldf
      svg.append("path")
          .data([data])
          .attr("class", "ded ldf")
          .attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d.ded_ldf * 1.0); })
          )
      .transition().delay(t).duration(t)
      	.attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d.ded_ldf * ilf.ded); })
          )
      .transition().delay(5 * t).duration(t)
      	.attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d.ded_ldf * 1.0); })
          );
      
      // net ldf
      svg.append("path")
          .data([data])
          .attr("class", "net ldf")
      		.style("opacity", 0.0)
          .attr("d", d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d) { 
        			return y(((ilf.fd / d.fd_ldf) - (ilf.ded / d.ded_ldf))); 
      			})
          )
      	.transition().delay(5 * t).duration(t)
      		.style("opacity", 1.0)
          .attr("d", d3.line()
            .x(function(d) { return x(d.age); })
            .y(function(d) { 
        			return y(((ilf.fd / d.fd_ldf) - (ilf.ded / d.ded_ldf))); 
      			})
          )
      	.transition().delay(t).duration(t)
          .attr("d", d3.line()
            .x(function(d) { return x(d.age); })
            .y(function(d) { 
        			return y(((ilf.fd / d.fd_ldf) - (ilf.ded / d.ded_ldf)) / 
                       	(ilf.fd - ilf.ded)); })
          );
      
      
      // net area
      svg.append("path")
         	.data([data])
         	.attr("class", "net ilf")
      		.style("opacity", 0.0)
      	 	.attr("d", d3.area()
						.x(function(d) { return x(d.age); })
            .y0(function(d, i) { return y(1 / d.ded_ldf * ilf.ded); })
            .y1(function(d, i) { return y(1 / d.fd_ldf * ilf.fd); })
          )
      .transition().delay(2 * t).duration(t)
      		.style("opacity",0.5)
      .transition().delay(t).duration(t)
          .attr("d", d3.area()
            .x(function(d) { return x(d.age); })
            .y0(h)
            .y1(function(d) { return y(((ilf.fd / d.fd_ldf) - 
                                        (ilf.ded / d.ded_ldf)) / 
                                       (1.0)); })
          )
      .transition().delay(1 * t).duration(t)
      		.style("opacity",0.0)

// Add the X Axis
      svg.append("g").attr("class", "x axis")
          .attr("transform", "translate(0," + h + ")")
          .call(d3.axisBottom(x).tickValues(data.map(function(d){ return d.age; })));

// Add the Y Axis
      svg.append("g").attr("class", "y axis")
          .call(d3.axisLeft(y));

svg.append("rect")
        .attr("width", 80)
        .attr("height", h - y(ilf.ded))
        .attr("x", 600)
        .attr("y", y(ilf.ded))
        .attr("class", "ded ilf")

svg.append("rect")
        .attr("width", 80)
        .attr("height", h - y(ilf.fd))
        .attr("x", 680)
        .attr("y", y(ilf.fd))
        .attr("class", "fd ilf")
    });

</script>
</body>

Modified http://d3js.org/queue.v1.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/queue.v1.min.js