JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id = "svgContent"></div>

CSS

.tooltip{
position: absolute; 
  text-align: center; 
  width: 100px; 
  height: 50px;   
  padding: 2px; 
  font: 12px sans-serif;  
  background: blue;  
  border: 0px;          
  border-radius: 8px;
  color:white;
  box-shadow: -3px 3px 15px #888888;
  opacity:0;  

}

JavaScript

var data = [{"Date":"12/15/2015","Value":5165, "Rate":"1.25%"},
            {"Date":"05/01/2016","Value":2523, "Rate":"9.54%"},
            {"Date":"08/12/2016","Value":4435, "Rate":"21.25%"},
            {"Date":"03/11/2017","Value":1234, "Rate":"7.25%"},
            {"Date":"1/14/2018","Value":6546, "Rate":"1.3%"}];

    var totalValue = 0;
    for (var i = 0; i<data.length;i++)
        totalValue+=data[i].Value;

    width = 250; // Changes pie size as a whole
    height = 250; // Changes pie size as a whole
    radius = Math.min(width-10,height-10)/2;

    var color = d3.scale.category20();
    
    var arc = d3.svg.arc()  
        .outerRadius(radius -50)
        .innerRadius(radius - 10); //Changes width of the slices of the pie

    var arcOver = d3.svg.arc()  
        .outerRadius(radius +50)
        .innerRadius(0);

    var svg = d3.select("#svgContent").append("svg")
        .attr("width",width)
        .attr("height",height)
        .append("g")
        .attr("transform","translate("+width/2+","+height/2+")");
        div = d3.select("body")
        .append("div") 
        .attr("class", "tooltip");

    var pie = d3.layout.pie()
          .sort(null)
          .value(function(d){return d.Value;});

    var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class","arc")
        .on("mousemove",function(d){
            var mouseVal = d3.mouse(this);
            div.style("display","none");
            div
            .html("Date:"+d.data.Date+"</br>"+"Value:"+d.data.Value+"</br>"+"Rate:"+d.data.Rate)
            .style("left", (d3.event.pageX+12) + "px")
            .style("top", (d3.event.pageY-10) + "px")
            .style("opacity", 1)
            .style("display","block");
        })
        .on("mouseout",function(){div.html(" ").style("display","none");})
        .on("click",function(d){
            if(d3.select(this).attr("transform") == null){
               ...