JSFiddle - React, Tailwind, and code Playground

by gasteps

HTML

<script src="https://d3js.org/d3.v3.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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.1/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.min.js"></script>
<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' id='dc-pwrdist-chart'>
      <h4>Power Distribution</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>Avg Power</th>
            <th>Duration</th>
            <th>Activity ID</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

CSS

<script src="http://d3js.org/d3.v3.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js' type='text/javascript'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.2/dc.min.js' type='text/javascript'></script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js' type='text/javascript'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/reductio/0.6.3/reductio.min.js" type="text/javascript"></script> <link href='https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <link href='https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.min.css' rel='stylesheet' type='text/css'> <style type="text/css"></style>

JavaScript

var activitiesChart = dc.barChart("#dc-activities-chart");
var PwrDistChart = dc.lineChart("#dc-pwrdist-chart");
var dataTable = dc.dataTable("#dc-table-graph");

var data = [{
  "TimeStamp": "2017-09-06T12:32:04.183",
  "Duration": 3459.518,
  "Distance": 10261,
  "ActivityID": 175508086,
  "AVGPower": 305.5419317525,
  "w15sec": 499.2666666667,
  "w30sec": 479.3333333333,
  "w1min": 470.2666666667,
  "w2min": 441.9416666667,
  "w5min": 417.5166666667,
  "w10min": 410.5616666667,
  "w20min": 342.3141666667,
  "w40min": 306.2033333333,
  "w1hr": 0.0
}, {
  "TimeStamp": "2017-09-08T12:07:27.033",
  "Duration": 2106.755,
  "Distance": 3152,
  "ActivityID": 175647595,
  "AVGPower": 168.8485158649,
  "w15sec": 375.8666666667,
  "w30sec": 327.7333333333,
  "w1min": 271.1833333333,
  "w2min": 261.6083333333,
  "w5min": 0.0,
  "w10min": 0.0,
  "w20min": 0.0,
  "w40min": 0.0,
  "w1hr": 0.0
}, {
  "TimeStamp": "2017-09-07T17:11:51.577",
  "Duration": 1792.025,
  "Distance": 4245,
  "ActivityID": 175670859,
  "AVGPower": 244.2495803022,
  "w15sec": 365.2,
  "w30sec": 342.1333333333,
  "w1min": 328.0333333333,
  "w2min": 290.975,
  "w5min": 276.0566666667,
  "w10min": 268.8316666667,
  "w20min": 246.8858333333,
  "w40min": 0.0,
  "w1hr": 0.0
}, {
  "TimeStamp": "2017-09-09T10:31:21.107",
  "Duration": 15927.885,
  "Distance": 39408,
  "ActivityID": 175971583,
  "AVGPower": 255.0849193803,
  "w15sec": 405.0666666667,
  "w30sec": 389.8666666667,
  "w1min": 367.6666666667,
  "w2min": 350.3916666667,
  "w5min": 318.93,
  "w10min": 300.345,
  "w20min": 281.9883333333,
  "w40min": 259.4733333333,
  "w1hr": 0.0
}];



// 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.AVGPower = d3.round(+d.AVGPower, );
  d.Duration = d3.round(+d.Duration / 60 / 60, 2);
 ...