random donut charts

by Ryan

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

JavaScript

var color = d3.scale.category10();
var radius = 50;

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

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

var body = d3.select("body");
for(var i=0; i<15; i++){
    var svg = body.append("div").append("svg")
        .attr("width", 2*radius)
        .attr("height", 2*radius)
        .append("g")
            .attr("transform", "translate("+radius+","+radius+")");

    var data = [];
    for(var j=0; j<10; j++){
        data.push(Math.floor(Math.random() * 10));
    }

    var g = svg.selectAll(".arc")
        .data(pie(data)).enter().append("g")
            .attr("class", "arc");
    g.append("path")
        .attr("d", arc)
        .style("fill", function(d, i) {
            return color(i); 
        });
    
}


/*
g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); });

g.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.age; });

*/