dcjs_reduc

by adamist521

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<script src="https://raw.githubusercontent.com/crossfilter/reductio/master/reductio.js"></script>
<div id="compChart"></div>


<img...

JavaScript

// year company value  
data2 = [
  [2001, "AAAAAAA", 200],
  [2002, "AAAAAAA", 300],
  [2003, "AAAAAAA", 400],
  [2001, "BBBBBBB", 150],
  [2002, "BBBBBBB", 250],
  [2000, "CCCCCCC", 500],
  [2001, "CCCCCCC", 600],
  [2002, "CCCCCCC", 550],
  [2001, "DDDDDDD", 100],
  [2002, "DDDDDDD", 300]

];

data2 = data2.map(function(d) {
  return {
    year: d[0],
    company: d[1],
    value: d[2]
  };
});


var ndx2 = crossfilter(data2);
var compDim = ndx2.dimension(function(d) {
  return d.company;
});


/* reduce function version
function reduceAdd(p, v) {
  ++p.count;
  p.total += v.value;
  return p;
}

function reduceRemove(p, v) {
  --p.count;
  p.total -= v.value;
  return p;
}

function reduceInitial() {
  return {count: 0, total: 0};
}

var compGroup = compDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
*/

// reductio version
var compGroup = compDim.group();

reducer = reductio().avg(function(d) { return +d.value; });
reducer(compGroup);

dc.rowChart("#compChart")
  .renderLabel(true)  
  .valueAccessor(function(p){return p.value.avg;})  // reductio
  //  .valueAccessor(function(p){return p.value.total / p.value.count;})  // function version 
  .dimension(compDim)
  .group(compGroup);
  
  
dc.renderAll();