Binning in d3.js (reducing the number of elements being displayed)

535 views Asked by At

I'm quite new to d3.js and I got a question regarding binning.
I'm working on a visualization that uses a matrix layout in order to visualize sets (rows) and elements (columns). As the number of sets is very high, I'd like to use some sort of binning, i.e., I'd like to map values from an input domain to some output range in order to reduce the number of items shown on the screen.

Let's consider the following basic code snippet:

var input = [
  { degree: 1, count: 2070 },
  { degree: 2, count: 1311 },
  { degree: 3, count: 398 },
  { degree: 4, count: 93 },
  { degree: 5, count: 9 }    
];

var desired_bins = 3;

In the example above I have an array of length 5 which serves as the input. The desired length of my output is 3 items in this case, given by desired_bins=3.

What I'd like to compute is something like the following:

var output = [
    { range: "1", count: 2070 },
    { range: "2", count: 1311 },
    { range: "3-5", count: 500}    
];

The logic behind the binning should be the following: Each output bin should not contain more than n/k values, where n is the total number of elements in input (2070 + 1311 + ... + 9 = 3881) and k is the number of desired output bins, 3 in this case. So each bin should contain at most 1294 elements. If one item from the input domain already contains more than 1294 elements, than this has to be a separate output bin as it can't be split up.

I was looking into d3.scales which can be used for a lot of things obviously but I'm not sure if they are suitable for my particular use case.

Any ideas how to solve this with the built in functionality of d3? Or do I just need to implement the binning algorithm from scratch?

0

There are 0 answers