JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
</body>

CSS

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  /* We'll override this later */

  background-color: teal;
  margin: 0 2px;
}
svg .pumpkin {
  fill: yellow;
  stroke: orange;
  stroke-width: 5;
}

JavaScript

//Width and height
var w = 500;
var h = 100;
var barPadding = 1;

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
    14, 11, 22, 29, 11, 13, 12, 17, 18, 10];

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
        return h - (d * 2);  //Height minus data value
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) {
        return d * 4;
    })
    .attr("x", function(d, i) {
        return i * (w / dataset.length);
    })
    .attr("fill", function(d) {
        return "rgb(0, 0, " + (d * 10) + ")";
    });


svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
    .attr("y", function(d) {
        return h - (d * 2) + 14;  //15 is now 14
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white")
    .attr("text-anchor", "middle");