pie_multiple.js

/* ------------------------------------------------------------------------------
 *
 *  # D3.js - multiple pie charts
 *
 *  Demo d3.js multiple pie charts setup
 *
 *  Version: 1.0
 *  Latest update: August 1, 2015
 *
 * ---------------------------------------------------------------------------- */

$(function () {

    // Initialize chart
    pieMultiple('#d3-pie-multiple', 110, 10);

    // Chart setup
    function pieMultiple(element, radius, margin) {


        // Basic setup
        // ------------------------------

        // Define the data as a two-dimensional array of numbers
        var data = [
            [11975,  5871, 8916, 2868],
            [ 1951, 10048, 2060, 6171],
            [ 8010, 16145, 8090, 8045],
            [ 1013,   990,  940, 6907]
        ];

        // Colors
        var colors = d3.scale.category10();


        // Create chart
        // ------------------------------

        // Insert an svg element (with margin) for each row in our dataset
        var svg = d3.select(element)
            .selectAll("svg")
            .data(data)
            .enter()
            .append("svg")
                .attr("width", (radius + margin) * 2)
                .attr("height", (radius + margin) * 2)
                .append("g")
                    .attr("class", "d3-arc")
                    .attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")");


        // Construct chart layout
        // ------------------------------

        // Arc
        var arc = d3.svg.arc()
            .innerRadius(0)
            .outerRadius(radius);


        //
        // Append chart elements
        //

        // The data for each svg element is a row of numbers (an array)
        svg.selectAll("path")
            .data(d3.layout.pie())
            .enter()
            .append("path")
                .attr("d", arc)
                .style("stroke", "#fff")
                .style("fill", function(d, i) { return colors(i); });
    }
});