Multidimension Bubble Chart using DC.js - multidimensional-array

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!