JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="btn">Click to add</button>
<br>
<br>

CSS

.divchart {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript

var data = [40, 80, 150, 160, 230, 260];
var body = d3.select("body");

draw(data);

function draw(dataset){
	var divs = body.selectAll("div").data(data);
	
	divs.enter().append("div").style("width", "0px")
	.merge(divs)
	.transition().duration(1000).style("width", function(d) { return d + "px"; })
 	.attr("class", "divchart")
  .text(function(d) { return d; });
		
}

d3.select("#btn").on("click", function(){
	data.push(Math.floor(Math.random()*300));
	draw(data);
});