Simple D3 Pie Chart

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

by Hao Wu

JavaScript

testPie();

function testPie() {
    var data = [15, 50, 10, 20, 25, 30, 12];

    var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;

    var color = d3.scaleOrdinal()
        .range(["rgb(0, 102, 204)", "rgb(153, 0, 204)", "rgb(204, 102, 0)", "rgb(102, 204, 0)", "rgb(191, 0, 255)", "rgb(255, 0, 0)", "rgb(255, 128, 0)"]);

    var arc = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

    var labelArc = d3.arc()
        .outerRadius(radius - 40)
        .innerRadius(radius - 40);

    var pie = d3.pie()
        .sort(null)
        .value(function (d) { return d; });

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("id", "testPie")
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var pieChart = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc");
    //Pie pieces
    pieChart.append("path")
        .attr("d", arc)
        .attr("opacity", "1.0")
        .on("mouseenter", function (d) {
            var arcOver = d3.arc()
                .outerRadius(radius).innerRadius(0).startAngle(d.startAngle + 0.01).endAngle(d.endAngle - 0.01);
            var transformText = getTranslate(d.startAngle + 0.01, d.endAngle - 0.01, 20);

            d3.select(this)
                .attr("d", arcOver)
                .transition()
                .duration(200).ease(d3.easeBack)
                .attr("transform", transformText)
                .attr("style", "fill: rgb(102, 102, 102)");
        })
        .on("mouseleave", function (d) {
            d3.select(this)
                .attr("d", arc)
                .transition().ease(d3.easeBack)
                .duration(600)
                .attr("transform", "translate(0,0)")
                .attr("style", "fill: " + color(d.data));
        })
        .style("fill", function (d) { return...