JSFiddle - React, Tailwind, and code Playground
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)._;
}...