Show Label on Aggregate (Crossfilter + Reductio) - d3.js

Question

I have some (simplified) data as follows:
{ "PO": 1353901, "Qty": 1, "Levels": 3 },
{ "PO": 1353901, "Qty": 2, "Levels": 3 },
{ "PO": 50048309,"Qty": 1, "Levels": 1 },
{ "PO": 50048309,"Qty": 4, "Levels": 1 },
{ "PO": 50048309,"Qty": 1, "Levels": 1 }
You see here data for two purchase orders, each row representing a unique product and how much of it was used. You also see how many levels those products were spread out over.
A dimension to help understand cost is material density. That is, how many items were used per level. In the case of 1353901 there were three items used on three levels (Qty gets aggregated, Levels do not), resulting in one item per level.
For 50048309 there are six items used on one level, showing a much higher implant density. This tells me it was a lot of work focused in one place.
Filtering on flat data is easy, and not hard to group into ranges. Take Levels for example:
var levels = ndx.dimension(function (d) {
var level = d.Levels;
if (level == 1) {
return 'One';
} else if (level == 2) {
return 'Two';
} else if (level == 3) {
return 'Three';
} else {
return 'Four +';
}
});
I can easily create groups and ranges within a dimension.
What I cannot seem to do is the exact same thing for aggregates. I want to look at (filter) PO by number of materials used per level. It's not a hard figure to get per purchase order, but it seems hard to look at in groups. Example Below:
https://jsfiddle.net/efefdtcj/2/
Since I started with a Dimension based on aggregating at the PO, I'm getting a row back for each PO.
How do I get one row back per QtyPerLevel range?

Answer 1

I think you need to pre-calculate. That is, add a new property to each PO line with the value of the total quantity in the PO. While you're at it, you might as well calculate QtyPerLevel as well:
{ "PO": 1353901, "Qty": 1, "Levels": 3, "TotalQty": 3, "QtyPerLevel": 1 },
{ "PO": 1353901, "Qty": 2, "Levels": 3, "TotalQty": 3, "QtyPerLevel": 1 },
{ "PO": 50048309,"Qty": 1, "Levels": 1, "TotalQty": 6, "QtyPerLevel": 6 },
{ "PO": 50048309,"Qty": 4, "Levels": 1, "TotalQty": 6, "QtyPerLevel": 6 },
{ "PO": 50048309,"Qty": 1, "Levels": 1, "TotalQty": 6, "QtyPerLevel": 6 }
Then create a Crossfilter dimension on QtyPerLevel and filter or group on that:
var ndx = crossfilter([
{ "PO": 1353901, "Qty": 1, "Levels": 3, "TotalQty": 3, "QtyPerLevel": 1 },
{ "PO": 1353901, "Qty": 2, "Levels": 3, "TotalQty": 3, "QtyPerLevel": 1 },
{ "PO": 50048309,"Qty": 1, "Levels": 1, "TotalQty": 6, "QtyPerLevel": 6 },
{ "PO": 50048309,"Qty": 4, "Levels": 1, "TotalQty": 6, "QtyPerLevel": 6 },
{ "PO": 50048309,"Qty": 1, "Levels": 1, "TotalQty": 6, "QtyPerLevel": 6 }]);
var qtyPerLevelDim = ndx.dimension(function(d) { return d.QtyPerLevel; });
var qtyPerLevelGrp = qtyPerLevelDim.group();