dcjs_reduc

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>

<div id="console-log"></div>
<img...

JavaScript

var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }


var data = crossfilter([{
  foo: 'one',
  bar: 1
}, {
  foo: 'two',
  bar: 2
}, {
  foo: 'three',
  bar: 3
}, {
  foo: 'one',
  bar: 4
}, {
  foo: 'one',
  bar: 5
}, {
  foo: 'two',
  bar: 6
}, ]);

var dim = data.dimension(function(d) {
  return d.foo;
});
var group = dim.group();

// Equivalent to reductio().avg(function(d) { return d.bar; }), which sets the .sum() and .count() values.
var reducer = reductio()
  .count(true)
  .sum(function(d) {
    return d.bar;
  })
  .avg(true);

// Now it should track count, sum, and avg.
reducer(group);

console.log(group.top(Infinity););
// [ { key: 'one', value: { count: 3, sum: 10, avg: 3.3333333 },
//   { key: 'two', value: { count: 2, sum: 8, avg: 4 },
//   { key: 'three', value: { count: 1, sum: 3, avg: 3 } ]