JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<div id = "rowChart"></div>

JavaScript

var chartExample = {
    initChart: function (experiments) {
        var rowChart = dc.rowChart("#rowChart");

        var ndx = crossfilter(experiments),
            runDimension = ndx.dimension(function (d) {
                return +d.Run;
            }),
            speedSumGroup = runDimension.group().reduceSum(function (d) {
                return d.Speed;
            });
        
        rowChart.width(500)
            .height(200)
            .dimension(runDimension)
            .group(speedSumGroup)
            .colors(d3.scale.ordinal().domain(["positive","negative"])
                                    .range(["#00FF00","#FF0000"]))
            .colorAccessor(function(d) { 
                if(d.value >0) 
                    return "positive"
                return "negative";})
            .elasticX(true)
            .xAxis().ticks(4);

        dc.renderAll();
    },
    initData: function () {
        var experiments = [];
        experiments.push({Type: "foo", Expt: 1, Run: 1, Speed: -700});
        experiments.push({Type: "foo", Expt: 1, Run: 2, Speed: 650});
        experiments.push({Type: "foo", Expt: 1, Run: 3, Speed: 675});
        experiments.push({Type: "foo", Expt: 2, Run: 1, Speed: -825});
        experiments.push({Type: "foo", Expt: 2, Run: 2, Speed: 950});
        experiments.push({Type: "foo", Expt: 2, Run: 3, Speed: 750});
        experiments.push({Type: "bar", Expt: 3, Run: 1, Speed: -650});
        experiments.push({Type: "bar", Expt: 3, Run: 2, Speed: 750});
        experiments.push({Type: "bar", Expt: 3, Run: 3, Speed: 820});
        experiments.push({Type: "bar", Expt: 4, Run: 4, Speed: 100});
        chartExample.initChart(experiments);
    }
};

chartExample.initData();