JSFiddle - React, Tailwind, and code Playground

by gasteps

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.2/dc.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reductio/0.6.3/reductio.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.min.css">
<div class='container' style='font: 12px sans-serif;'>

  <div class='row'>
    <div class='span12' id='dc-activities-chart'>
      <h4>Activities</h4>
    </div>
  </div>

  <div class='row'>
    <div class='span12'>
      <table class='table table-hover' id='dc-table-graph'>
        <thead>
          <tr class='header'>
            <th>Activity Date</th>
            <th>Distance</th>
            <th>Accute Load</th>
            <th>Chronic Load</th>
            <th>Accute/Chronic Ratio</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

JavaScript

var activitiesChart = dc.compositeChart("#dc-activities-chart");
var dataTable = dc.dataTable("#dc-table-graph");

var data = [{
  "TimeStamp": "2017-09-01T12:32:04.183",
  "Distance": 1261
}, {
  "TimeStamp": "2017-09-02T12:07:27.033",
  "Distance": 3152
}, {
  "TimeStamp": "2017-09-03T17:11:51.577",
  "Distance": 4245
}, {
  "TimeStamp": "2017-09-04T10:31:21.107",
  "Distance": 3408
}, {
  "TimeStamp": "2017-09-05T12:07:27.033",
  "Distance": 4144
}, {
  "TimeStamp": "2017-09-06T17:11:51.577",
  "Distance": 6245
}, {
  "TimeStamp": "2017-09-07T10:31:21.107",
  "Distance": 21408
}, {
  "TimeStamp": "2017-09-08T12:07:27.033",
  "Distance": 4152
}, {
  "TimeStamp": "2017-09-09T17:11:51.577",
  "Distance": 2245
}, {
  "TimeStamp": "2017-09-10T10:31:21.107",
  "Distance": 1408
}];



// format our data
var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%S");
var dtgFormat2 = d3.time.format("%a %e %b %H:%M");

data.forEach(function(d) {
      d.dtg1 = d.TimeStamp.substr(0, 10) + " " + d.TimeStamp.substr(11, 8);
      d.dtg = dtgFormat.parse(d.TimeStamp.substr(0, 19));
      d.Distance = d3.round(+d.Distance * 0.005, 2);

});

      // Run the data through crossfilter and load 'facts'
      var facts = crossfilter(data);
      var all = facts.groupAll();

      // time chart
      var activityByDay = facts.dimension(function(d) {
        return d3.time.day(d.dtg);
      });

      var activityDistanceByDayGroup = activityByDay.group()
        .reduceSum(function(d) {
          return d.Distance;
        });

    
// 		set up moving avg
		var date_array = [];
		var mapped_date_array = [];

		var activities_infinity = activityDistanceByDayGroup.top(Infinity);
		var i = 0;
		for (i=0; i < activities_infinity.length; i++) {
			date_array.push(activities_infinity[i].key);
		}
		date_array.sort(function (date1, date2) {
			if (date1 > date2) return 1;
			if (date1 < date2) return -1;
		})
		mapped_date_array = date_array.map(function(e) { return e.toDateString(); });

// 		For...