JSFiddle - React, Tailwind, and code Playground

by kalinin sergey

HTML

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

CSS

svg {
	background: #999;
	width: 100%;

}

.cost-square-wrap {
  width: 100%;
  max-width: 1200px;
}

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('body .cost-square-wrap')
            .append('svg')
            .attr('width', w)
            .attr('height', h)
            .attr('viewbox', '0 0 ' + w + ' ' + h);;


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);