JSFiddle - React, Tailwind, and code Playground

by jpeter06

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];
 data = [[44,55],[23,86]];
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[1] + "px"; })
 	.attr("class", "divchart")
  .text(function(d) { return d[1]; });
		
}

d3.select("#btn").on("click", function(){
	for(var i=0; i< data.length; i++)
  		data[i]= (Math.floor(Math.random()*300));
	data.push(Math.floor(Math.random()*300));
	draw(data);
});