JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class='chart'></div>

CSS

.chart {
      margin: 0;
      height: 500px;
    }

    svg {
      height: 100%;
      width: 100%;
      border: green dashed 1px;
    }

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

JavaScript

var svg = d3.select('.chart').append('svg');
var el = document.querySelectorAll('svg')[0],
  w = el.getClientRects()[0].width,
  h = el.getClientRects()[0].height,
  points_left = [
    [120, 60],
    [90, 170],
    [120, 280]
  ],
  points_left1 = [
    [100, 60],
    [75, 90],
    [65, 130],
    [60, 170],
    [65, 210],
    [75, 250],
    [100, 280]
  ];



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

var pathData_left = lineGenerator(points_left1);

d3.select('svg').append('path').attr('d', pathData_left);
//d3.select('svg').append('path').attr('d', pathData_right);