D3js (+crossfilter/dc) Boxplot Performance

I'm trying to use a combination of D3, Crossfilter, and DC generate interactive boxplots, mainly using this example: https://github.com/dc-js/dc.js/blob/master/web/examples/box-plo

Solution 1:

Using a map lookup instead of indexOf will definitely help but it's still unfortunate that you need to jump through such hoops when all you really want as far as I can tell is to just do a basic grouping with the met1 values showing up at the top level because that's what dc.js expects.

It would be very nice if dc.js allowed you to specify an accessor function that allowed you to define how you want the met1 value pulled from the bound objects at the point at which it's needed. d3 uses this pattern everywhere and it's very convenient (and also saves you from this kind of performance intensive juggling).

Barring this sort of change to dc.js, I think your idea for a map lookup is probably the best bet. You can use the closure scope of your reduce functions to store it. Since your records have unique ids you can just use a single map without needing to worry about collisions:

var indexMap = {};
var met1Values = met1Dim.group().reduce(
    function(p, v) {
        indexMap[v.id] = p.length;  // length before push is index of pushed element
        p.push(v.met1);
        return p;
    },
    function(p,v) {
        p.splice(indexMap[v.id], 1);
        return p;
    },
    function() {
        return [];
    }
);