JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mbostock/d3/master/d3.js"></script>
<script src="https://rawgit.com/square/crossfilter/master/crossfilter.js"></script>
<script src="https://rawgit.com/dc-js/dc.js/master/dc.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dc-js/dc.js/master/dc.css">
<div id="test"></div>

JavaScript

var chart = dc.barChart("#test");

var counts = [{
    name: "apple",
    cnt: 10
}, {
    name: "orange",
    cnt: 15
}, {
    name: "banana",
    cnt: 12
}, {
    name: "grapefruit",
    cnt: 2
}, {
    name: "grapefruit",
    cnt: 4
}];

var ndx = crossfilter(counts),
    fruitDimension = ndx.dimension(function (d) {
        return d.name;
    }),
    sumGroup = fruitDimension.group().reduceSum(function (d) {
        return d.cnt;
    });

chart.width(768)
    .height(380)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .brushOn(false)
    .xAxisLabel("Fruit")
    .yAxisLabel("Quantity Sold")
    .dimension(fruitDimension)
    .barPadding(0.1)
    .outerPadding(0.05)
    .group(sumGroup);

chart.render();