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>
<html>
<body>
<div id = 'select1'></div>
<div id = 'comp-chart'></div>
</body>
</html>

CSS

#comp-chart .line {
          stroke-width: 0.5px
        }

JavaScript

var select = dc.selectMenu('#select1');
var compChart = dc.compositeChart('#comp-chart');

var timeFmt = d3.timeParse('%Y-%m-%d %H:%M:%S'); //2015-12-29 02:30:00
d3.csv('https://raw.githubusercontent.com/JaelB/Generic-DC.js-Chart/master/fiddle2.csv').then(function(data){
            data.forEach(function(d){
               d.date = timeFmt(d.date); });
  var ndx = crossfilter(data);
  
  var dummy = ndx.dimension(function(d){return d.date;});
  var start = dummy.bottom(1)[0].date;
  var end = dummy.top(1)[0].date;

  var name = ndx.dimension(function(d){return d.name});
  
  var dim = ndx.dimension(function(d){return d.date; });
  
  var grp = dim.group().reduce(
              function(p,v){
              ++p.count;
                p.m = +v.m;
                p.a = +v.a;
                p.b = +v.b;
                return p;
              },
              function(p,v){
              --p.count;
                p.m = +v.m;
                p.a = +v.a;
                p.b = +v.b;
                return p;
              },
              function(){return {count:0, m:0, a:0, b:0}; });
  
  select.dimension(name)
  			.group(name.group())
        .controlsUseVisibility(true)
        .title(function(d){return d.key; });
        
  compChart
          .width(900)
          .height(300)
          //.transitionDuration(1000)
          .margins({top: 30, right: 500, bottom: 40, left: 40})
		  .x(d3.scaleTime().domain([start,end]))          
		  .legend(dc.legend().x(1025).y(20).itemHeight(13).gap(5))
          .renderHorizontalGridLines(true)
          .elasticY(true)
          .elasticX(true)
          //.mouseZoomable(true)
          .compose([
              dc.lineChart(compChart)
                .dimension(dim)
                .colors('#0000FF') 
                .group(grp, 'a')
                .renderArea(true)
                .valueAccessor(function(d){return d.value.a; })
                .curve(d3.curveLinear),
                //
              dc.lineChart(compChart)
...