JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="update" onclick="update();"></input>
<div id="chart"></div>

CSS

.bar {
    float: left;
    width: 30px;
    margin-right: 20px;
    background-color: #F4F5F7;
    border: 1px solid #C5C5C5;
}

JavaScript

function update() {
    var numbers = [{
        "id": 0,
        "value": 10
    }];
    for (var a = 1; a < 12; a++) {
        if (Math.random() < 0.7) {
            numbers.push({
                "id": a,
                "value": Math.ceil(Math.random() * 12)
            });
        }
    }

    var container = d3.select("#chart");
    var selection = container.selectAll(".bar").data(numbers, function (d) {
        return d.id
    });

    var transition=d3.transition().duration(2000);
    
    if (!selection.exit().empty()) transition=transition.each(function(){
        selection.exit()
            .transition()
            .style("opacity", 0)
            .remove();
    }).transition();
    
    if (!selection.empty()) transition=transition.each(function(){
        selection.transition()
            .style("height", function (d) {
                return (d.value * 10) + "px";
            });
    }).transition();
    
    transition.each(function(){
        selection.enter()
            .append("div")
            .attr("class", "bar")
            .attr("id", function (d) {
            return d;
        })
            .style("opacity", 0)
            .style("height", function (d) {
            return (d.value * 9) + "px";
        })
            .text(function (d) {
            return d.id
        })
        .transition()
        .style("opacity", 1)
        .style("height", function (d) {
            return (d * 10) + "px";
        });
    });
}