How do I pass bound data to a function in d3? - d3.js

Question

I am trying to make a small multiples chart by following Mike Bostock's example.
This example uses enter().append("svg") to create a new SVG for each data point. In each SVG you would then create the chart.
I have data that is in a CSV file that looks like this:
count, radius
15, 5
10, 3
With this data I'd like to create two SVGs (one for each data point), with the first one containing 15 circles each with a radius of 5, and the second svg containg 10, each with a radius of 3. I have a function drawCircles that I wish to use to draw the circles based on my dataset, however I'm having trouble passing the data through to my function.
Here's my code:
d3.csv("nations.csv", function(data) {
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
drawCircles(function (d) {return +d.count;}, function (d) {return +d.radius;})
I can't seem to pass d.count and d.radius through as arguments to my drawCircles function. Can anyone please help?

Answer 1

Here's a very d3ish way of doing what you are after:
d3.csv("some.csv", function(d){
// coerce your data to numbers
return {
count: +d.count,
radius: +d.radius
}
},
function(data){
// create your svg for each row of data
var s = d3.selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", 600)
.attr("height", 100);
// use a sub-selection to create a circle for each count
s.selectAll('circle')
.data(function(d){
// the bound data will simply be an array with repeating radius
return d3.range(d.count).map(function(_){ return d.radius });
})
.enter()
.append('circle')
// radius is the same for each circle
.attr('r', function(d){
return d;
})
// space the circles so they look good;
.attr('cx', function(d,i,j){
return ((d + 2) * 2) * i + 10;
})
.attr('cy', 50)
.style('fill', 'steelblue');
});
Example here.