JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<div class="cost-square-wrap">
  <svg viewbox="0 0 1200 250"></svg> 
</div>

CSS

svg {	background: #999}

.cost-square-wrap {
  width: 50%;
}

JavaScript

const dataSet = [[0,20],[20,20]];

const w = 1200;
const h = 250;
const radius = 5;
const padding = 20;
const tickSize = 5;
const tickPadding = 5;
const paddingYaxis = 50;

// scale
var xScale = d3.scaleLinear()
  .domain([0, d3.max(dataSet, function(d) { return d[0]; })])
  .range([paddingYaxis, w - (radius * 2)]);

var yScale = d3.scaleLinear()
  .domain([
    d3.min(dataSet, function(d) { return d[1]; }), 
    d3.max(dataSet, function(d) { return d[1]; })
  ])
  .range([h - padding, (radius * 2)]);

// graph
const svg = d3.select('svg');

const xAxis = d3.axisBottom(xScale)
  .tickSizeInner(-tickSize)
  .tickPadding(tickPadding);

const yAxis = d3.axisLeft(yScale)
	.tickSizeInner(-tickSize)
  .tickPadding(tickPadding);

svg.append('g').attr('transform', 'translate(0,' + (h - padding) + ')').call(xAxis);
svg.append('g').attr('transform', 'translate(' + paddingYaxis + ',0)').call(yAxis);