how to properly use reduceSum function of crossfilter

Question

Here is my fiddle: https://jsfiddle.net/eugene_goldberg/LL41xxho/21/

I have the following data array:

var data = [
        {date: "12/27/2012", resolver: "Group 1", volume: 15, escalation: 90, bubble: 5},
        {date: "12/28/2012", resolver: "Group 1", volume: 20, escalation: 10,  bubble: 5},
        {date: "12/29/2012", resolver: "Group 1", volume: 95, escalation: 20, bubble: 10},
        {date: "12/30/2012", resolver: "Group 2", volume: 25, escalation: 30,  bubble: 1},
        {date: "12/31/2012", resolver: "Group 2", volume: 75, escalation: 10,  bubble: 1},
        {date: "01/01/2013", resolver: "Group 2", volume: 44, escalation: 80,  bubble: 1},
        {date: "01/02/2013", resolver: "Group 3", volume: 30, escalation: 10,  bubble: 1},
        {date: "01/03/2013", resolver: "Group 3", volume: 72, escalation: 50,  bubble: 1},
        {date: "01/04/2013", resolver: "Group 3", volume: 51, escalation: 30,  bubble: 1},
        {date: "01/05/2013", resolver: "Group 4", volume: 40, escalation: 10,  bubble: 1},
        {date: "01/06/2013", resolver: "Group 4", volume: 20, escalation: 20, bubble: 1},
        {date: "01/07/2013", resolver: "Group 4", volume: 48, escalation: 10, bubble: 5}
    ];

For my dc.js charting, I need to come up with a total of "volume" for each "resolver".

I have the following dimension and group set up:

var ndx = crossfilter(data);

var resolverDim = ndx.dimension(function(d) { return d.resolver; });

var resolverGroup = resolverDim.group().reduceSum(
            function(p,v) {
                ++p.volume;
                p.resolver = v.resolver;  //This is where the error occurs
                p.bubble = v.bubble;
                p.escalation = v.escalation;
                return p;
            },
            function(p, v) {
                --p.volume;
                p.bubble = 0;
                p.resolver = "";
                p.escalation = 0;

                return p;
            }, function() {
                return { count: 0, volume: 0, escalation:0, resolver: "" };
            }
    );

And here I'm setting up my bubble chart to display a single bubble for each "resolver", and having Y-axis reflect % of escalations, and X-Axis reflect total volume per "resolver":

var bubbleChart  = dc.bubbleChart("#bubble-chart");
    //debugger;
    bubbleChart
            .dimension(resolverDim)
            .group(resolverGroup)
            .x(d3.scale.linear().domain(xRange))
            .y(d3.scale.linear().domain(yRange))

            .width(400)
            .height(400)
            .yAxisPadding(50)
            .xAxisPadding(50)
            .xAxisLabel('Incident Volume') // (optional) render an axis label below the x axis
            .yAxisLabel('% Escalation') // (optional) render a vertical axis lable left of the y axis
            .label(function (p) {
                return p.value.resolver;
            })
            .renderLabel(true)
            .title(function (p) {

                return [
                    "Incident Volume: " + p.value.volume,
                    "% Escalation: " + p.value.escalation,
                    "Resolver: " + p.value.resolver
                ]
                        .join("\n");
            })
            .renderTitle(true)
            .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
            .renderVerticalGridLines(true)
            .maxBubbleRelativeSize(0.3)
            .keyAccessor(function (p) {

                return p.value.volume;
            })
            .valueAccessor(function (p) {
                return p.value.escalation;
            })
            .radiusValueAccessor(function (p) {
                return p.value.bubble;
            });

I'm getting an error: "Uncaught TypeError: Cannot read property 'resolver' of undefined", which is triggered by this line: p.resolver = v.resolver;

When I run this reduceSum separately, I get the correct grouping and summing:

var volumeByResolver = resolverDim.group().reduceSum(function(d) {return d.volume;}); This produces the following result:

volumeByResolver(4) = [
    {"key":"Group 3","value":153},
    {"key":"Group 2","value":144},
    {"key":"Group 1","value":130},
    {"key":"Group 4","value":108}
]

What is the proper way of using reduceSum on my resolverDim, to get this working?

Answer 1

As it turned out, using reduce in place of reduceSum helped solve this issue:

 var resolverGroup = resolverDim.group().reduce(
            //add
            function (p, v) {
                ++p.volume;
                p.resolver = v.resolver;
                p.bubble = v.bubble;
                p.volume = v.volume;
                p.escalation = v.escalation;
                p.volume_sum += v.volume;

                return p;
            },
            //remove
            function (p, v) {
                --p.volume;
                p.resolver = v.resolver;
                p.bubble = v.bubble;
                p.volume = v.volume;
                p.escalation = v.escalation;
                p.volume_sum -= v.volume;
                return p;
            },
            //init
            function (p, v) {
                return {volume: 0, volume_sum: 0};
            }

This line: p.volume_sum += v.volume; helps accumulate the total volume for each group, which is what is subsequently used in my dc.js bubble chart:

var bubbleChart  = dc.bubbleChart("#bubble-chart");

    bubbleChart
            .dimension(resolverDim)
            .group(resolverGroup)
            .x(d3.scale.linear().domain(xRange))
            .y(d3.scale.linear().domain(yRange))

            .width(400)
            .height(400)
            .yAxisPadding(50)
            .xAxisPadding(50)
            .xAxisLabel('Incident Volume')
            .yAxisLabel('% Escalation')
            .label(function (p) {
                return p.value.resolver;
            })
            .renderLabel(true)
            .title(function (p) {

                return [
                    "Resolver: " + p.value.resolver,
                    "Incident Volume: " + p.value.volume_sum,
                    "% Escalation: " + p.value.escalation

                ]
                        .join("\n");
            })
            .renderTitle(true)
            .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
            .renderVerticalGridLines(true)
            .maxBubbleRelativeSize(0.3)
            .keyAccessor(function (p) {
                //console.log('p.volume_sum:  ' + p.value.volume_sum);
                return p.value.volume_sum;
            })
            .valueAccessor(function (p) {
                return p.value.escalation;
            })
            .radiusValueAccessor(function (p) {
                return p.value.bubble;
            });