Simple D3 Pie Chart

aAn example of a simple pie chart drawn with D3.js

by abenrob

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<div id="map" style="width: 500px; height: 400px"></div>

JavaScript

var circlejson = {"objects":[
{"circle":{"coordinates":[-41.28,174.77]},
 "pie":[20,30,25,25]
},
{"circle":{"coordinates":[-41.29,174.76]},
 "pie":[20,30,25,25]
},
{"circle":{"coordinates":[-41.30,174.79]},
 "pie":[20,30,25,25]
},
{"circle":{"coordinates":[-41.27,174.80]},
 "pie":[20,30,25,25]
},
{"circle":{"coordinates":[-41.29,174.78]},
 "pie":[20,30,25,25]
}
]};

var m = 0,r = 50,z = d3.scale.category20c();

var arc = d3.svg.arc()
    .outerRadius(r - 10)
    .innerRadius(0);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { 
        conssole.log(d);
        return d.population; 
    });

var map = L.map('map').setView([-41.2858, 174.7868], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    .addTo(map);

/* Initialize the SVG layer */
map._initPathRoot()    

/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svg"),
    g = svg.append("g");

var dafunc = function(collection) {
    /* Add a LatLng object to each item in the dataset */
    collection.objects.forEach(function(d) {
        d.LatLng = new L.LatLng(d.circle.coordinates[0],
                                d.circle.coordinates[1])
    })
    
    var feature = g.selectAll(".pie-point")
    .data(collection.objects)
    .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
    .append("svg:g")
    .attr("class","pie-point");
    
    // NOT SURE HOW TO ASSOCIATE THE NESTED .pie ARRAY TO THE PIE CHART HERE...
    g.selectAll("path")
    .data(d3.layout.pie())
    .enter().append("svg:path")
    .attr("d", d3.svg.arc()
          .innerRadius(r / 2)
          .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });
    
    map.on("viewreset", update);
    update();
    
    function update() {
        feature.attr("transform", 
                     function(d) { 
                         return "translate("+ 
                             map.latLngToLayerPoint(d.LatLng).x +","+...