JSFiddle - React, Tailwind, and code Playground

by Austin Lyons

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://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<body><div id="chart-line-hitsperday"></div></body>

JavaScript

var hitslineChart = dc.barChart("#chart-line-hitsperday"); 

            var data = [
                {date: "12/1/2015 12:00", http_404: 2, http_200: 190, http_302: 100},
                {date: "12/1/2015 13:00", http_404: 2, http_200: 10, http_302: 100},
                {date: "12/1/2015 14:00", http_404: 1, http_200: 300, http_302: 200},
                {date: "12/1/2015 15:00", http_404: 2, http_200: 90, http_302: 0},
                {date: "12/1/2015 16:00", http_404: 2, http_200: 90, http_302: 0},
                {date: "12/1/2015 17:00", http_404: 2, http_200: 90, http_302: 0},
		];
        
            var ndx = crossfilter(data); 
                var parseDate = d3.time.format("%x %H:%M").parse;
            data.forEach(function(d) {
		d.date = parseDate(d.date);
		d.total= d.http_404+d.http_200+d.http_302;
	    });
            var dateDim = ndx.dimension(function(d) {return d.date;});
            var hits = dateDim.group().reduceSum(function(d) {return d.total;});
            var minDate = dateDim.bottom(1)[0].date;
            var maxDate = dateDim.top(1)[0].date;
            
	    hitslineChart.width(500)
                         .height(200)
	                 .dimension(dateDim)
	                 .group(hits)
                     .xUnits(d3.time.hours)
	                 .x(d3.time.scale().domain([d3.time.hour.offset(minDate, -1), d3.time.hour.offset(maxDate, 2)])); 
            dc.renderAll();

console.log(minDate);
console.log(minDate.getHours);