Losing data when rendering rowchart using dc.js

Question

I lose data when creating a dc.js rowchart.

  var ndx = crossfilter(data);

  var emailDimemsion = ndx.dimension(function(d) {
    return d.email;
  });

  var emailGroup = emailDimemsion.group().reduce(
    function(p, d) {
      ++p.count;
      p.totalWordCount += +d.word_count;
      p.studentName = d.student_name;
      return p;
    },
    function(p, d) {
      --p.count;
      p.totalWordCount -= +d.word_count;
      p.studentName = d.student_name;
      return p;
    },
    function() {
      return {
        count: 0,
        totalWordCount: 0,
        studentName: ""
      };
    });


  leaderRowChart
    .width(600)
    .height(300)
    .margins({
      top: 0,
      right: 10,
      bottom: 20,
      left: 5
    })
    .dimension(emailDimemsion)
    .group(emailGroup)
    .elasticX(true)
    .valueAccessor(function(d) {
      return +d.value.totalWordCount;
    })
    .rowsCap(15)
    .othersGrouper(false)
    .label(function(d) {
      return (d.value.studentName + ": " + d.value.totalWordCount);
    })
    .ordering(function(d) {
      return -d.value.totalWordCount
    })
    .xAxis()
    .ticks(5);

  dc.renderAll();

The fiddle is here, https://jsfiddle.net/santoshsewlal/6vt8t8rn/

My graph comes out like this:

but I'm expecting my results to be

Have I messed up the reduce functions somehow to omit data?

Thanks

Gordon Gordon · Accepted Answer · 2017-01-09T03:43:44

Unfortunately there are two levels of ordering for dc.js charts using crossfilter.

First, dc.js pulls the top N using group.top(N), where N is the rowsCap value. Crossfilter sorts these items according to the group.order function.

Then it sorts the items again using the chart.ordering function.

In cases like these, the second sort can mask the fact that the first sort didn't work right. Crossfilter does not know how to sort objects unless you tell it what field to look at, so group.top(N) returns some random items instead.

You can fix your chart by making the crossfilter group's order match the chart's ordering:

emailGroup.order(function(p) {
  return p.totalWordCount;
})

Fork of your fiddle: https://jsfiddle.net/gordonwoodhull/0kvatrb1/1/

It looks there is one student with a much longer word count, but otherwise this is consistent with your spreadsheet:

We plan to stop using group.top in the future, because the current behavior is highly inconsistent.

https://github.com/dc-js/dc.js/issues/934

Update: If you're willing to use the unstable latest version, dc.js 2.1.4 and up do not use group.top - the capping is determined by chart.ordering, capMixin.cap, and capMixin.takeFront only.

Losing data when rendering rowchart using dc.js

1 Answers