JSFiddle - React, Tailwind, and code Playground

by JaelB

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.css">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<div id = 'select-something'></div>
		<div id = 'select-process'></div>
		<div id = 'select-subProcess'></div>
		<div id = 'bar'></div>
		<div id = 'stack'></div>

JavaScript

var select1 = dc.selectMenu('#select-something');
			var selectPro = dc.selectMenu('#select-process');
			var selectSubPro = dc.selectMenu('#select-subProcess');
			var bar = dc.barChart('#bar');
			var stack = dc.barChart('#stack');

			var timeFmt = d3.timeParse('%Y-%m-%d %H:%M:%S'); //2015-12-29 02:30:00
          	var numberFormat = d3.format('.2f');

          	d3.csv('https://raw.githubusercontent.com/JaelB/Generic-DC.js-Chart/master/fiddle1.csv').then(function(data){
          		data.forEach(function(d){
               		d.date = timeFmt(d.telegram_date);
            	});

          	var ndx = crossfilter(data);
          	var all = ndx.groupAll();

      		var something = ndx.dimension(function(d){return d.some_code; });
      		var proc = ndx.dimension(function(d){return d.process_no; });
      		var subProc = ndx.dimension(function(d){return [d.process_no, d.subprocess_no]; });

      		var forStack = ndx.dimension(function(d){return [d.process_no, d.subprocess_no]; });

      		var m = ndx.dimension(function(d){return [d.process_no, d.subprocess_no]; });
      		var mGrp = m.group().reduceSum(function(d){return +d.varA; });

      		var aGrp = m.group().reduceSum(function(d){return +d.varB; });

      		var bGrp = m.group().reduceSum(function(d){return +d.varC; });

      		var otherGrp = m.group().reduceSum(function(d){return +d.others; });

      		var nonEmptym = remove_empty_bins(mGrp),
      			nonEmptya = remove_empty_bins(aGrp),
      			nonEmptyb = remove_empty_bins(bGrp),
      			nonEmptyother = remove_empty_bins(otherGrp);

      		var combined = combine_groups(nonEmptym, nonEmptya, nonEmptyb, nonEmptyother);

      		var dist = ndx.dimension(function(d){return [d.process_no, d.subprocess_no]; });
      		var distGroup = dist.group().reduceSum(function(d){return +d.total_dist; });
          
          var nondist = remove_empty_bins(distGroup);

      		select1
                .dimension(something)
                .group(something.group())
 ...