JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

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

CSS

svg {
  border: red dashed 1px;
}

JavaScript

var width = 400,
  height = 250,
  data = [10, 23, 47, 51, 72, 80, 93, 100];

var svg = d3.select('.chart').append('svg').attr('width', width).attr('height', height);

var scale_x = d3.scaleLinear()
  .domain([d3.min(data), d3.max(data)])
  .range([0, width - 100]),

  scale_y = d3.scaleLinear()
  .domain([d3.min(data), d3.max(data)])
  .range([height * 0.85, 0]);

var x_axis = d3.axisBottom().scale(scale_x),
  y_axis = d3.axisLeft().scale(scale_y);

svg.append('g').attr('transform', 'translate(50,222)').call(x_axis);
svg.append('g').attr('transform', 'translate(50,10)')
  .call(y_axis);