pie chart block

<!DOCTYPE html>
<html>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body></body>
<script>

var width = 512;
var height = 600;
var svg = d3.select('body').append('svg')
  .attr({width: width, height: height});

d3.csv('201402_weather_data.csv', function(err, data) {
  if (err) { throw err; }
	
	var species = d3.nest()
    .key(function(d) { return d.zip})
    .entries(data); 
 
	var zipTemps = species.map(function(zip) {
    //console.log(zip)
  	var mean = d3.mean(zip.values, 					
			function(d) {  return +d.Max_Temperature_F});
    
    return {
      zipTemps: mean,
      species: zip.key,
    };
  });
  
  console.log(zipTemps);
  
  
  //var showProps = ['Max_Temperature_F'];
	//var text = JSON.stringify( zipTemps, showProps, 2);
  //d3.select('body').append('code')
  //  .append('pre')
  //  .text(text);})
	//;

//Pie Chart  
  
var myPieLayout = d3.layout.pie()
    .value(function(d) { return d.zipTemps; });
  
var layoutData = myPieLayout(zipTemps);
  
var arc = d3.svg.arc()
		.innerRadius(0)
		.outerRadius(120);

svg.append('g')
		.attr('transform', 'translate(269, 300)')
		.selectAll('path').data(layoutData)
		.enter().append('path')
    .attr({
      	d:arc,
      	fill:color,
        stroke: 'rgba(0,0,0.1)',
      	'stroke-width': 4,
    });
});
 
  
  
function color(d) {
  if (d.data.species === '94107') {
    return '#2ecc71';
  } else if(d.data.species === '94041') {
    return '#3498db'; 
  } else if(d.data.species === '94063') {
  return '#e74c3c';
	}
	return '#99e63b' ;  };

</script>
</html>

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