JSFiddle - React, Tailwind, and code Playground

by yccu

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>
                Date
            </td>
            <td>
                Count
            </td>
            <td>
                Average
            </td>
        </thead>
    </table>
</div>

JavaScript

var data = [
 {
  "date": "2013-11-01",
  "label": "A",
  "value": 214
 },
 {
  "date": "2013-11-01",
     "label": "B",
  "value": 457
 },
 {
  "date": "2013-11-01",
     "label": "C",
  "value": 534
 },
 {
  "date": "2013-11-01",
     "label": "D",
  "value": 1262
 },
 {
  "date": "2013-11-01",
     "label": "E",
  "value": 958
 },
 {
  "date": "2013-11-02",
     "label": "A",
  "value": 77
 },
 {
  "date": "2013-11-02",
     "label": "B",
  "value": 310
 },
 {
  "date": "2013-11-02",
     "label": "C",
  "value": 486
 },
 {
  "date": "2013-11-02",
     "label": "D",
  "value": 397
 },
 {
  "date": "2013-11-02",
     "label": "E",
  "value": 800
 },
 {
  "date": "2013-11-03",
     "label": "A",
  "value": 355
 },
 {
  "date": "2013-11-03",
     "label": "B",
  "value": 8
 },
 {
  "date": "2013-11-03",
     "label": "C",
  "value": 638
 },
 {
  "date": "2013-11-03",
     "label": "D",
  "value": 100
 },
 {
  "date": "2013-11-03",
     "label": "E",
  "value": 196
 },
 {
  "date": "2013-11-04",
     "label": "A",
  "value": 1116
 },
 {
  "date": "2013-11-04",
     "label": "B",
  "value": 26
 },
 {
  "date": "2013-11-04",
     "label": "C",
  "value": 359
 },
 {
  "date": "2013-11-04",
     "label": "D",
  "value": 251
 },
 {
  "date": "2013-11-04",
     "label": "E",
  "value": 53
 },
 {
  "date": "2013-11-05",
     "label": "A",
  "value": 614
 },
 {
  "date": "2013-11-05",
     "label": "B",
  "value": 624
 },
 {
  "date": "2013-11-05",
     "label": "C",
  "value": 95
 },
 {
  "date": "2013-11-05",
     "label": "D",
  "value": 310
 },
 {
  "date": "2013-11-05",
     "label": "E",
  "value": 798
 },
 {
  "date": "2013-11-06",
     "label": "A",
  "value": 592
 },
 {
  "date": "2013-11-06",
     "label": "B",
  "value": 1182
 },
 {
  "date": "2013-11-06",
     "label": "C",
  "value": 376
 },
 {
  "date": "2013-11-06",
     "label": "D",
  "value": 271
 },
 {
  "date": "2013-11-06",
     "label": "E",
  "value": 30
 },
 {
  "date": "2013-11-07",
     "label":...