line

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background-color: #111; }
  </style>
</head>
<body>

const xScale = d3.scaleTime()
    	.range([0, 960])
    	.domain(d3.extent(data, d => d.date));

const yScale = d3.scaleLinear()
    	.range([500, 0])
    	.domain(d3.extent(data, d => d.value));
    
    const line = d3.line()
    	.x(d => xScale(d.date))
    	.y(d => yScale(d.value))
    	.curve(d3.curveCatmullRom);

const svg = d3
    	.select("body")
    	.append("svg")
      .attr("width", 960)
      .attr("height", 500)
    	.append('path')
    	.attr('stroke', 'hotpink')
    	.attr('stroke-width', 1.8)
    	.attr('fill', 'none')
    	.attr('d', line(data));

</script>
</body>

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