I am having a JSON data and i want to group by a field and then sort by the count.

var data = [{"Name":"Ravi","Country":"India"},
            {"Name":"Alex","Country":"USA"},
            {"Name":"Stew","Country":"UK"},
            {"Name":"Mary","Country":"India"},
            {"Name":"Raju","Country":"India"},
            {"Name":"Bill","Country":"UK"},
            {"Name":"Elisa","Country":"UK"},
            {"Name":"Sharma","Country":"India"}];

and my d3.js query is the following

var countryCount = d3.nest()
                    .key(function(d) { return d.Country; })
                    .rollup(function(a){return a.length;})
                    .entries(data);
console.log(JSON.stringify(countryCount));

and my output is

[{"key":"India","values":4},{"key":"USA","values":1},{"key":"UK","values":3}]

by my desired output is ( sorted by rollup value)

[{"key":"India","values":4},{"key":"UK","values":3},{"key":"USA","values":1}]

How can i do this? I know that the following browser default sort method also gives desired output. But just want to clear whether d3.js provides any inbuilt method to achieve this.

console.log(JSON.stringify(countryCount.sort(function (a, b){
    if (a.values > b.values) {return -1;} 
    else if (a.values < b.values) { return 1;} 
    else  return 0;
})));

I am having a JSON data and i want to group by a field and then sort by the count.

var data = [{"Name":"Ravi","Country":"India"},
            {"Name":"Alex","Country":"USA"},
            {"Name":"Stew","Country":"UK"},
            {"Name":"Mary","Country":"India"},
            {"Name":"Raju","Country":"India"},
            {"Name":"Bill","Country":"UK"},
            {"Name":"Elisa","Country":"UK"},
            {"Name":"Sharma","Country":"India"}];

and my d3.js query is the following

var countryCount = d3.nest()
                    .key(function(d) { return d.Country; })
                    .rollup(function(a){return a.length;})
                    .entries(data);
console.log(JSON.stringify(countryCount));

and my output is

[{"key":"India","values":4},{"key":"USA","values":1},{"key":"UK","values":3}]

by my desired output is ( sorted by rollup value)

[{"key":"India","values":4},{"key":"UK","values":3},{"key":"USA","values":1}]

How can i do this? I know that the following browser default sort method also gives desired output. But just want to clear whether d3.js provides any inbuilt method to achieve this.

console.log(JSON.stringify(countryCount.sort(function (a, b){
    if (a.values > b.values) {return -1;} 
    else if (a.values < b.values) { return 1;} 
    else  return 0;
})));

• javascript
• d3.js

• 1 you can use countryCount.sort(function (a, b){d3.ascending(a.values, b.values)}) – KennyXu Commented Jun 25, 2015 at 9:26
• 1 I know that the browser default sort method also gives desired output. But just want to clear whether d3.js provides any inbuilt method to achieve this. – Sriram Commented Jun 25, 2015 at 9:27
• i don't think it's necessary. array.sort if simple, besides d3 did provide two help function d3.ascending and d3.decending. – KennyXu Commented Jun 25, 2015 at 9:30
• even if d3.js provides inbuilt sort at the end its also gonna use the native sort method only, so doesnt really matter which one you use/choose. – vinayakj Commented Jun 28, 2015 at 18:23
• Using .sortKeys() as suggested by Nisfan, worked for me. – Ola Karlsson Commented Mar 13, 2018 at 16:26

3 Answers 3

D3 provide the condition, ascending descending and you can use inside on sort method. No worries You are using a native javascript method with nice stability

var countryCount = d3.nest()
                    .key(function(d) { return d.Country; })
                    .rollup(function(a){return a.length;})
                    .entries(data)
                    .sort(function(a, b){ return d3.ascending(a.values, b.values); })

console.log(JSON.stringify(countryCount));

No, there is no built-in function giving the result you are after. d3.nest() does have a methode nest.sortValues() which will sort the leaf elements of nested data, but this is meaningless in your case since you did apply .rollup() leaving you with just one leaf per key. As you already mentioned, the way to go is using Array.prototype.sort().

d3 provides a method sortKeys in nest function which will sort your nested list based on the key you selected. You can pass d3.ascending or d3.descending based on your requirement.

From your example:

var countryCount = d3.nest()
                    .key(function(d) { return d.Country; })
                    .sortKeys(d3.ascending)
                    .entries(data);

which will give you:

[{"key":"India","values":4},{"key":"UK","values":3},{"key":"USA","values":1}]