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":"Pete", "songs":12 }
];


function draw(){
	var content = d3.select("#graph").selectAll("div.member")
        .data(bandMates, function(d){return d.name;});

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

}

draw();

setTimeout(function() {
    bandMates[3] = {  "name":"Ringo", "songs":131 };
    draw();
}, 2000);