JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://rawgit.com/square/crossfilter/master/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div class="container">

 
  <div id="select1">
 
  </div>
  <div id="select2">

  </div>
  <div id="select3">
   
  </div>
<div style="clear: both"></div>
<div id="datatable"></div>

</div>

CSS

.dc-chart th {
    text-align: left
  }
  .dc-chart th,.dc-chart td {
      padding-left: 10px;
  }
  .dc-chart tr.dc-table-group td {
      padding-top: 4px;
      border-bottom: 1px solid black;
  }
  .dc-chart select {
      width: 150px;
  }

JavaScript

function LCG(seed) {
    function lcg(a) {return a * 48271 % 2147483647}
    seed = seed ? lcg(seed) : lcg(Math.random());
    return function() {return (seed = lcg(seed)) / 2147483648}
}
 
 var select1 = dc.selectMenu('#select1'),
      select2 = dc.selectMenu('#select2'),
      select3 = dc.selectMenu('#select3'),
      datatable = dc.dataTable('#datatable');
  // create a bunch of crosslinked categorical data
  var letters = [];
  for(var i = 0; i < 26; ++i)
      letters.push(String.fromCharCode(i+65));
  var colors =...