Simple numberDisplay from reduceCount with dc.js

Question

I'm starting with dc and I'm turning around for several days about a simple thing I can't do. I've got a classical data sample of payments with this structure: {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"} I just want to display the number of different kind of types of payments. There are 3. I can display it in the console, but not in the the chart. I have tried lot of different things but none is working. I have something working with reduceSum, but not with reduceCount, the structure of the object seems to be different. Thanks for your help

This is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>Crossfilter</title>
    <script src="crossfilter.js"></script>
    <script src="d3.js"></script>
    <script src="dc.js"></script>
</head>
<body>

<div class="container">
My count :    
<div id="category-count"></div>

<script type="text/javascript">
var payments = crossfilter([
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
]);

var paymentsByType = payments.dimension(function(d) { return d.type; });
var countType = paymentsByType.group().reduceCount();
console.log(countType.size());

dc.numberDisplay('#category-count')
  .formatNumber(d3.format("d"))
  .group(countType)
  .valueAccessor( function (d) { return d.size(); } );

</script>
</div>
</body>
</html>

Gordon Gordon · Accepted Answer · 2017-06-12T19:23:30

Normally the numberDisplay is expecting to show the result of an aggregation - so it will call groupAll.value() if it's given a groupAll object. Or if it's given an ordinary group it will call group.all() and then choose the top one according to the chart.ordering() function.

Displaying the number of bins is a slightly different problem, and I suspect this is where you're running into trouble. (I can't explain why something would work for reduceSum but not reduceCount, as those should produce the same shape of result.)

I'd suggest using a "fake groupAll", like this:

function bin_counter(group) {
  return {
    value: function() {
      return group.all().length;
    }
  };
}

Apply it to the group before passing it to the widget, and then use an identity accessor, since the default accessor is not helpful here:

dc.numberDisplay( /* ... */ )
  // ...
  .group(bin_counter(countType))
  .valueAccessor(x => x); // or function(x) { return x; } in ES5

Simple numberDisplay from reduceCount with dc.js

1 Answers