JSFiddle - React, Tailwind, and code Playground

by A B Jones

HTML

<body>
<div id="pieChart"></div>
</body>

CSS

#pieChart {                                                 
    height: 360px;                                             
    position: relative;                                       
    width: 360px;                                             
}     	  
.tooltip {                                                   
    background: #f1f0f1;                                         
    box-shadow: 0 0 5px #999999;                              
    color: #333;                                           
    display: none;                                                
    font-size: 14px; 
    font-family: Helvetica;		
    left: 300px;                                                   
    padding: 10px;                                                 
    position: absolute;                                            
    text-align: center;                                       
    top: 220px;                                                     
    width: 80px;                                                  
    z-index: 10;                                                   
}

JavaScript

var data = [
       { label: 'Label1', count: 10 }, 
       { label: 'Label2', count: 20 },
       { label: 'Label3', count: 30 }
      ];
	var margin = {top: 20, right: 40, bottom: 120, left: 80},
	    width = 700 - margin.right - margin.left,
		height = 500 - margin.top - margin.bottom;
		
	var radius = Math.min(width,height)/2;
	var donutWidth = 105; 	
	var color = d3.
        scale.
        ordinal().
        range(['grey', 'darkblue', 'orange']).
        domain(d3.keys(data[0]).
        filter(function(key) {return key === 'label';}));
var svgContainer = d3.
	    select('#pieChart')
	var svg =svgContainer 
	    .append('svg').
		 attr({
		      'width': width + margin.right + margin.left,
			  'height': height + margin.top + margin.bottom
		 }).
	    append('g').
	    attr('transform', 'translate(' + ((width + margin.right + margin.left) / 2) + 
             ',' + ((height + margin.top + margin.bottom) / 2) + ')');	

	var arc = d3.svg.arc().
	    innerRadius(radius - donutWidth). 
	    outerRadius(radius);	
	var arcHover = d3.svg.arc().
        innerRadius(radius - donutWidth). 
	    outerRadius(radius + 10);	
	var pie = d3.layout.pie().
	    value(function(d){return d.count;});
	var tooltip = svgContainer                    
          .append('div')                                                
          .attr('class', 'tooltip');                                                        
     var tooltipLabel =   tooltip.append('div')                                       
          .attr('class', 'label');                                                
     var tooltipCount =    tooltip.append('div')                                         
          .attr('class', 'count');       

	var tooltipPercent =     tooltip.append('div')                        
          .attr('class', 'percent');     

	var path = svg.selectAll('path').
	    data(pie(data)).
	    enter().
	    append('path').
	    attr('d', arc).
		attr('class', 'path').
	    attr('fill',...