JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<svg width="700" height="110">
  	<path></path>
  </svg>

CSS

path {
  fill: none;
  stroke: #999;
}

circle {
  fill: none;
  stroke: #aaa;
}

JavaScript

var lineGenerator = d3.line()
  .curve(d3.curveCardinal);

var points = [
  [20, 20],
  [80, 60],
  [200, 30]
];

var pathData = lineGenerator(points);

d3.select('path')
  .attr('d', pathData);

// Also draw points for reference
d3.select('svg')
  .selectAll('circle')
  .data(points)
  .enter()
  .append('circle')
  .attr('cx', function(d) {
    return d[0];
  })
  .attr('cy', function(d) {
    return d[1];
  });