D3.js donut chart

by solidsource

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<svg></svg>

CSS

line{
  fill: transparent;
  display: none;
}

circle{
  fill: #ffd502;
}

rect{
  fill: none;
}

#circleMask{
  fill: green;
  opacity: 0.5;
}

JavaScript

var width = 250,
    height = 250,
		primaryCircleSize = width * 0.15,
		circleDistances = [0.50, 0.75, 1.00],
    circleSizes = [0.25, 0.20, 0.15],
    arms = 8,
    armAngle = (360/arms),
    lines =	function(){
			var lines = [],
  			offsetDegrees = 15;
  		for(var i = 0; i < arms; i++){
  			lines.push((i * armAngle) + offsetDegrees);
  		}
  		return lines;
		},
		armLength = 3 * primaryCircleSize,
    centerX = width / 2,
    centerY = height / 2,
    chunksRotated = 0,
    maskRotations = 0,
    chunkRotationSpeedInMs = 500,
    maskRotationSpeedInMS = 750,
    maxRadius = armLength + (circleSizes[circleSizes.length - 1] * primaryCircleSize),
    degressOfCircleVisibleOnMask = 245;
    
var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    
var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(maxRadius)
    .startAngle(0);
    
svg.append("defs")
 		.append("clipPath")
    .attr("id", "mask")
    .append("path")
   .datum({endAngle: (degressOfCircleVisibleOnMask / 360) * (2*3.14)})
   .style("fill", "red")
   .attr("d", arc)
   .call(spin, maskRotationSpeedInMS);

function buildPrimaryCircle(){
	svg.append("g")
  	.attr("id", "primaryCircleG")
    .attr("clip-path", "url(#mask)")
  	.append("circle")
    .attr("class", "primaryCircle")
    .attr("r", primaryCircleSize);
    //.attr("clip-path", "url(#mask)");
}

function buildLines(){
	svg.append("g")
  	.attr("id", "lineG")
    .attr("clip-path", "url(#mask)")
    .selectAll("line")
  	.data(lines)
    .enter()
    .append("g")
    .attr("class", "lineGroup")
    .attr("id", function(d, i){
    	return "lineGroup" + i;
    })
    .append("line")
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", -armLength)
    .attr("y2", 0);
}

function buildCirclesOnLines() {
	for(var i = 0; i < circleDistances.length; i++){
    svg.selectAll('.lineGroup')
    .each(function(d,j) { 
    ...