JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<script src="http://tvinci.github.io/webs/js/crossfilter.js"></script>
<script src="http://tvinci.github.io/webs/js/d3.js"></script>
<script src="http://tvinci.github.io/webs/js/dc.js"></script>
<link rel="stylesheet" href="http://tvinci.github.io/webs/css/dc.css">
<div id="chart-line-hitsperday"></div>
<div id="rowchart"></div>
<div id="testcomposed"></div>

JavaScript

//console.clear();
console.log('Running...');
var data = [{
    date: "2013-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 190,
    http_302: 100
}, {
    date: "2014-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 10,
    http_302: 100
}, {
    date: "2013-01-13 07:36:00 -0800",
    http_404: 1,
    http_200: 300,
    http_302: 200
}, {
    date: "2012-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 90,
    http_302: 0
}, {
    date: "2014-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 90,
    http_302: 0
}, {
    date: "2010-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 90,
    http_302: 0
}, {
    date: "2014-01-13 07:36:00 -0800",
    http_404: 1,
    http_200: 10,
    http_302: 1
}, {
    date: "2010-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 90,
    http_302: 0
}, {
    date: "2011-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 90,
    http_302: 0
}, {
    date: "2012-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 90,
    http_302: 0
}, {
    date: "2014-01-13 07:36:00 -0800",
    http_404: 2,
    http_200: 200,
    http_302: 1
}, {
    date: "2014-01-15 07:36:00 -0800",
    http_404: 1,
    http_200: 200,
    http_302: 100
}];

var dtgFormat = d3.time.format("%Y-%m-%d %H:%M:%S %Z");
data.forEach(function(d) {
  d.date = dtgFormat.parse(d.date);
});
var ndx = crossfilter(data);

var dateDim = ndx.dimension(function(d) {return d.date;});
var yearDim = ndx.dimension(function(d) { return d.date.getFullYear(); });
//console.log(dateDim.top(1)[0].date, dateDim.bottom(1)[0].date);
//console.log(dateDim.bottom(Infinity));

var yearGroup = dateDim.group(function(d) { return d.getFullYear(); });
var sumGroup = yearDim.group().reduceSum(function(d) { return d.http_404; });
var twoGroup = yearDim.group().reduceSum(function(d) { return d.http_200; });

sumGroup.top(Infinity).forEach(function(p, i) {
  console.log(p.key + ": " + p.value);
});
//var hits = dateDim.group().reduceSum(function(d) {return...