JSFiddle - React, Tailwind, and code Playground

by Khadeer Mohammed

HTML

<script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<div id="test">
  <div>
    <a class="reset" style="visibility: hidden" href="javascript:chart.filter(null).redrawGroup()">reset</a>
  </div>
</div>

JavaScript

var chart = dc.barChart("#test");
//d3.csv("morley.csv", function(error, experiments) {
var experiments = [{"Expt":1,"Run":1,"Speed":850},{"Expt":1,"Run":2,"Speed":740},{"Expt":1,"Run":3,"Speed":900},{"Expt":1,"Run":4,"Speed":1070},{"Expt":1,"Run":5,"Speed":930},{"Expt":1,"Run":6,"Speed":850},{"Expt":1,"Run":7,"Speed":950},{"Expt":1,"Run":8,"Speed":980},{"Expt":1,"Run":9,"Speed":980},{"Expt":1,"Run":10,"Speed":880},{"Expt":1,"Run":11,"Speed":1000},{"Expt":1,"Run":12,"Speed":980},{"Expt":1,"Run":13,"Speed":930},{"Expt":1,"Run":14,"Speed":650},{"Expt":1,"Run":15,"Speed":760},{"Expt":1,"Run":16,"Speed":810},{"Expt":1,"Run":17,"Speed":1000},{"Expt":1,"Run":18,"Speed":1000}];

  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(500)
    .height(480)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .brushOn(true)
    .yAxisLabel("This is the Y Axis!")
    .dimension(runDimension)
    .group(speedSumGroup)
    .controlsUseVisibility(true)
    .on('pretransition', function(chart) {
        chart.selectAll("rect.bar").on("click", function (d) {
            console.log('click');
            chart.filter(null)
                .filter(d.data.key)
                .redrawGroup();
        });
    });
    chart.render();
//});