Line Chart Simple

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .y-axis path {
      stroke: gray;
      stroke-width: 1.5px;
    }

.x-axis path {
      stroke: gray;
      stroke-width: 1.5px;
    }
    .tick line {
      opacity: 0.2;
      stroke: #9b9999;
    }
    .tick text {
      font-size: 9pt;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960;
    var height = 500;
    var margin = {
      top: 30,
      right: 30,
      bottom: 30,
      left: 30
    }
    var clientWidth = width - (margin.left + margin.right);
    var clientHeight = height - (margin.top + margin.bottom);

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var xScale = d3.scaleLinear();
    xScale.range([0, clientWidth]);
    xScale.domain([0, 100]);
    
    var yScale = d3.scaleLinear();
		yScale.range([clientHeight, 0]);
    yScale.domain([0, 10]);
    
    var plot = svg.append('g')
    	.attr('width', clientWidth)
    	.attr('height', clientHeight)
    	.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    
    plot.append('g').attr('class', 'x-axis').attr('transform', 'translate(0, ' + (clientHeight) + ')');
    plot.append('g').attr('class', 'y-axis');

var xAxis = d3.axisBottom(xScale).tickSizeInner(-clientHeight).tickPadding(5);
    var yAxis = d3.axisLeft(yScale).tickSizeInner(-clientWidth).tickPadding(5);

svg.select('.x-axis').call(xAxis);
		svg.select('.y-axis').call(yAxis);

</script>
</body>

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