D3 Examples - pinto-gogol

xxxxxxxxxx
 
<!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 t = 2000;
    
    var ilf = {"fd": 1.7, "ded": 1.0};
    
    // define the line
    var percentOfUltimate = function(layer, ilf){
      if(layer=="net"){
        return d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(((1.7 / d.fd_ldf)-(1.0 / d.ded_ldf)) / ilf); });
      } else if(layer=="zero"){
        return d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(0); });
      } else {
        return d3.line()
            .x(function(d, i) { return x(d.age); })
            .y(function(d, i) { return y(1 / d[layer + "_ldf"] * ilf); });
      }
    }
​
    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>
​
    