JSFiddle - React, Tailwind, and code Playground

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>
<html>

  <body>
    <div id="inputSlider">
      <div><input type="range" id="slideRange" value="22" min="0" max="25" step="5"></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; //'High';
         } 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
         };
       });


     chart
     .width(500)
     .height(300)
     .margins({
       top: 20,
       left: 40,
       right: 20,
       bottom: 60
     })
     .x(d3.scaleLinear().domain([0, 17]))
     //.legend(dc.legend().x(60).y(20).itemHeight(13).gap(5))
   
     .renderHorizontalGridLines(true)
    ...