D3 Examples - saa line chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>
<body>
    <script type="text/javascript">
        var w = 700;
        var h = 500;
        var padding = {
            left: 25,
            right: 10,
            bottom: 50,
            top: 10
        }
 
        var dataset = [
      {
        delta: 149,
        capacity: 1,
        compression: true
      },
      {
        delta: 37,
        capacity: 2,
        compression: true
      },
      {
        delta: 79,
        capacity: 3,
        compression: true
      },
      {
        delta: 0,
        capacity: 4,
        compression: true
      },
      {
        delta: 0,
        capacity: 5,
        compression: true
      },
      {
        delta: 0,
        capacity: 6,
        compression: true
      },
      {
        delta: 0,
        capacity: 7,
        compression: true
      },
      {
        delta: 0,
        capacity: 8,
        compression: true
      },
      {
        delta: 0,
        capacity: 9,
        compression: true
      }
      ,
      {
        delta: 0,
        capacity: 10,
        compression: true
      },
      {
        delta: 0,
        capacity: 1,
        compression: false
      },
      {
        delta: 0,
        capacity: 2,
        compression: false
      },
      {
        delta: 0,
        capacity: 3,
        compression: false
      },
      {
        delta: 0,
        capacity: 4,
        compression: false
      },
      {
        delta: 0,
        capacity: 5,
        compression: false
      },
      {
        delta: 0,
        capacity: 6,
        compression: false
      },
      {
        delta: 0,
        capacity: 7,
        compression: false
      },
      {
        delta: 0,
        capacity: 8,
        compression: false
      },
      {
        delta: 0,
        capacity: 9,
        compression: false
      },
      {
        delta: 0,
        capacity: 10,
        compression: false
      }
    ];
    
    var lineData = {
      compression: [],
      noCompression: []
    }
        
    dataset.forEach(function (d) {
      if (d.compression) {
        lineData.compression.push(d)
      } else {
        lineData.noCompression.push(d)
      }
    });
        
    // define the canvas
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
​
    var xScale = d3.scaleLinear()
    .domain([1,10])
    .rangeRound([padding.left, w - padding.left - padding.right])
​
    var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function (d, i){
      return d.delta;
    })])
    .rangeRound([h - padding.bottom - padding.top, padding.bottom]);
​
    var line1 = d3.line()
    .x(function(d, i) { return xScale(d.capacity); })
    .y(function(d, i) { return yScale(d.delta);  });
    
    var line2 = d3.line()
    .x(function(d, i) { return xScale(d.capacity); })
    .y(function(d, i) { return yScale(d.delta); });
​
    var xAxis = d3.axisBottom(xScale)
​
    svg.append("g")
      .attr("transform", "translate(" + 0 + ", "+ (h - padding.bottom - padding.top) + ")")
      .call(function(g) {
        g.call(xAxis)
        g.append("text")
        .attr("fill", "#000")
        .attr("x", w)
        .attr("y", 20)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("capacity (Mbps)");
​
        g.selectAll(".tick text")
          .attr("transform", "rotate(45)")
          .attr("text-anchor", "start");
      });
​
    var yAxis = d3.axisLeft(yScale);
​
    svg.append("g")
      .attr("transform", "translate(" + padding.left + ", " + 0 + ")")
      .call(yAxis)
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", -15)
        .attr("x", -20)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Δtʜ - Δtʟ");
​
    svg.append("path")
      .datum(lineData.compression)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line1);
    
    svg.append("path")
      .datum(lineData.noCompression)
      .attr("fill", "none")
      .attr("stroke", "tomato")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line2);
​
    </script>
</body>
</html>
    