// the original knowledge for how to make this chart came from here
// https://bl.ocks.org/mbostock/3887235

// common attributes
var width = 640;
var height = 640;
var radius = Math.min(width, height) / 2;

// generate a random data set
var dataset = [];
var range = 1000;
var n = 25;
for (var i = 0; i < n; ++i)
{
    dataset.push(Math.round(Math.random() * range));
}

function randomColor()
{
    var tokens = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; ++i)
    {
        color += tokens[Math.floor(Math.random() * 16)];
    }
    return color;
}

var colors = [];
for (var i = 0; i < n; ++i)
{
    colors.push(randomColor());
}

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

// [layout.pie](https://github.com/mbostock/d3/wiki/Pie-Layout#pie)
var pieChart = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d; });

// translate to the center of the svg
// <g transform="translate(320,320)"></g>
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// select the previously created group 
// by inducing a selection that doesn't exist (select for class "arc")
// create a new group for each slice of pie in the data set
var g = svg.selectAll(".arc")
    .data(pieChart(dataset))
    .enter()
    .append("g")
    .attr("class", "arc");

// each points to each of the previously created groups
// acting on it will act "for each group"
// so, to each previously selected group we append a path and 
// fill it with a color
g.append("path")
    .attr("d", arc)
    .style("fill", function (d, i) {
        return colors[i];
    });

// append text labels by creating a new arcs at the 
// desired text position
var labelArc = d3.svg.arc()
    .outerRadius(radius - 100)
    .innerRadius(radius - 100);

g.append("text")
    .attr("transform", function(d) { 
        return "translate(" + labelArc.centroid(d) + ")"; 
    })
    .attr("dy", ".35em")
    .text(function(d, i) { return i.toString(); });