D3 Examples

Richard Dalton

Pie Chart

We can draw a pie chart by using svg to render arcs.

The conversion of data to appropriate arc sizes is handled by d3's pie layout.

    var dataset = [ 5, 10, 20, 20, 6, 25 ];

    var w = 500;
    var h = 500;

    var svg = d3.select("#draw_here")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var outerRadius = w / 2;
    var innerRadius = w / 4;

    var arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

    var pie = d3.layout.pie();

    var color = d3.scale.category10();

    var arcs = svg.selectAll("g.arc")
            .data(pie(dataset))
            .enter()
            .append("g")
            .attr("class", "arc")
            .attr("transform", "translate("+ outerRadius + ", " + outerRadius +")");

    arcs.append("path")
            .attr("fill", function(d, i) {
                return color(i)
            })
            .attr("d", arc);

    arcs.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.value;
            });