var vis = d3.select("body") .append("svg:svg") //create the SVG element inside the .data([data]) //associate our data with the document .attr("width", w) //set the width and height of our visualization (these will be attributes of the tag .attr("height", h) .append("svg:g") //make a group to hold our pie chart .attr("transform", "translate(" + (r+10) + "," + (h-r-90) + ")"); //move the center of the pie chart from 0, 0 to radius, radius var label = vis.append("text") .text(prov) .attr("x", 0) .attr("y", r+50) .attr("text-anchor","middle"); var label_percent = vis.append("text") .text(function(d){return data[1].label;}) .attr("x", 0) .attr("y", r+30) .attr("text-anchor","middle"); var arc = d3.svg.arc() //this will create elements for us using arc data .outerRadius(r); var pie = d3.layout.pie() //this will create arc data for us given a list of values .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array var arcs = vis.selectAll("g.slice") //this selects all elements with class slice (there aren't any yet) .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) .enter() //this will create elements for every "extra" data element that should be associated with a selection. The result is creating a for every object in the data array .append("svg:g") //create a group to hold each slice (we will have a and a element associated with each slice) .attr("class", "slice"); //allow us to style things in the slices (like text) arcs.append("svg:path") .attr("fill", function(d, i) { return color[i]; } ) //set the color for each slice to be chosen from the color function defined above .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function arcs.append("svg:text") //add a label to each slice .attr("transform", function(d) { //set the label's origin to the center of the arc //we have to make sure to set these before calling arc.centroid d.innerRadius = 0; d.outerRadius = r; return "translate(" + .2*r +","+ (r+30) + ")"; //this gives us a pair of coordinates like [50, 50] });