d3v4 Multiple Pie Charts - Static Data

Based on a question at stack overflow, regarding multiple pie charts on a map.

http://stackoverflow.com/questions/41949622/piechart-over-a-map-point-using-d3-js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

</style>	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>	
</head>
<body>

var width = 960;
	height = 500;

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

var projection = d3.geoMercator().center([81,22]).scale(800).translate([width/2,height/2]);
var path = d3.geoPath().projection(projection);

var g1 = svg.append("g");
		
 d3.json("world.json", function(error, world) {
   
	g1.insert("path", ".land")
		.datum(topojson.feature(world, world.objects.countries))
		.attr("class", "land")
		.attr("d", path);
		
	 g1.append("path")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "mesh")
      .attr("d", path);

});

var g2 = svg.append("g");

var arc = d3.arc()
			.innerRadius(0)
			.outerRadius(30);
			
var pie = d3.pie()
			.sort(null)
			.value(function(d) { return d; });
			
var color = d3.schemeCategory10;

d3.csv("water.csv", function(error, water) {

// Append one g element for each row in the csv and bind data to it:
	var points = g2.selectAll("g")
		.data(water)
		.enter()
		.append("g")
		.attr("transform",function(d) { return "translate("+projection([d.lon,d.lat])+")" })
		.attr("id", function (d,i) { return "chart"+i; })
		.append("g").attr("class","pies");
	
	// Add a circle to it if needed
	points.append("circle")
		.attr("r", 3)
        .style("fill", "red");
	
    // Select each g element we created, and fill it with pie chart:
	var pies = points.selectAll(".pies")
		.data(pie([0,15,30,35,20])) // I'm unsure why I need the leading 0.
		.enter()
		.append('g')
		.attr('class','arc');
	
	pies.append("path")
	  .attr('d',arc)
      .attr("fill",function(d,i){
           return color[i];      
      });
});

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js