JSFiddle - React, Tailwind, and code Playground
CSS
html{
background-color: #606060;
}
JavaScript
var w=800;
var h=800;
var outerRadius = (w / 2)-5;
var innerRadius = (w / 2)-6;
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(outerRadius);
var path;
var pie = d3.layout.pie();
var color = Array("#3D8052","#417796","#A37837");
var arc2 = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(Math.PI/4)
.endAngle(-7/12*Math.PI);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")")
.style("filter", "url(#drop-shadow)");
var defs = svg.append("defs")
var filter = defs.append("filter")
.attr("id","drop-shadow");
filter.append("feGaussianBlur")
.attr("in","SourceAlpha")
.attr("stdDeviation",3)
.attr("result","blur");
filter.append("feOffset")
.attr("in","blur")
.attr("dx",3)
.attr("dy",3)
.attr("result","offsetBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in","offsetBlur");
feMerge.append("feMergeNode")
.attr("in","SourceGraphic");
var filter2 = defs.append("filter")
.attr("id","highlight");
filter2.append("feGaussianBlur")
.attr("in","SourceAlpha")
.attr("stdDeviation",2)
.attr("result","blur");
filter2.append("feColorMatrix")
.attr("in", "blur")
.attr("type", "matrix")
.attr("values", "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0")
.attr("result", "whiteblur");
filter2.append("feOffset")
.attr("in","whiteblur")
.attr("dx",3)
.attr("dy",3)
.attr("result","offsetBlur");
var dataset = [];
for(i=0; i<3; i++){
dataset.push(Math.floor(Math.random()*25));
}
path = svg.datum(dataset).selectAll("path")
.data(pie(dataset))
.enter()
.append("path")
.attr("fill",function(d,i){
return color[i];
})
.attr("d",arc)
.each(function(d){this._current = d; });
svg.append("path")
.attr("d",arc2)
.style("filter","url(#highlight)");
path.select("text")
.data(pie(dataset))
.enter()
.append("text")
...