JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
<script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dc@3/dc.css">
<script src="https://unpkg.com/dc@3/dc.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>

<pre id="data">Expt,Run,Speed
1,1,850
1,2,740
1,3,900
1,4,1070
1,5,930
1,6,850
1,7,950
1,8,980
1,9,980
1,10,880
1,11,1000
1,12,980
1,13,930
1,14,650
1,15,760
1,16,810
1,17,1000
1,18,1000
1,19,960
1,20,960
2,1,960
2,2,940
2,3,960
2,4,940
2,5,880
2,6,800
2,7,850
2,8,880
2,9,900
2,10,840
2,11,830
2,12,790
2,13,810
2,14,880
2,15,880
2,16,830
2,17,800
2,18,790
2,19,760
2,20,800
3,1,880
3,2,880
3,3,880
3,4,860
3,5,720
3,6,720
3,7,620
3,8,860
3,9,970
3,10,950
3,11,880
3,12,910
3,13,850
3,14,870
3,15,840
3,16,840
3,17,850
3,18,840
3,19,840
3,20,840
4,1,890
4,2,810
4,3,810
4,4,820
4,5,800
4,6,770
4,7,760
4,8,740
4,9,750
4,10,760
4,11,910
4,12,920
4,13,890
4,14,860
4,15,880
4,16,720
4,17,840
4,18,850
4,19,850
4,20,780
5,1,890
5,2,840
5,3,780
5,4,810
5,5,760
5,6,810
5,7,790
5,8,810
5,9,820
5,10,850
5,11,870
5,12,870
5,13,810
5,14,740
5,15,810
5,16,940
5,17,950
5,18,800
5,19,810
5,20,870
</pre>

CSS

pre#data {
  display: none;
}
.dc-chart {
  float: left;
}

JavaScript

// may cause problems if there is a lot of data
dc.constants.EVENT_DELAY = 0;

var chart1 = dc.barChart("#test1");
var chart2 = dc.barChart("#test2");
var chart3 = dc.barChart("#test3");
var chart4 = dc.barChart("#test4");

let experiments = d3.csvParse(d3.select('pre#data').text());

    experiments.forEach(function(x) {
        x.Speed = +x.Speed;
    });

    var ndx                 = crossfilter(experiments),
        runDimension        = ndx.dimension(function(d) {return +d.Run;}),
        speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed/100 + +d.Run/2;});


    function bar_chart(chart) {
        chart
            .width(400)
            .height(300)
            .x(d3.scaleLinear()).elasticX(true)
            .brushOn(true)
            .dimension(runDimension)
            .group(speedSumGroup);
        return chart;
    }

    bar_chart(chart1)
    bar_chart(chart2);
    bar_chart(chart3);
    bar_chart(chart4);

    const charts = [chart1,chart2,chart3,chart4];
    let broadcasting = false; // don't repropogate (infinite loop)
    for(const chartA of charts)
        chartA.on('filtered', function(chart, filter) {
            if(broadcasting)
                return;
            broadcasting = true;
            for(const chartB of charts.filter(chartB => chartB !== chartA))
                chartB.replaceFilter(filter);
            broadcasting = false;
        })

    dc.renderAll();