saa line chart

forked from azywong's block: A4 line chart

<!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 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>

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