D3 Donut Chart With 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.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 ="#diagram").append("svg")
				.append("g")  //add group to leave margin for axis
	//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")
		.enter().append("g").attr("class","arc");//all arcs 
	var paths = gs.append("path")
		.style("fill",function(d){return color(;});
	//add legend to the donut chart

	var legendSize = 15;
	var legendSpacing = 2;
	var legend = svg.selectAll(".legend")
			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+")";
		.text(function(d){return d[0];})
		.attr('x', legendSize + legendSpacing)
		.attr('y', legendSize - legendSpacing);
	//add  tooltip to paths
	var tooltip ="#diagram").append("div").attr("class","tooltip");
		var total = d3.sum(dataset,function(dd){return dd[1];});                                                      
		var percent = Math.round(1000 *[1] / total) / 10;".name").html([0]);         ".count").html([1]);         ".percentage").html(percent + '%');      "display", "block");   
	paths.on("mouseout",function(d){     "display", "none");