JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<svg class="chart" width="800" height="500">
</svg>

CSS

.bar {
  fill: steelblue;
}

JavaScript

var svg = d3.select("svg"),
  margin = 200,
  width = svg.attr("width") - margin,
  height = svg.attr("height") - margin;


var yScale = d3.scaleBand().range([height, 0]).padding(0.4),
  xScale = d3.scaleLinear().range([0, width]);

var g = svg.append("g")
  .attr("transform", "translate(" + 30 + "," + 10 + ")");

var data = [{
  year: 2011,
  value: 45
}, {
  year: 2012,
  value: 67
}, {
  year: 2013,
  value: 78
}, {
  year: 2014,
  value: 95
}, {
  year: 2015,
  value: 101
}, {
  year: 2016,
  value: 150
}, {
  year: 2017,
  value: 73
}, {
  year: 2018,
  value: 173
}, {
  year: 2019,
  value: 88
}];

//SET DOMIAN FOR SCALES BOTH X AND Y
yScale.domain(data.map(function(d) {
  return d.year;
}));

xScale.domain([0, d3.max(data, function(d) {
  return d.value;
})]);

//CREATE X AND Y AXIS
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale).tickFormat(function(d) {
    return '$' + d;
  }).ticks(9));

g.append("g")
  .call(d3.axisLeft(yScale));

//CREATE THE BAR CHART 
g.selectAll(".bar")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", 0)
  .attr("y", function(d) {
    return yScale(d.year);
  })
  .attr("height", yScale.bandwidth())
  .attr("width", function(d) {
    return xScale(d.value);
  });