JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

body { margin: 50px; }

.ark{
    
}
.ark:hover{
    background-color:red;
    border-color:red;
}

JavaScript

var data = [
    {name: "Art", val: 30.22},  
    {name: "Vehicles", val: 17.11}, 
    {name: "Properties", val: 52.67 }
];

var w = 400,
    h = 400,
    r = Math.min(w, h) / 2,
    labelr = r + 30, // radius for label anchor
    color = d3.scale.category20(),
    donut = d3.layout.pie(),
    arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r);

var vis = d3.select("body")
  .append("svg:svg")
    .data([data])
    .attr("width", w + 150)
    .attr("height", h);

var arcs = vis.selectAll("g.arc")
    .data(donut.value(function(d) { return d.val }))
  .enter().append("svg:g")
    .attr("class", "ark")
    .attr("transform", "translate(" + (r + 30) + "," + r + ")");
 
arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

arcs.append("svg:text")
    .attr("transform", function(d) {
        var c = arc.centroid(d),
            x = c[0],
            y = c[1],
            // pythagorean theorem for hypotenuse
            h = Math.sqrt(x*x + y*y);
        return "translate(" + (x/h * labelr) +  ',' +
           (y/h * labelr) +  ")"; 
    })
    .attr("dy", "1em")
    .attr("font-weight", "bold")
    .attr(":after", "content: '%'")
    .attr("text-anchor", function(d) {
        // are we past the center?
        return (d.endAngle + d.startAngle)/2 > Math.PI ?
            "end" : "start";
    })
    .text(function(d, i) { return d.value.toFixed(2); });