Checking the code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<svg id="sketch" width="400" height="240"></svg>
<script>
const svg = d3.select("#sketch");
const demand = d3.line()([[20, 30], [380, 200]]);
const supply = d3.line()([[20, 200], [380, 40]]);

svg.append("path").attr("d", demand)
  .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none"); .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none"); .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none"); .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none");
svg.append("path").attr("d", supply)  .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none"); .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none"); .attr("stroke", "#7DA2A9").attr("stroke-width", 3).attr("fill", "none");
  .attr("stroke", "#C0564B").attr("stroke-width", 3).attr("fill", "none");
33
1
2
3
4

</script>