Sized Pie Charts - d3.js

Question

I've placed several pie charts on a map and want to adjust their size based on a corresponding value from a csv-file ("Total", in this example). But no matter how I adjust the radius, the pies won't show. Is there something important I missed?
My code so far:
d3.csv("Bevoelkerung-Altersstruktur-2010-Summe.csv", function drawPies (data) {
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return +d});
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(function(d) {
return d.Total; });
var pies = svg.selectAll('.pie')
.data(data)
.enter()
.append('g')
.attr('class', 'pie')
.attr("transform", function(d) {
return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1] + ")";
});
var color = d3.scale.ordinal()
.range(["#98abc5", "#7b6888", "#a05d56", "#d0743c",])
.domain(d3.range(0,4));
pies.selectAll('.slice')
.data(function(d){
return pie([d.Group1, d.Group2, d.Group3, d.Group4]); })
.enter()
.append('path')
.attr('d', arc)
.style('fill', function(d,i){
return color(i);
});
Here is the link to the complete code.

Answer 1

I could not run in a correct way your code so I moved a few things to get it working under a plnkr.
// You had all the async calls to remote data files nested which I
// recommend not doing. I separated your GeoJSON rendering and your
// pie rendering into two distinct functions.
// Start GeoJSON rendering
d3.csv("Jugendarbeitslosigkeit.csv", function(data) {
//Load in GeoJSON data
d3.json("PolenReg2.json", function(json) {
data.forEach(function(d, i) {
// ...more code
// This is a tricky part
// Since we separated the polygon and pie rendering
// and the polygon calls will take longer due to size
// the group containing the polygons will be rendered
// last, thus rendering the group after your pie group.
// This will make your pies stay behind the polygon paths
// that's why we use the insert. In order to position
// the polygons layer below the pies.
svg
.insert('g', ':first-child')
// ... more code
// End GeoJSON rendering
// Start Pie rendering
d3.csv("Bevoelkerung-Altersstruktur-2010-Summe.csv", function(err, data) {
// Set our large pie function
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return +d.key;
});
// ... more code
// End Pie rendering
The important part is here:
var pies = svg
.append('g') // Add a group with the class 'big-pies'
.attr('class', 'big-pies')
.selectAll('.pie') // Join data to create groups by each polygon (as far as I understand)
.data(data)
.enter()
.append('g')
.attr('class', 'pie')
.attr("transform", function(d) {
var proj = projection([d.lon, d.lat]);
return "translate(" + proj[0] + "," + proj[1] + ")";
})
.selectAll('.slice') // Start pie - data join
.data(function(d) {
// set slice data with additional total value
// so that we can use this value at the attr d
// function
return pie([{
key: d.Kinder,
tot: d.total
}, {
key: d.Jugendliche,
tot: d.total
}, {
key: d.Erwachsene,
tot: d.total
}, {
key: d.Rentner,
tot: d.total
}]);
})
.enter()
.append('path')
.attr('d', function(d, i) {
// return the arc function with outer radius increased by the total value
return d3.svg.arc().innerRadius(0).outerRadius(d.data.tot * 2).call(d, d)
})
.style('fill', function(d, i) {
return c10(i);
});
Plnkr: https://plnkr.co/edit/CwiFnNmfIleo5zZ6BseW?p=preview