CODEXE

D3 Donut Chart

Note:

Donut chart is created based on the pie chart. Just set the inner radius to a positive value.


	var margin = {top: 20, right: 20, bottom: 50, left: 70};
    	var width = 500 - margin.left - margin.right;
   	var height = 300 - margin.top - margin.bottom;
	
	var radius = Math.min(width,height)/2;
	
	var color = d3.scaleOrdinal().range(d3.schemeCategory20b);//Constructs a new ordinal scale with an empty domain and the specified range. If a range is not specified, it defaults to the empty array; an ordinal scale always returns undefined until a non-empty range is defined.
	
	
	//add svg with margin !important
	//this is svg is actually group
	var svg = d3.select("#diagram").append("svg")
				.attr("width",width)
				.attr("height",height)
				.append("g")  //add group to leave margin for axis
				.attr("transform","translate("+width/2+","+height/2+")");
	
	
	//the code above should be same
	
	var dataset = [["A", 20], ["B", 90], ["C", 50], ["D", 33], ["E", 95],
                ["F", 12], ["G", 44], ["H", 67], ["I", 21], ["J", 88]];
	//arc to draw the chart. pie to generate the data for chart from the input
	//pie data example
	/*[ 
	{"data": dataset[0], "value": 1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0}, 
	{"data": dataset[1], "value": 1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0}, 
	{"data": dataset[2], "value": 2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0}, 
	{"data": dataset[3], "value": 3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0}, 
	{"data": dataset[4], "value": 5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0}, 
	{"data": dataset[5], "value": 8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0}, 
	{"data": dataset[6], "value": 13, "index": 1, "startAngle": 2.443460952792061, "endAngle": 3.956079637853813, "padAngle": 0}, 
	{"data": dataset[7], "value": 21, "index": 0, "startAngle": 0.000000000000000, "endAngle": 2.443460952792061, "padAngle": 0} 
	]*/
	var donutWidth = 20;
	var arc = d3.arc().outerRadius(radius).innerRadius(radius-donutWidth);//to generate the chart
	var pie = d3.pie()
				.value(function(d){return d[1];});//sort the value to show from the 12 0'clcok
	var gs = svg.selectAll(".arc")
		.data(pie(dataset))
		.enter().append("g").attr("class","arc");//all arcs 
	gs.append("path")
		.attr("d",arc)
		.style("fill",function(d){return color(d.data);});
		
	//add legend to the donut chart
	var legendSize = 15;
	var legendSpacing = 2;
	var legend = svg.selectAll(".legend")
		.data(color.domain())//color domain is input data which is d.data.
		.enter()
		.append("g")
		.attr("transform",function(d,i){
			var legendH = color.domain().length*(legendSize+legendSpacing);//total height of legends
			var legendY = i*(legendSize+legendSpacing) - legendH/2;//
			var legendX = -legendSize;
			return "translate("+legendX+","+legendY+")";
		});
	legend.append("rect")
		.attr("width",legendSize)
		.attr("height",legendSize)
		.attr("fill",color)
		.attr("stroke",color);
	legend.append("text")
		.text(function(d){return d[0];})
		.attr('x', legendSize + legendSpacing)
		.attr('y', legendSize - legendSpacing);