Categorizing an array into different buckets in d3js with d3.nest.
For example, consider a dataset that contains an array of integers ranging values from 1 to 200. If we had to group this array into the following four buckets, as defined as;
- value >= 150, categorize as excess-heat
- value >= 140, categorize as heat
- value >= 130, categorize as almost-heat
- value < 130, categorize as cool
// Initializing an array with some dummy values
var heatArray = d3.shuffle(d3.range(200));
var heatIntermediateArray = d3.nest()
.key(function(d) {
return d >= 150 ?
"excess-heat" :
(d >= 140 ?
"heat" :
(d >= 130 ?
"almost-heat" : "cool"));
})
.rollup(function(d) {
return d.length;
}).entries(heatArray);
The intermediate array generated in the previous step contains the categorized array of four buckets with the count in each bucket.
[
{ "key" : "excess-heat", "values" : 50},
{ "key" : "cool", "values" : 130},
{ "key" : "almost-heat", "values" : 10},
{ "key" : "heat", "values" : 10}
]
If the required format is something different, it could be remapped with the custom label.
var heatBucket = heatIntermediateArray.map(function(d) {
return {"label": d.key, "value": d.values}
});
And the final output would be of the following format.
[
{ "label" : "excess-heat", "value" : 50 },
{ "label" : "cool", "value" : 130 },
{ "label" : "almost-heat", "value" : 10 },
{ "label" : "heat", "value" : 10 },
]
Hope this helps.