CODEXE

D3 Donut Chart With Tooltip


	#diagram{
		position:relative;
		width:410px;
		height:230px;
		margin:auto;
	}
	.tooltip{
		background: #eee; 
        box-shadow: 0 0 5px #999999;                                    
        color: #333;                                                    
        display: none;                                                  
        font-size: 12px;                                                
        left: 160px;                                                  
        padding: 10px;                                                  
        position: absolute;                                             
        text-align: center;                                             
        top: 80px;                                                      
        width: 100px;                                                    
        z-index: 10; 
		}
              

	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
	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 
	var paths = 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())
		.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);
		
	//add  tooltip to paths
	var tooltip = d3.select("#diagram").append("div").attr("class","tooltip");
	tooltip.append("div").attr("class","name");
	tooltip.append("div").attr("class","count");
	tooltip.append("div").attr("class","percentage");
	
	paths.attr("cursor","pointer").on("mouseover",function(d){
		var total = d3.sum(dataset,function(dd){return dd[1];});                                                      
		var percent = Math.round(1000 * d.data[1] / total) / 10; 
		tooltip.select(".name").html(d.data[0]);                
		tooltip.select(".count").html(d.data[1]);                
		tooltip.select(".percentage").html(percent + '%');             
		tooltip.style("display", "block");   
	});
	paths.on("mouseout",function(d){            
		tooltip.style("display", "none");
	});