JSFiddle - React, Tailwind, and code Playground

by JaelB

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<html>

  <body>
    <div id="inputSlider">
      <div><input type="range" id="slideRange" value="10" min="0" max="16" step="1"></div>
      <label>Score threshold: <span id="sliderValue"></span></label></div>
      


    <div id="test"></div>


  </body>

</html>

JavaScript

var chart = dc.compositeChart("#test");

        d3.csv("https://raw.githubusercontent.com/JaelB/Generic-DC.js-Chart/master/fiddle4.csv").then(function(data) {

          var ndx = crossfilter(data);

          var dummy = ndx.dimension(function(d) {
            return [+d.xAxis, d.some_no];
          });

          var speed = ndx.dimension(function(d) {
            return +d.xAxis;
          });
          var speedGrp = speed.group().reduce(
            function(p, v) {
              p.yOne = p.yOne + +v.yOne;
              p.yTwo = p.yTwo + +v.yTwo;
              return p;
            },
            function(p, v) {
              p.yOne = p.yOne - +v.yOne;
              p.yTwo = p.yTwo - +v.yTwo;
              return p;
            },
            function() {
              return {
                yOne: 0,
                yTwo: 0
              };
            });

          function coreCount_from_threshold() {
            var scoreThreshold = document.getElementById('slideRange').value;
            scoreThreshold = parseFloat(scoreThreshold);
            if (isNaN(scoreThreshold)) {
              scoreThreshold = 10
            }
            return ndx.dimension(function(d) {
              var maxNumber = 16;
              if ((+d.xAxis > scoreThreshold) && (+d.xAxis < maxNumber)) {
                return +d.xAxis;
              } else {
                return null;
              }
            });
          }
          var coreCount = coreCount_from_threshold();
          var coreCountGroup = coreCount.group().reduce(
            function(p, v) {
              p.yOne = p.yOne + +v.yOne;
              p.yTwo = p.yTwo + +v.yTwo;
              return p;
            },
            function(p, v) {
              p.yOne = p.yOne - +v.yOne;
              p.yTwo = p.yTwo - +v.yTwo;
              return p;
            },
            function() {
              return {
                yOne: 0,
                yTwo: 0
              };
            });


          var...