Multidimension Bubble Chart using DC.js

Question

I am trying to create a bubble chart using DC.js

The sample data I have is:

State_Name  Area    Cities    Villages   Population
A           200      60          1050      10000
B           300      80          1100      15678
C           500      20          2220      97767
D           600      90          3400      50000

So, I want to show total three Bubbles on a bubbleChart. The first bubble should represent total Area and rest two should represent total Cities and total Villages respectively. I have made a barChart for States_Names vs Population where xAxis represent States_name and yAxis represent Population. Now I want whenever I click on one or more bars or you can say States_name I should get the sum of Area, Cities and Villages for all those selected States_name. These sum values for Area, Cities and Villages will represent three bubbles on bubbleChart respectively.

For example: if I click on two bars from barChart which represent State_Name = A and B respectively, I should get three bubbles on bubbleChart. On hovering these three bubbles I should get values total Area = 200+300= 500, Total Cities = 60+80 = 140, total Villages = 1050+1100 = 2150 respectively.

For Positioning of bubbles: I can fix their yAxis position. And, their xAxis position and radius should depend on the value that bubble has. For above example radius of bubble representing total Villages should be larger than the radius of other two bubbles. Similarly, for xAxis position bubble representing total Cities will be on left side of other two bubbles.

I tried code from here: http://jsfiddle.net/gordonwoodhull/37uET/6/ but getting the error: "group.top is not a function". It seems that code works only for rowChart.

var data = [
        {type: 'foo', a: 10, b: 9, c: 11, d: 2},
        {type: 'bar', a: 1, b: 4, c: 2, d: 3},
        {type: 'foo', a: 0, b: 2, c: 1, d: 22},
        {type: 'bar', a: 11, b: 5, c: 6, d: 5}];
    var ndx1 = crossfilter(data);

    function regroup(dim, cols) {
        var _groupAll = dim.groupAll().reduce(
            function(p, v) { // add
                cols.forEach(function(c) {
                    p[c] += v[c];
                });
                return p;
            },
            function(p, v) { // remove
                cols.forEach(function(c) {
                    p[c] -= v[c];
                });
                return p;
            },
            function() { // init
                var p = {};
                cols.forEach(function(c) {
                    p[c] = 0;
                });
                return p;
            });
        return {
            all: function() {
                // or _.pairs, anything to turn the object into an array
                return d3.map(_groupAll.value()).entries();
            }
        };
    }

    var dim = ndx1.dimension(function(r) { return r.a; });
    var sidewaysGroup = regroup(dim, ['a', 'b', 'c', 'd']);

    var typeDim = ndx.dimension(function(r) { return r.type; });

    var sidewaysRow = dc.bubbleChart('#state-donations')
            .width(350).height(300)
            .dimension(dim)
            .group(sidewaysGroup)
            .elasticX(true)
            .maxBubbleRelativeSize(0.3)
                        .x(d3.scale.linear().domain([0, 10]))
                        .y(d3.scale.linear().domain([0, 10]))
                        .r(d3.scale.linear().domain([0, 400]))
                        .elasticY(true)
                        .yAxisPadding(100)
                        .elasticX(true)
                        .xAxisPadding(500);

please help!