Simple D3 Pie Chart

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

HTML

<div id="chart"></div>

JavaScript

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20b();
var image_width = 32;
var image_height = 32;

var data = [
    {"label":"Category A", "value":20, "icon": "http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png"}, 
    {"label":"Category B", "value":50, "icon": "http://files.gamebanana.com/img/ico/sprays/4f69c5f09c7bf.png"}, 
	{"label":"Category C", "value":30, "icon": "http://files.gamebanana.com/img/ico/sprays/4ecb328ca104a.png"}
];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r).innerRadius(r - 200);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        // log the result of the arc generator to show how cool it is :)
        console.log(arc(d));
        return arc(d);
    });


    // add the image
    arcs.append("svg:image").attr("transform", function(d){
        var x = arc.centroid(d)[0] - image_width/2;
        var y = arc.centroid(d)[1] - image_height/2;
        return "translate(" + x + "," + y + ")";
    })
    .attr("xlink:href",function(d) { console.log(d); return d.data.icon;})
    .attr("width", image_width)
    .attr("height", image_height);