D3.js donut chart

by Henry

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<!DOCTYPE html>
<body>

JavaScript

var h = 500;
var w = 500;
var r = h/2;
var letters = ['a','b','c','d','e'];
var N = letters.length;
var buttons = d3.select('body').append('div')
         .selectAll('button')
         .data(letters)
         .enter().append('button')
         .attr('id',function(d){return d;})
         .attr('class','on letterButton')
         .text(function(d){return d;});
var vis = d3.select("body").append("svg")
         .attr("width", w)
         .attr("height", h);
function poly(N,i,li) {
    if (0 === i) {
        return li;}
    li.push(polyPoint(N,i));
    return poly(N,i-1,li);
};
function polyPoint(N,i) {
    return {"x":r*Math.cos(2*Math.PI*i/N - Math.PI/2)+r,"y":r*Math.sin(2*Math.PI*i/N - Math.PI/2)+r}
};
    
function draw(data) {
    console.log(data)
    var v = vis.selectAll("polygon")
        .data(data, function(d) { return d; });
    // enter selection
    v.enter().append("polygon");
    
    // update selection
    v.attr("class", "update")
        .transition()
        .duration(750)
        .attr("points",function(d) { 
        return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
        .attr("stroke","black")
        .attr("stroke-width",2);
    
    // exit selection
    v.exit().attr("class", "exit")
    .transition()
      .duration(750).remove();
};

function update() {
    if (this.classList.contains('on')) {
         d3.select(this).classed('on',false)
         letters.pop(this.id);
    }
    else {
         d3.select(this).classed('on',true)
         letters.push(this.id);
    }
    var N = letters.length;
    draw([poly(N,N,[])]);
};

window.onload = draw([poly(N,N,[])]);
d3.selectAll('.letterButton')
    .on("click",update);