JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="http://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<div class="container">
<div id="bitrate-max-chart"></div>
<div id="chart-line-composed"> </div>
    <h2>Bitrate Analysis</h2>
<div class="row">
    <div id="bitrate-move-chart">
        <!--<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>-->
        <span class="reset" style="display: none;">Time Range: <span class="filter"></span></span>
        <a class="reset" href="javascript:bitChart.filterAll();timeSlider.filterAll();dc.redrawAll();"
           style="display: none;">Reset</a>
        <div class="clearfix"></div>
    </div>
</div>

<div class="row" >
    <div id="bitrate-timeSlider-chart">
    </div>
    <p class="muted pull-right" style="margin-right: 15px;">Select a time range to zoom in</p>
</div>
<div class="row">
        <div id="bitrate-move-chart-range">
            <strong>Bitrate Chart</strong>
            <span class="reset" style="display: none;">Range: <span class="filter"></span></span>
            <a class="reset" href="javascript:bitChart.filterAll();timeSlider.filterAll();dc.redrawAll();"
               style="display: none;">Reset</a>
            <div class="clearfix"></div>
        </div>
</div>

<div class="row">
    <div>
        <div class="dc-data-count">
            <span class="filter-count"></span> selected out of <span class="total-count"></span> Records | <a
                href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
        </div>
    </div>
    <table class="table table-hover dc-data-table">
    </table>
</div>

<div class="clearfix"></div>

<!--<a...

CSS

#bitrate-timeSlider-chart g.y {
            display: none;
        }
     #logo {
            margin-right: 2em;
            margin-top: 2em;
            display: none;
        }

JavaScript

'use strict';
// chart objects 
var bitChart = dc.lineChart('#bitrate-move-chart');
var timeSlider = dc.barChart('#bitrate-timeSlider-chart');
var bitCount = dc.dataCount('.dc-data-count');
var bitrateTable = dc.dataTable('.dc-data-table');

// 15 Min Interval - copied from https://github.com/mbostock/d3/blob/master/src/time/interval.js
var d3_date = Date;
function d3_time_interval(local, step, number) {
    function round(date) {
        var d0 = local(date), d1 = offset(d0, 1);
        return date - d0 < d1 - date ? d0 : d1;
    }
    function ceil(date) {
        step(date = local(new d3_date(date - 1)), 1);
        return date;
    }
    function offset(date, k) {
        step(date = new d3_date(+date), k);
        return date;
    }
    function range(t0, t1, dt) {
        var time = ceil(t0), times = [];
        if (dt > 1) {
            while (time < t1) {
                if (!(number(time) % dt)) times.push(new Date(+time));
                step(time, 1);
            }
        } else {
            while (time < t1) times.push(new Date(+time)), step(time, 1);
        }
        return times;
    }
    function range_utc(t0, t1, dt) {
        try {
            d3_date = d3_date_utc;
            var utc = new d3_date_utc();
            utc._ = t0;
            return range(utc, t1, dt);
        } finally {
            d3_date = Date;
        }
    }
    local.floor = local;
    local.round = round;
    local.ceil = ceil;
    local.offset = offset;
    local.range = range;
    var utc = local.utc = d3_time_interval_utc(local);
    utc.floor = utc;
    utc.round = d3_time_interval_utc(round);
    utc.ceil = d3_time_interval_utc(ceil);
    utc.offset = d3_time_interval_utc(offset);
    utc.range = range_utc;
    return local;
}
function d3_time_interval_utc(method) {
    return function (date, k) {
        try {
            d3_date = d3_date_utc;
            var utc = new d3_date_utc();
            utc._ = date;
            return method(utc, k)._;
        }...