JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://alignedleft.com/content/03-tutorials/01-d3/d3/d3.v3.min.js"></script>
<div
    class="barChart"
    data-value="5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25"></div>

<div
    class="barChart"
    data-value="1,5,2,2,5,1,0,7,5,3">
</div>

CSS

.barChart:first-child {
    height:200px;
    width:500px;
}

.barChart:last-child {
    height:10px;
    width:50px;
}

JavaScript

function d3_bar(self, dataset, barPadding) {

   var w = parseInt(d3.select(".barChart").style("width"),10);
   var h =  parseInt(d3.select(".barChart").style("height"),10);
    
    var svg = d3.select(".barChart")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
    
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return d * 4;
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });
    
}

$('.barChart').each(function(i) { 

    var self = $(this),
        nums = self.data('value').split(',').map(Number);
    
        d3_bar(self, nums, 1);
        
});