JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js" charset="utf-8"></script>
<div class="chart"></div>

CSS

.zoom-area {
      fill: transparent;
   }
   .axis {
      fill: #000;
   }
   .axis path {
      display: none;
   }
   .axis text {
      font-family: sans-serif;
      font-size: 11px;
   }
   .axis line {
      stroke: #ccc;
      stroke-dasharray: 3, 3;
      shape-rendering: crispEdges;
   }
   .bar {
      shape-rendering: crispEdges;
      fill: #537da0;
   }

   .label {
      font-size: 12px;
      text-anchor: middle;
   }

JavaScript

$(function () {
   var margin = {
      top: 20,
      right: 10,
      bottom: 20,
      left: 40
   };
 
   var dataset = [
      { "ib": 53044, "ob": 256357},
      { "ib": 44366, "ob": 299464},
      { "ib": 18946, "ob": 39676},
      { "ib": 113673, "ob": 309314},
      { "ib": 122661, "ob": 327421},
      { "ib": 118040, "ob": 381148},
      { "ib": 95298, "ob": 832291},
      { "ib": 146382, "ob": 326821},
      { "ib": 100304, "ob": 381284},
      { "ib": 93387, "ob": 332335},
      { "ib": 57361, "ob": 203249},
      { "ib": 225, "ob": 14914}
   ];

   var svg = d3.select($('.chart').get(0)).append('svg');

   var canvasW = $('.chart').width() - (margin.left + margin.right);

   var canvasH = 400 - (margin.top + margin.bottom);

   svg.attr('width', canvasW + margin.left + margin.right)
    .attr('height', canvasH + margin.top + margin.bottom);

   var barSetPosition = function (s, value, i) {
      s
       .attr('y', function () {
          return canvasH + margin.top - (yScale(0) - yScale(value));
       })
       .attr('height', function () {
          return yScale(0) - yScale(value);
       })
       .attr('width', barScale.rangeBand() );
   };

   // scales for bar
   var barScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, canvasW + margin.right], 0.3, 0.1);

   // axises and scales for x
   var xScale = d3.scale.ordinal()
    .domain(["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"])
    .rangeRoundBands([0, canvasW + margin.right], 0.3, 0.1);

   var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');

   svg
    .append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(' + margin.left + ',' + (canvasH + margin.top) + ')')
    .call(xAxis);

   // axises and scales for y
   var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) { return d3.max([d.ib, d.ob]); })])
   ...