D3.js donut chart

by slandmann

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>
<br /><img src="http://catalystsecure.com/images/general/logo.png" />

CSS

line{
  fill: transparent;
  display: none;
}

circle{
  fill: #ffd502;
}

rect{
  fill: none;
}

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

JavaScript

var width = 80,
    height = 80,
		primaryCircleSize = width * 0.15,
		circleDistances = [0.50, 0.75, 1.00],
    circleSizes = [0.25, 0.20, 0.15],
    arms = 9,
    armAngle = (360/arms),
    lines =	function(){
			var lines = [],
  			offsetDegrees = 22;
  		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 = 200,
    maskRotationSpeedInMS = 2000,
    maxRadius = armLength + (circleSizes[circleSizes.length - 1] * primaryCircleSize),
    degressOfCircleVisibleOnMask = 180;
    
var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .append("g")
    .attr("id", "spinner")
    .attr("clip-path", "url(#mask)");
    
var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(maxRadius)
    .startAngle(0);
    
d3.select("svg").append("defs")
      .append("clipPath")
      .attr("id", "mask")
      .append("path")
     .datum({
        startAngle:  (0 / 360) * (2*3.14),
        endAngle:  (180 / 360) * (2*3.14)
      })
     .style("fill", "red")
     .attr("d", arc)
     .attr("transform", function(d) { 
          return "rotate("+ -158 + " "+0+","+0+")";
      });
     //.call(spin, maskRotationSpeedInMS);
     
//var sbgRect = svg.append("")

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){
   ...