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/[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(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();
//});