JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="graph"> </div>
	</body>

JavaScript

var bandMates = 
[
   {  "name":"John", "songs":302 },
   {  "name":"Paul", "songs":300 },
   {  "name":"George", "songs":231},
   {  "name":"Ringo", "songs":131 }  
];



function draw(){
	var content = d3.select("#graph").selectAll("div")
		.data(bandMates)
		.enter()
		.append("div")
		.classed("member",true);
	
		content
			.append("div")
			.text(function(d) { return d.name; });
	
		content
			.append("div")
			.style("height", "40px")
			.style("width", "0px")
			.style("background-color", "#ff9999")
			.transition()
	    	.duration(1000)
	 		.style("width", function (d){ return d.songs + "px";});
		
		content
			.append("div")
			.text(function(d) { return "wrote " + d.songs + " songs!"; });
	
		content.exit().remove();

}

draw();