JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/square/crossfilter/master/crossfilter.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/NickQiZhu/dc.js/v1.4.0/test/dc.css">
<script src="https://rawgithub.com/mbostock/d3/master/d3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/v1.4.0/dc.min.js"></script>

JavaScript

//sample data
var data = [
    {date: Date.UTC(2015, 4, 4), frame: "frame1" },
    {date: Date.UTC(2015, 2, 1), frame: "frame2" },
    {date: Date.UTC(2015, 2, 11), frame: "frame3" },
    {date: Date.UTC(2015, 1, 4), frame: "frame4" },
];
    
//create crossfilter dimensions / groups
    cf = crossfilter(data);
    byAll = cf.groupAll();
    byDate = cf.dimension(function (d) {
        return d.date; 
    });
    byDateGroup = byDate.group();
        
//attach divs to html
    sel = d3.select("body");
    sel.append("div").attr("id", "range");
    sel.append("div").attr("id", "table");
    
//configure timeGraph
    timeGraph = dc.lineChart("#range")
    .width(document.body.clientWidth)
    .on("filtered", function (chart) {
         console.log(byDate.top(Infinity));
    })
    .height(100)
    .dimension(byDate)
    .group(byDateGroup)
    .transitionDuration(500)
    .elasticY(true)
    .x(d3.time.scale().domain([(byDate.bottom(1))[0].date, (byDate.top(1))[0].date + 1000]))
    ;
    
//configure table
    table = dc.dataTable("#table").dimension(byDate)
    .group(function () {
        return "Frames";
    })
    .size(5)
    .columns([
        function (d) { return d.date; },
        function (d) { return JSON.stringify(d.frame); }
    ])
    .sortBy(function(d) {
        d.date;
    })
    .order(d3.ascending)
    ;

//render the graphs
    dc.renderAll();