The Missing dc.js charts you want, but could never have
Example Github contribution chart in dc.js and crossfilter
Note: You will need to understand Crossfilter Map-Reduce to do any significant heat mapping with dc.js or Crossfilter
// Include the chart-mixin JS you want to add to dc.js
<script type="text/javascript" src="calendar-chart.js"></script>
//Init your calendar chart
var calendarChart = dc.calendarChart('#daily-volume-chart');
//Set your crossfilter dimension and group map-reduce functions
//Import data via your AJAX methods or use one of d3's convenient shortcut methods
var ndx = crossfilter(data);
var calendarDimension = ndx.dimension(function (datum) {
//("%Y-%m-%d")
return datum.calDate;
});
var calendarGroup = calendarDimension.group().reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.absGain += v.close - v.open;
p.fluctuation += Math.abs(v.close - v.open);
p.sumIndex += (v.open + v.close) / 2;
p.avgIndex = p.sumIndex / p.count;
p.percentageGain = (p.absGain / p.avgIndex) * 100;
p.fluctuationPercentage = (p.fluctuation / p.avgIndex) * 100;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.absGain -= v.close - v.open;
p.fluctuation -= Math.abs(v.close - v.open);
p.sumIndex -= (v.open + v.close) / 2;
p.avgIndex = p.sumIndex / p.count;
p.percentageGain = (p.absGain / p.avgIndex) * 100;
p.fluctuationPercentage = (p.fluctuation / p.avgIndex) * 100;
return p;
},
/* initialize p */
function () {
return {count: 0, absGain: 0, fluctuation: 0, fluctuationPercentage: 0, sumIndex: 0, avgIndex: 0, percentageGain: 0};
}
);
// Set your chart options and data/dimensions
calendarChart.width(900)
.height(130)
.dimension(calendarDimension)
.group(calendarGroup)
.valueAccessor(function (p) {
return p[0].value.percentageGain;
})
.rangeYears([2010,2013])
.renderTitle(true);
// Add .render() to the end of your chart ^^Above or tell dc to renderAll
dc.renderAll();