orange donut

by Igor Cuckovic

CSS

svg text {
    fill: #fff; 
    font-family: "Arial";

}

svg .arc {
    stroke: #fff;
    stroke-width: 1px;
}

JavaScript

var w = 500,
    h = 500;



var data = [[32, "orange"], [62, "lightgrey"]];

// total 92, 30 orange, 62 gray first orange

var color = ["orange", "lightgrey"];


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


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

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

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

var pie = d3.layout.pie()
            .sort(null)
            //.startAngle(Math.PI)
            //.endAngle(Math.PI * 3)
            .value(function(d){return d[0];});




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



arcs.append("path")
        .attr("d", arc)
        .attr("fill", function(d, i){
            
            return d.data[1];
                                 
                                 });