JSFiddle - React, Tailwind, and code Playground

by adkf37

HTML

<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
<script src="https://unpkg.com/[email protected]/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="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 = 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(false)
    .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);
        });
    });
    chart.render();
//});