d3js: Pairing CSV rows into "g" elements - d3.js

Question

I'm working through re-creating this population pyramid by Mike Bostock. I have a basic question about how .data() works.
I have data in a CSV file like so:
So, I have the number of men and women in each region (dodoma, arusha, etc.). Following Mike's example, I want to create a bar chart where men and women occupy different rects, which overlap with 80% opacity. I want region to be my x-axis, and number of people to be my y-axis. Here are my x- and y-axis scales:
var x = d3.scale.ordinal()
.rangeRoundBands([0, w], 0.05);
var y = d3.scale.linear()
.range([0, h-padding]);
And here's my attempt at grouping men+women over each region:
var regions = svg.append("g")
.classed("regions", true);
var region = regions.selectAll(".region")
.data(dataset)
.enter()
.append("g")
.attr("class", "region")
.attr("transform", function(region) { return "translate(" + x(region) + ",0)"; });
region.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return x(i);
})
.attr("y", function(d) { return h - y(d.people_0); })
.attr("width", barWidth)
.attr("height", function(d) { return y(d.people_0); });
I end up with this:
That is, I end up with 50 g elements which have all the data, and are just creating the full bar chart for each gender-region pair (men from Dodoma, women from Dodoma; men from Tanga, women from Tanga, etc.). The full chart is thus being redrawn 50 times. I have 25 regions, so I want 25 g elements with only the men/women numbers for that region.
I think this could all be tied up in .data(). But I don't know how to tell d3 that I want to group my observations by region, and end up with 2 rects per g.
Here's my JSFiddle (though I don't know how to load my external data - so nothing shows up; any hints on that would be appreciated).
Edited to add:
I've tried using .nest, given Benjamin's comment. So I've got:
dataset = d3.nest()
.key(function(d) { return d.round; })
.key(function(d) { return d.region; })
.rollup(function(v) { return v.map(function(d) { return d.people_0; }); })
.map(dataset);
And am now calling my rects like so:
region.selectAll("rect")
.data(function(region) { return data[round][region]; })
.enter()
.append("rect")
.attr("x", function(d, i) {
return x(i);
})
.attr("y", function(d) { return h - y(d.people_0); })
.attr("width", barWidth)
.attr("height", function(d) { return y(d.people_0); });
No luck. FWIW, console.log(dataset) shows me that the data has, indeed, been rolled up. But I'm still having trouble calling it and associating it with my g.region elements.
Could someone explain what data[round][region] does? I don't understand how d3 is interpreting this.

Answer 1

There are several ways to do this. My approach would be to create a two-level nest for the data, by region and then by sex:
dataset = d3.nest()
.key(function(d) {
return d.region;
})
.sortKeys(d3.ascending)
.key(function(d) {
return d.sex;
})
.entries(dataset);
This will give you a structure that's easy to use later, which will look something like this:
key: "dodoma"
values:
key: "female"
values:
people_0: "43"
region: "dodoma"
sex: "female"
key: "male
values:
people_0: "77"
region: "dodoma"
sex: "male"
key: "killimanj"
values: ...
that's quite verbose, and could be simplified a little (eg using .map). This is a great nest tutorial page for more info.
From then, only a few changes are needed to draw your rects. See this plunk: http://embed.plnkr.co/PPLbQER4FERA6D7T4m9P/preview.
Plunker (http://plnkr.co/) is a good alternative to jsfiddle if you want to link external data by the way.
A few of the changes diverge from Mike's original example, including using class="male" \ "female" in the CSS to get blue \ pink colours, rather than using rect:first-child

Answer 2

http://bost.ocks.org/mike/selection/ explains how data works in d3. if you call it once, it will 'bind' each entry of data to the element you specify.
In your case you have to nest() by region and you get a array of objects that looks like:
['regionA' : [{region, sex, people}, {region, sex, people}], 'regionB' : [{region, sex, people}, {region, sex, people}]
you then do a double iteration of the data. so you first call .data() (its a array of regions this time, ie regionA) and bind it on a group called region
then bind data() again (this time its the array of objects for one region ie [{region, sex, people}, {region, sex, people}]) on rectangles.