JSFiddle - React, Tailwind, and code Playground

by Lorenzo Brutti

HTML

<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
<script src="https://unpkg.com/[email protected]/crossfilter.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
<script src="https://unpkg.com/dc@4/dist/dc.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dc@4/dist/style/dc.css">
<div id="test"></div>
<!-- here's a way to load data from a jsfiddle, to avoid CORS
  problems - see http://stackoverflow.com/a/22896088/676195
  -->
<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;
}

JavaScript

var chart = new dc.BarChart("#test");
//d3.csv("morley.csv", function(error, experiments) {
var 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 * d.Run / 1000;});

  chart
    .width(768)
    .height(480)
    .x(d3.scaleLinear().domain([6,20]))
    .brushOn(true)
    .yAxisLabel("This is the Y Axis!")
    .dimension(runDimension)
    .group(speedSumGroup)
    .on('renderlet', function(chart) {
    chart.selectAll('rect').on("click", function(d) {
            console.log("click!", d);
        });
    })
    .on('filtered', function(chart) {

    chart.selectAll('rect').on("click", function(d) {
            console.log("click!", d);
        });
    });        debugger;

   chart.brush().on('brush', function(){

       console.log(d3.event.selection);
     });
   	
    chart.render();
//});