JSFiddle - React, Tailwind, and code Playground

by raino01r

HTML

<script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<div id="brush"></div>
<div id="test1"></div>
<div id="test2"></div>

JavaScript

var data = [
    {'month': '2017-01', 'f_count':8, 'loc': 'A'},{'month': '2017-02', 'f_count':3, 'loc': 'A'},
    {'month': '2017-03', 'f_count':4, 'loc': 'A'},{'month': '2017-04', 'f_count':0, 'loc': 'A'},
    {'month': '2017-01', 'f_count':9, 'loc': 'B'},{'month': '2017-02', 'f_count':3, 'loc': 'B'},
    {'month': '2017-03', 'f_count':4, 'loc': 'B'},{'month': '2017-04', 'f_count':0, 'loc': 'B'},
    {'month': '2017-01', 'f_count':0, 'loc': 'C'},{'month': '2017-02', 'f_count':0, 'loc': 'C'},
    {'month': '2017-03', 'f_count':0, 'loc': 'C'},{'month': '2017-04', 'f_count':0, 'loc': 'C'}
];
function remove_empty_bins(source_group, f){
    return {all:function (){return source_group.all().filter(function(d){return d.value!=0;});}};
}
var brush_chart = dc.barChart("#brush"), month_chart = dc.barChart("#test1"), loc_chart1 = dc.rowChart('#test2'),
    dateFormat = d3.time.format('%Y-%m');
data.forEach(function(x){x.month = dateFormat.parse(x.month);});
var ndx = crossfilter(data),
    month_dim = ndx.dimension(function(d){return d.month;}),
    month_grp = month_dim.group().reduceSum(function(d){return d.f_count;}),
    month_dim_no_brush = ndx.dimension(function(d){return d.month;}),
    month_grp_no_brush = month_dim_no_brush.group().reduceSum(function(d){return d.f_count;}),
    loc_dim = ndx.dimension(function(d){return d.loc;}),
    loc_grp = remove_empty_bins(loc_dim.group().reduceSum(function(d) {return d.f_count;})),
    time_domain = [d3.time.month.offset(new Date(2017,1,1,2), -2),d3.time.month.offset(new Date(2017,4,1,2), 1)];
brush_chart.width(500).height(80).round(d3.time.month.round)
    .xUnits(d3.time.months).x(d3.time.scale().domain(time_domain))
    .brushOn(true).gap(30).dimension(month_dim).group(month_grp);
month_chart.width(350).height(200).centerBar(true).xUnits(d3.time.months).x(d3.time.scale().domain(time_domain))
    .brushOn(false).gap(10).title(function(d){return '';})
    .dimension(month_dim_no_brush).group(month_grp_no_brush);
// chart...