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="https://rawgithub.com/alfajango/jquery-dynatable/master/jquery.dynatable.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alfajango/jquery-dynatable/master/jquery.dynatable.css">
<div id="rowChart"></div>
<table id="dc-data-table">
    <thead>
      <tr>
        <th data-dynatable-column="key">Client</th>
        <th data-dynatable-column="value">Project</th>
      </tr>
    </thead>
 </table>

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;
            }), 
            runDimension2 = ndx.dimension(function (d) {
                return +d.Run;
            }),
            speedSumGroup2 = runDimension2.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);
        
        var dynatable = $('#dc-data-table').dynatable({
                features: {
                    pushState: false
                },
                dataset: {
                    records: speedSumGroup2.top(Infinity),
                    perPageDefault: 10,
                    perPageOptions: [2, 4, 10]
                }
            }).data('dynatable');
        
        function RefreshTable() {
                dc.events.trigger(function () {
                    dynatable.settings.dataset.originalRecords = speedSumGroup2.top(Infinity);
                    dynatable.process();
                });
            };
        
         for (var i = 0; i < dc.chartRegistry.list().length; i++) {
                var chartI = dc.chartRegistry.list()[i];
                chartI.on("filtered", RefreshTable);
            }
        RefreshTable();

        dc.renderAll();
    },
   ...