Line Chart con diferentes interpolaciones by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>linechart</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    html {
      height: 100%;
      box-sizing: border-box;
    }
    
    *, *:before, *:after {
      box-sizing: inherit;
    }
    
    body {
      position: relative;
      margin: 0;
      padding-bottom: 6rem;
      min-height: 100%;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 3px;
    }
</style>
  
</head>
<body>
  <div id="curveSelect"></div> 

  <script>
    var select = [
    {"value":0, "text":"curveBasis",      "d3Curve":d3.curveBasis},
    {"value":1, "text":"curveLinear",     "d3Curve":d3.curveLinear},
    {"value":2, "text":"curveNatural",    "d3Curve":d3.curveNatural},
    {"value":3, "text":"curveStep",       "d3Curve":d3.curveStep},
    {"value":4, "text":"curveStepAfter",  "d3Curve":d3.curveStepAfter},
    {"value":5, "text":"curveCardinal",   "d3Curve":d3.curveCardinal},
    {"value":6, "text":"curveMonotoneX",  "d3Curve":d3.curveMonotoneX},
    {"value":7, "text":"curveCatmullRom", "d3Curve":d3.curveCatmullRom}
//
// etc.  
//
];

    d3.select("div#curveSelect")
      .append("select").attr("id","curve")
        .selectAll("option")
        .data(select)
        .enter()
        .append("option")
        .attr("value",function(d,i) {return i})
        .text(function(d,i) {return d.text;});


    var data = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

    // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;    

    // set the ranges
    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var valueline = d3.line()
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain([0, d3.max(data, function(d) { return d.y; })]);        

    render(d3.curveBasis);  

    d3.select("#curve").on("change", function(){
            // Add the valueline path.
            valueline.curve(select[d3.select("#curve").property('value')].d3Curve);              
            
            d3.select("path")
            .transition()
            // .duration(500)
            // .ease(d3.easeLinear)
            .attr("class","line")
            .attr("d",valueline(data));    

      });
      
    function render(curve){
        // define the line
        valueline.curve(curve);    

        // append the svg object to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        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 + ")");

        // Get the data
          
          // Add the valueline path.
          svg.append("path")          
              .attr("class", "line")
              .attr("d", valueline(data));


          // Add the X Axis
          svg.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x));

          // text label for the x axis
          svg.append("text")             
          .attr("transform",
                "translate(" + (width/2) + " ," + 
                               (height + 30) + ")")
          .style("text-anchor", "middle")
          .text("X Axis");

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

          svg.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0 - margin.left)
          .attr("x",0 - (height / 2))
          .attr("dy", "1em")
          .style("text-anchor", "middle")
          .text("Y Axis");
      
          svg.selectAll("circle").data(data).enter().append("circle")
             .attr("cx",function(d,i) { return x(d.x);} )
             .attr("cy",function(d,i) { return y(d.y);} )
             .attr("r",5)
             .attr("fill", "steelblue")
             .attr("stroke","white");
      }
  </script>
<footer>
  <p>Una extension del trabajo de adebrouvier: <a href="https://bl.ocks.org/adebrouvier/24871961f25ac5e30c0a235154b61cf5">https://bl.ocks.org/adebrouvier/24871961f25ac5e30c0a235154b61cf5</a></p>
</footer>

</body>
</html>