JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<body>

</body>

JavaScript

var data = [
    {name: "A", val: 11975},
    {name: "B", val: 5871},
    {name: "C", val: 1000}
];

var w = 400,
    h = 400,
    r = Math.min(w, h) / 2,
    labelr = r + 30, // radius for label anchor
    color = d3.scaleOrdinal(d3.schemeCategory20),
    donut = d3.pie()
        .startAngle(-90 * (Math.PI/180))
        .endAngle(90 * (Math.PI/180))

    arc = d3.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", "arc")
    .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 textWidth = getTextWidth(d.data.val.toString(), "Arial");
	  	return "translate(" + (arc.centroid(d)[0] - textWidth) + "," + arc.centroid(d)[1] + ")"; 
    })
    .attr("dy", ".35em")
    .attr("text-anchor", function (d) {
        // are we past the center?
        return (d.endAngle + d.startAngle) / 2 > Math.PI ?
            "end" : "start";
    })
    .text(function (d) {
        return d.value.toFixed(2);
    });

function getTextWidth(text, font) {
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}