Crossfilter for Release/Correction
by Nivaldo
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="http://tvinci.github.io/webs/js/dc.js"></script>
<script src="http://tvinci.github.io/webs/js/crossfilter.js"></script>
<script src="http://tvinci.github.io/webs/js/d3.js"></script>
<link rel="stylesheet" href="http://tvinci.github.io/webs/css/dc.css">
<div id="chart-ring-year"></div>
<div id="chart-line-hitsperday"></div>
JavaScript
var data = [
{"quarter":"Q1","hits":3282,"date":"01/07/2013"},
{"quarter":"Q1","hits":3484,"date":"01/14/2013"},
{"quarter":"Q1","hits":2767,"date":"01/21/2013"},
{"quarter":"Q1","hits":2981,"date":"01/28/2013"},
{"quarter":"Q1","hits":2922,"date":"02/04/2013"},
{"quarter":"Q1","hits":2273,"date":"01/07/2014"},
{"quarter":"Q1","hits":3412,"date":"01/14/2014"},
{"quarter":"Q1","hits":3390,"date":"01/21/2014"},
{"quarter":"Q1","hits":3132,"date":"01/28/2014"},
{"quarter":"Q1","hits":3687,"date":"02/04/2014"}
];
var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
var parseDate2 = d3.time.format("%m/%d").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.qtime = parseDate2((d.date.getMonth()+1)+"/"+d.date.getDate());
d.Year=d.date.getFullYear();
//console.log(d.date.getDate());
});
/************
Year Ring
*************/
var yearRingChart = dc.pieChart("#chart-ring-year");
var yearDim = ndx.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.hits;});
yearRingChart
.width(150).height(150)
.dimension(yearDim)
.group(year_total)
.innerRadius(30);
/************
Stacked Area Chart
*************/
var hitslineChart = dc.lineChart("#chart-line-hitsperday");
var dateDim = ndx.dimension(function(d) {return d.qtime;});
var hits = dateDim.group().reduceSum(function(d) {return d.hits;});
var minDate = new Date("01/01/1900");
var maxDate = new Date("12/30/1900");
var hits_2013=dateDim.group().reduceSum(function(d) {if (d.Year===2013) {return d.hits;}else{return 0;}});
var hits_2014=dateDim.group().reduceSum(function(d) {if (d.Year===2014) {return d.hits;}else{return 0;}});
hitslineChart
.width(700).height(200)
.margins({top: 30, right: 50, bottom: 35, left: 45})
.dimension(dateDim)
//.group(hits_2011,"2011")
.group(hits_2013,"2013")
.stack(hits_2014,"2014")...