JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Why doesn't .ticks() have any effect? -->

<div id="chart" class="chart"></div>

CSS

#chart {
    height: 300px;
}
.chart {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #999999;
  height: 210px;
  clear: both; }
  .chart img.loading {
    display: block;
    left: 50%;
    position: relative;
    top: 50%; }
  .chart path {
    fill: none; }
  .chart .axis path, .chart .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges; }
  .chart .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges; }
  .chart .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges; }

JavaScript

var data = [{"category":"12am","count":13},{"category":"1am","count":10},{"category":"2am","count":24},{"category":"3am","count":20},{"category":"4am","count":11},{"category":"5am","count":6},{"category":"6am","count":5},{"category":"7am","count":5},{"category":"8am","count":21},{"category":"9am","count":14},{"category":"10am","count":25},{"category":"11am","count":9},{"category":"12pm","count":2},{"category":"1pm","count":19},{"category":"2pm","count":7},{"category":"3pm","count":13},{"category":"4pm","count":0},{"category":"5pm","count":22},{"category":"6pm","count":20},{"category":"7pm","count":7},{"category":"8pm","count":25}];
console.log(data);

var barChart = new BarChart().oneColor(true);

d3.select('#chart').datum(data).call(barChart);

function BarChart() {

    var margin       = {top: 40, right: 20, bottom: 40, left: 60},
        xScale       = d3.scale.ordinal(),
        yScale       = d3.scale.linear(),
        xAxis        = d3.svg.axis().scale(xScale).orient("bottom").ticks(3),
        yAxis        = d3.svg.axis().scale(yScale).orient("left"),
        color        = d3.scale.category10(),
        oneColor     = false,
        rotateLabels = false;
            

    function chart(selection) {
        selection.each(function(data)
        {
            var width = $(selection[0]).width()-margin.left-margin.right;
            var height = $(selection[0]).height()-margin.top-margin.bottom;

            data.forEach(function(d) {
                d.count = +d.count;
            });

            // Update the x-scale.
            xScale
                .rangeRoundBands([0, width], .1)
                .domain(data.map(function(d) { return d.category; }));

            // Update the y-scale.
            yScale
                .range([height, 0])
                .domain([0, d3.max(data, function(d) { return d.count; })]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);

           ...