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{
  stroke-width: 2px;
  stroke: green;
}

circle{
  fill: #ffd502;
}

.primaryCircle{
  fill: #ffd502;
}

path {
 
}

rect{
  fill: none;
}

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

JavaScript

// 500ms / rev

var width = 300,
    height = 300,
		primaryCircleSize = width * 0.15,
		circleDistances = [0.50, 0.76, 1.00],
    circleSizes = [0.25, 0.20, 0.15],
    arms = 9,
    armAngle = (360/arms),
    lines =	function(){
			var lines = [],
  			offsetDegrees = 0;
  		for(var i = 0; i < arms; i++){
  			lines.push((i * armAngle) + offsetDegrees);
  		}
  		return lines;
		},
		armLength = 3 * primaryCircleSize,
    maxRadius = armLength + (circleSizes[circleSizes.length - 1] * primaryCircleSize),
    svg;
    
    
function buildSvg(){
	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("transform", "rotate(-58)")
    //.attr("clip-path", "url(#mask)");
}
      
function buildClipPath(){
	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)
      })
     .attr("d", d3.svg.arc().innerRadius(0).outerRadius(maxRadius).startAngle(0))
     .attr("transform", function(d) { return "rotate("+ -100 + ")"; });
}    

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

function buildLines(){
	svg.append("g")
  	.attr("id", "lineG")
    .selectAll("line")
  	.data(lines)
    .enter()
    .append("g")
    .attr("class", "lineGroup")
    .attr("id", function(d, i){
    	return "lineGroup" + i;
    })
    .append("g")
    .attr("class", "circleGroup")
    .attr("id", function(d, i){
    	return "circleGroup" + i;
    })
}

function buildCirclesOnLines() {
	for(var i = 0; i < circleDistances.length; i++){
    svg.selectAll('.circleGroup')
    	.append("circle")
        .attr("class",...