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
    });

    selection.exit()
        .transition()
        .duration(2000)
        .style("opacity", 0)
        .remove();
    selection.transition().delay(2000).duration(2000)
        .style("height", function (d) {
        return (d.value * 10) + "px";
    });
    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().delay(2000).duration(2000)
        .style("opacity", 1)
        .style("height", function (d) {
        return (d * 10) + "px";
    });
}