JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="http://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<div id="bar-chart"></div>

JavaScript

var data= crossfilter([{"foo":"a"},{"foo":"b"},{"foo":"a"}]);

var dimension = data.dimension(function (d) { return d.foo; });
var group = dimension.group();

dc.barChart("#bar-chart")
    .dimension(dimension) 
    .group(group) 
    .x(d3.scaleOrdinal().domain(["", "a", "b", "c"])) // Need the empty val to offset the first value
    .y(d3.scaleLinear().domain([0, 5]))
    .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis
    .brushOn(false)
    .centerBar(true)
    .xAxisPadding(50);

dc.renderAll();