DonutFinal

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body style="background-color:#172026; font-family:'roboto'">
<svg></svg>
<script>
  var  index=0
  var w = 200;    
 	var padding = 50;
  var arc
  var colors = d3.scaleOrdinal()
  .range(["#F0B69A","#EFDFB4","#D2A4AC","#9F7A93","#894483"])
  var data = [
       [100, 150, 200, 250, 300],
      [80, 150, 200, 250, 330],
      [25, 150, 200, 250,370]
    ];
    
  var t = d3.transition(1000)
  
  var svg = d3.select('svg')
  	.append('g')
  	.attr('transform', 'translate(200,200)');
 
  
  function updatePie(data){
   	console.log(data)
  	 arc = d3.arc()
    .innerRadius(75)
    .outerRadius(100)
 		.padAngle(.000)
  	.startAngle(d => d.startAngle)
    .endAngle(d => d.endAngle);
    
    var arcOver = d3.arc()
      .innerRadius(75)
      .outerRadius(120)
    	.startAngle(d => d.startAngle)
    	.endAngle(d => d.endAngle);
       
    var legend = svg.append("g")
	  .attr("class", "legend")
    .attr("height", 100)
	  .attr("width", 100)
    .attr('transform', 'translate(0,-120)')     
    
    var legendIcon =legend.selectAll('circle')   //update selections
      .data(data, (d,i)=>i)          
    var legendText =legend.selectAll('text')
     .data(data)   
    
    var pies = d3.pie()(data);    
    var pieChart = svg.selectAll('path')
  	.data(pies)    														
        
    legendIcon.exit().remove();                  //exit selections
    svg.selectAll("circle").remove(); 
    legendText.exit().remove()
    svg.selectAll("text").remove();
    pieChart.exit().remove();    						
       
    
  var legendIconEnter=legendIcon.enter()        //enter selections
     .append("circle")
	  	   
               
   var legendTextEnter = legendText.enter()
     .append("text") 
      
    
    var enter = pieChart.enter().append('path')   
  	.attr('stroke-width', '0')    															
    
    
   legendText = legendTextEnter.merge(legendText)					//merge slections
	   .attr("x", w - 52)
     .attr("y", function(d, i){ return i *  20 + 3;})
	   .text((d, i) => data[i])
     .attr('fill', (d, i) => colors(i)) ;
    
   legendIcon= legendIconEnter.merge(legendIcon)
      .attr("cx", w - 65)
      .attr("cy", function(d, i){ return i *  20;})
	  	.attr("r", 3)
	  	.attr('fill', (d, i) => colors(i))  
    
    pieChart = enter.merge(pieChart)            
    .attr("d", arc)
    .on('mouseenter', function(d) {     
      d3.select(this).transition()
          .duration(1)
          .attr("d", arcOver);
      }) 
     .on("mouseout", function(d) {
        d3.select(this).transition()
          .duration(1)
          .attr("d", arc);
      })		
    .transition().duration(2500).attrTween("d", arcTween)
    .attr('fill', (d, i) => colors(i))
    
      
     
    
     svg.append("text")
   .attr("text-anchor", "middle")
   .text(data.length + ' New Cases')
   .attr('fill', '#fff')
   .attr('font', 'roboto') 
    
  }
   setInterval(() => {
      updatePie(data[index % 3]);
      index += 1;
    }, 3000);
  
  
  function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
} 
  </script>
</body>

https://d3js.org/d3.v4.min.js