g.Raphael example from @kyle

g.pie.js

Raphael.fn.pieChart = function (cx, cy, r, rin, values, options) {
    var paper = this,
        rad = Math.PI / 180,
        colors = options.colors
        chart = this.set();
            
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + (r) * Math.cos(-startAngle * rad),
            x2 = cx + (r) * Math.cos(-endAngle * rad),
            y1 = cy + (r) * Math.sin(-startAngle * rad),
            y2 = cy + (r) * Math.sin(-endAngle * rad),
            xx1 = cx + rin * Math.cos(-startAngle * rad),
            xx2 = cx + rin * Math.cos(-endAngle * rad),
            yy1 = cy + rin * Math.sin(-startAngle * rad),
            yy2 = cy + rin * Math.sin(-endAngle * rad);
        
        return paper.path(["M", xx1, yy1,
                    "L", x1, y1, 
                    "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
                    "L", xx2, yy2, 
                    "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
                  ).attr(params);
        

    }
    
    var angle = 0,
        total = 0,
        i = 0,
        process = function (j) {
            var value = values[j].percent,
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = colors[i],
                ms = 100,
                delta = 30,
                slice = sector(cx, cy, r + (value + 10), angle, angle + angleplus, {fill: color, stroke: "#FFF", opacity: (value / 100), "stroke-width": 0, "stroke-opacity": 0}),
                p = sector(cx, cy, r + (value), angle, angle + angleplus, {fill: color, stroke: "#FFF", "stroke-width": 0,"stroke-opacity": 0}),
                txt = paper.text(cx, cy + 30, values[j].label).attr({fill: color, stroke: "none", opacity: 0, "font-size": 13, "font-weight": "bold"}).toFront();
            
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "backOut");
                //txt.stop().animate({opacity: 1}, ms, "ease");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "backOut");
                txt.stop().animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            i + 1;
        };
    
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i].percent;
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    
    // LABEL
    paper.add([
        {
            type: "circle",
            cx: cx,
            cy: cy,
            r: (rin + 3),
            fill: "#FFF",
            "fill-opacity": 0,
            "stroke-width": 7,
            "stroke-opacity": 0.05
        }
    ]);
    paper.text(cx,cy - 12,values.length).attr({fill: "#464039", stroke: "none", "font-size": 28,"font-weight": "bold", "font-family": "skolar"})
    paper.text(cx,cy + 12, "causes").attr({fill: "#464039", stroke: "none", opacity: 0.5, "font-size": 14})
        
    return chart;
};