chart = {
const arcs = pie(data);
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg
.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data))
.attr("d", arc)
.style("opacity", .5);
svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.style("font-family", 'The Girl Next Door')
.style("font-size", "70px")
.text(d => d.data)
.attr("transform", d => {
const [x, y] = arc.centroid(d);
const rotation = ((d.startAngle / 2 + d.endAngle / 2) * 180) / Math.PI;
return "translate(" + [x, y] + ") rotate(-90) rotate(" + rotation + ")";
})
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle");
return svg.node();
}