function pageViewsShareByUser(userName){ var margin = {top: 40, right: 40, bottom: 100, left: 40}, width = 650 - margin.left - margin.right, height = 360 - margin.top - margin.bottom; radius = 100, //radius color = d3.scale.category20c(); //builtin range of colors var data = JSON.parse( $('a[data-user="'+ userName +'"]').attr('data-page-visits'));; var vis = d3.select("div#pageViewsShareByUser") .append("svg:svg") //create the SVG element inside the .data([data]) //associate our data with the document .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("svg:g") //make a group to hold our pie chart .attr("transform", "translate(" + radius*2 + "," + radius*2 + ")") //move the center of the pie chart from 0, 0 to radius, radius var arc = d3.svg.arc() //this will create elements for us using arc data .outerRadius(radius); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); var pie = d3.layout.pie() //this will create arc data for us given a list of values .value(function(d) { return d.count; }); //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) .on('mousemove', function (d, i) { div.transition() .duration(200) .style("opacity", 0.9); div.html("Page Views: " + d.data.count + "" ) .style("left", (d3.event.pageX - 57) + "px") .style("top", (d3.event.pageY - 50) + "px") .style("z-index", 10000) }) .on("mouseout", function (d) { div.transition() .duration(500) .style("opacity", 0); }); 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 = radius; // d.outerRadius = radius; return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50] }) .style("text-anchor", "end") //center the text on it's origin .text(function(d, i) { return data[i].page; }); //get the label from our original data array }