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/dc.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<div id="line-chart">
	
</div>
<div class="data-table">
    <table class="table">
        <thead>
            <td>
                Label
            </td>
            <td>
                Value
            </td>
        </thead>
    </table>
</div>

JavaScript

var data = [
 {
  "date": "2013-11-01",
  "value": 214
 },
 {
  "date": "2013-11-01",
  "value": 457
 },
 {
  "date": "2013-11-01",
  "value": 534
 },
 {
  "date": "2013-11-01",
  "value": 1262
 },
 {
  "date": "2013-11-01",
  "value": 958
 },
 {
  "date": "2013-11-02",
  "value": 77
 },
 {
  "date": "2013-11-02",
  "value": 310
 },
 {
  "date": "2013-11-02",
  "value": 486
 },
 {
  "date": "2013-11-02",
  "value": 397
 },
 {
  "date": "2013-11-02",
  "value": 800
 },
 {
  "date": "2013-11-03",
  "value": 355
 },
 {
  "date": "2013-11-03",
  "value": 8
 },
 {
  "date": "2013-11-03",
  "value": 638
 },
 {
  "date": "2013-11-03",
  "value": 100
 },
 {
  "date": "2013-11-03",
  "value": 196
 },
 {
  "date": "2013-11-04",
  "value": 1116
 },
 {
  "date": "2013-11-04",
  "value": 26
 },
 {
  "date": "2013-11-04",
  "value": 359
 },
 {
  "date": "2013-11-04",
  "value": 251
 },
 {
  "date": "2013-11-04",
  "value": 53
 },
 {
  "date": "2013-11-05",
  "value": 614
 },
 {
  "date": "2013-11-05",
  "value": 624
 },
 {
  "date": "2013-11-05",
  "value": 95
 },
 {
  "date": "2013-11-05",
  "value": 310
 },
 {
  "date": "2013-11-05",
  "value": 798
 },
 {
  "date": "2013-11-06",
  "value": 592
 },
 {
  "date": "2013-11-06",
  "value": 1182
 },
 {
  "date": "2013-11-06",
  "value": 376
 },
 {
  "date": "2013-11-06",
  "value": 271
 },
 {
  "date": "2013-11-06",
  "value": 30
 },
 {
  "date": "2013-11-07",
  "value": 851
 },
 {
  "date": "2013-11-07",
  "value": 513
 },
 {
  "date": "2013-11-07",
  "value": 95
 },
 {
  "date": "2013-11-07",
  "value": 51
 },
 {
  "date": "2013-11-07",
  "value": 60
 },
 {
  "date": "2013-11-08",
  "value": 161
 },
 {
  "date": "2013-11-08",
  "value": 658
 },
 {
  "date": "2013-11-08",
  "value": 871
 },
 {
  "date": "2013-11-08",
  "value": 989
 },
 {
  "date": "2013-11-08",
  "value": 164
 },
 {
  "date": "2013-11-09",
  "value": 644
 },
 {
  "date": "2013-11-09",
  "value": 524
 },
 {
  "date": "2013-11-09",
  "value": 241
 },
 {
  "date":...