create();
function create(){
	data = [];
	for(var x = 0; x < 80; x ++){
		data.push(Math.random()*200 + 150 )
	}
	generateDonut(data)//data is used to generate height of invisible bars
}

function generateDonut(data){
	var divH = parseInt( d3.select("#chartArea").style("height") );
	var divW = parseInt( d3.select("#chartArea").style("width") );

	var margin = {top: 10, right: 10, bottom: 10, left: 10};
	var w = divW - margin.left - margin.right;
	h = divH - margin.top - margin.bottom;
	smallestDim = h < w ? h : w;

	var outerRadius = smallestDim / 4.5,
	    innerRadius = outerRadius / 2;

	var pie = d3.layout.pie()
		.value(function(d){ return 10; })
	  .padAngle(.010);

	var arc = d3.svg.arc()
	    .padRadius(outerRadius)
	    .innerRadius(innerRadius);

	var lines = [];
	var lines2 = [];
	var valueline = d3.svg.line()
		.interpolate("step-after")  //step-after looks cool
	  .x(function(d) { return d[0]; })
	  .y(function(d) { return d[1]; });

	var svg = d3.select("#chartArea").append("svg")
	    .attr("width", w)
	    .attr("height", h)
	  .append("g")
	    .attr("transform", "translate(" + w / 2 + "," + (h) / 2 + ")");

	svg.selectAll("path")
	    .data(pie(data))
	  .enter().append("path")
	    .each(function(d) { 
	    	d.outerRadius = innerRadius + d.data;

	    	//for the lines
	    	var alpha = (d.startAngle + d.endAngle)/2;
	    	var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20
	    	lines.push([alpha, l])
	    	lines2.push([alpha, l - 200])
	    })
	    .attr("d", arc)
	    .style('fill', 'rgba(128,0,0,.2') //change this value to see where the bars should be
	    .style('stroke', 'none');

	drawLines(lines);
	drawLines(lines2);

	function drawLines(points){
		points = points.sort(function(a, b){
			return a[0] - b[0];
		})
		
		for(i in points){
			var alpha = points[i][0];
			var l = points[i][1];
			var x = l * Math.sin(alpha)
			var y = l * Math.cos(alpha)
			points[i] = [x,-y]
		}
		svg.append("path")
	    .attr("class", "line")
	    .style("fill", "none")
	    .style("stroke-width", "2.5px")
	    .style("stroke", "black")
	    .attr("d", valueline(points));
	}
}