how to sort to get top 10 from “crossfilter-reduce-find-number-of-uniques”

Question

I am using codes from below to get unique counts.. Crossfilter reduce :: find number of uniques

I use ordering method found here "dc.js/crossfilter -> How to sort data in dc.js chart (like row) - Ascending x Descending".

When I show all the horizontal bars in row chart, ther are sorted in ascending/decending order. But when I tried to show only top 10, then the order is not by value but by alphabetic order of the group.

var donor=cf.dimension (function(d){ return d.donor;});

var donorCount=donor.group().reduce(
    function (p, d) {
        if (d.projectTitle in p.projectTitle)
            p.projectTitle[d.projectTitle]++;
        else {
            p.projectTitle[d.projectTitle] = 1;
            p.projectCount++;
        }
        return p;
    },

    function (p, d) {
        p.projectTitle[d.projectTitle]--;
        if (p.projectTitle[d.projectTitle] === 0) {
        delete p.projectTitle[d.projectTitle];
        p.projectCount--;
        }
        return p;
    },

    function () {
        return {
        projectCount: 0,
        projectTitle: {}
    };
});//this code is borrowed from http://jsfiddle.net/djmartin_umich/3LyhL/

.....
donorChart.width(320).height(600)
    .dimension(donor)
    .group(donorCount)
    .valueAccessor(function (d) {
        return d.value.projectCount;
    })//borrowed code
    .label(function(d){return "("+d.value.projectCount+")"+d.key;})
    .colorAccessor(function (d){return 1;})                   
    .elasticX(true)
    .ordering(function(d){ return -d.value.projectCount; })
    .data(function(d) {
        return d.top(10);
    });//this top ten code does not work as expected    

without last three line of code, the chart show all the donor in sorted order by value. I am very new to javascript and cannot modify the last three line to get my work done.

Answer 1

Ok I got it just now.

donorChart.width(320).height(600)
.data(function (d) {
    return d.order(function (d) {
        return d.projectCount;
    }).top(10);
})
.ordering(function (d) {
    return -d.value.projectCount;
});

Answer 2

You can set an ordering function on the group with group.order. The value returned from this accessor for each row will determine the order of the rows when the top N is taken. group.top will return the top rows in descending order by this value.

In your case you could try this to see if it works:

    donorCount.order(function(d) { return d.projectCount; });

Unfortunately I don't know how dc.js retrieves the groups. If it uses group.top then this should work. If it uses group.all the it won't because the docs say group.all always uses natural ordering.