arundhaj

all that is technology

Categorizing and summing data in d3js

 

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.

Comments