JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="xy_chart"></svg>

CSS

.xy_chart{
  position: relative;
  left: 50px
}

JavaScript

var data = [ {x: 0, y: 0}, {x: 5, y: 30}, {x: 10, y: 40},
            {x: 15, y: 60}, {x: 20, y: 70}, {x: 25, y: 100} ];

const margin = {
  left: 20,
  right: 20,
  top: 20,
  bottom: 80
};

const svg = d3.select('svg');
svg.selectAll("*").remove();

const width = 200 - margin.left - margin.right;
const height = 200 - margin.top - margin.bottom;

const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);


var x = d3.scaleLinear()
        .domain([0, d3.max(data, function(d){ return d.x; })])
        .range([0,width])
        .nice();

var y = d3.scaleLinear()
        .domain([0, d3.max(data, function(d){ return d.y; })])
        .range([0,height])
        .nice();

const xAxis = d3.axisTop()
            .scale(x)
            .ticks(5)
            .tickPadding(5)
            .tickSize(-height)

const yAxis = d3.axisLeft()
            .scale(y)
            .ticks(5)
            .tickPadding(5)
            .tickSize(-width);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(20,${height-margin.top-60})`)
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(20,20)")
  .call(yAxis);

var lineFunction = d3.line()
.x(function(d) {return x(d.x); })
.y(function(d) {return y(d.y); })
.curve(d3.curveLinear);

//defining and plotting the lines
var path = g.append("path")
						.attr("class", "path1")
            .attr("id", "blueLine")
            .attr("d", lineFunction(data))
            .attr("stroke", "blue")
            .attr("stroke-width", 2)
            .attr("fill", "none")
            .attr("clip-path", "url(#clip)");
          
      // plot a circle at each data point
			g.selectAll(".dot")
    			.data(data)
  				.enter().append("circle")
    			.attr("cx", function(d) { return x(d.x); } )
    			.attr("cy", function(d) { return y(d.y); } )
    			.attr("r", 3)
    			.attr("class", "blackDot")
					.attr("clip-path", "url(#clip)");
          
  //************* Legend...