JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.bars {
	fill: teal;
}

JavaScript

var width = 400, height = 400;

var data = [{title: "A", value: 53}, {title: "B", value: 12}, {title: "C", value: 91}, {title: "D", value: 24}, {title: "E", value: 59}];

var margin = {top:0, right:0, bottom:0, left:30};

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	
var xScale = d3.scaleLinear()
	.range([margin.left, width - margin.right]);
	
var yScale = d3.scaleBand()
	.range([margin.top, height - margin.bottom])
	.paddingInner(0.2);
	
xScale.domain([0, d3.max(data, function(d){ return d.value})]);
yScale.domain(data.map(function(d){ return d.title}));

var bars = svg.selectAll(".bars")
	.data(data);
	
bars.enter()
	.append("rect")
	.attr("class", "bars")
	.attr("x", xScale(0))
	.attr("y", function(d){ return yScale(d.title)})
	.attr("width", 0)
	.attr("height", yScale.bandwidth())
	.transition()
	.duration(1000)
	.delay(function(d,i){ return i*200})
	.attr("width", function(d){ return xScale(d.value) - margin.left});
	
var yAxis = d3.axisLeft(yScale)
	.tickSizeOuter(0);

svg.append("g")
	.attr("transform", "translate(" + margin.left + ",0)")
	.call(yAxis);