Arc demo

by Igor Cuckovic

JavaScript

var w = 500,
    h = 500;

var data = [10, 80, 50];

var color = d3.scale.ordinal()
            .range(["darkred", "steelblue", "orange"]);

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


var group = canvas.append("g")
                    .attr("transform", "translate(100, 100)");

var r = 100;
var p = Math.PI * 2;

var arc = d3.svg.arc()
            .innerRadius(r - 50)
            .outerRadius(r);

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


var arcs = group.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append("g")
            .attr("class", "arc");

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

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