JSFiddle - React, Tailwind, and code Playground

HTML

<div id="donut" class="donut"></div>

JavaScript

var dataset = {
  ringOne: [{"label":"70%", "value":70}, 
  			{"label":"10%", "value":10}, 
  			{"label":"20%", "value":20}],

  ringTwo: [{"label":"70%", "value":70}, 
  			{"label":"10%", "value":10}, 
  			{"label":"20%", "value":20}],
};


var width = 460,
	height = 300,
	cwidth = 45,
	outerR = 100,
	color = d3.scale.ordinal().range(["#07e", "#00aced", "#e32"]);

var svgDonut = d3.select("#donut")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")" );

var arc = d3.svg.arc();

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

var rings = svgDonut.selectAll("g.slice")
	.data(pie([dataset]))
	.enter()
	.append("g")
	.attr("class", "slice");

	rings.append("path")
		.attr("fill", function(d, i){ return color(i); })
		.attr("d", function(d, i, j){ return arc.innerRadius( 80 + cwidth * j )
											.outerRadius( outerR * (j) )(d); });

	rings.append("text")
		.attr("transform", function(d) {                    //set the label's origin to the center of the arc
	        d.innerRadius = 0;
	        d.outerRadius = outerR;
	        return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
	    })
	    .attr("text-anchor", "middle")
	    .text(function(d, i) { return dataset.ringOne[i].label; });