JSFiddle - React, Tailwind, and code Playground

by DJ Martin

HTML

<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container" id="main-container">
    <div class="col-md-4 dviz" id="testplot1">
         <h2>Plot 1</h2>

    </div>
    <div class="col-md-4 dviz" id="testplot2">
         <h2>Plot 2</h2>

    </div>
</div>

JavaScript

var chartExample = {
       initChart: function (data) {
           ndx = crossfilter(data);


           // load the data (ndx) and now assign to a variable
           // remove all groupings
           var all = ndx.groupAll();

           // Declare the dimensions
           timeDim = ndx.dimension(function (d) {
               return d.time;
           });
           dfDim = ndx.dimension(function (d) {
               return d.df;
           });
           earlyDim = ndx.dimension(function (d) {
               return d.early;
           });

           // Declare the groupings and reduce
           timeDimGrp = timeDim.group().reduce(
           //add
           function (p, v) {
               p.count++;
               p.haz += v.haz;
               p.avg_haz = p.haz / p.count;
               return p;
           },
           //remove
           function (p, v) {
               p.count--;
               p.haz -= v.haz;
               p.avg_haz = p.haz / p.count;
               return p;
           },
           //init
           function (p, v) {
               return {
                   count: 0,
                   haz: 0,
                   avg_haz: 0
               };
           });

           dfGroup = dfDim.group().reduce(
           //add
           function (p, v) {
               ++p.count;
               p.est += v.est;
               p.avg_est = p.est / p.count;
               p.estse += v.estse;
               p.avg_estse = p.estse / p.count;
               return p;
           },
           //remove
           function (p, v) {
               --p.count;
               p.est -= v.est;
               p.avg_est = p.est / p.count;
               p.estse -= v.estse;
               p.avg_estse = p.estse / p.count;
               return p;
           },
           //init
           function (p, v) {
               return {
                   count: 0,
                   est: 0,
                   estse: 0,
                   avg_est: 0,
             ...