JSFiddle - React, Tailwind, and code Playground

by Hengjing Wang

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

JavaScript

var margin = {
    top: 10,
    right: 50,
    bottom: 10,
    left: 50
},
width = 300,
    r = width / 2,
    labelr = r + 20,
    outerRadius = 150,
    innerRadius = outerRadius - 30;
numberOfSegments = 12;
radians = (Math.PI * 2) / numberOfSegments;
degrees = 360 / numberOfSegments;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", 530);

for (var j = 0; j < 5; j++) {
    var arc = d3.svg.arc()
        .innerRadius(innerRadius - j * 30)
        .outerRadius(outerRadius - j * 30)
        .startAngle(function (d, i) {
        return radians * i
    })
        .endAngle(function (d, i) {
        return radians * (i + 1)
    });

    var myGroup = svg.append("g")
        .attr("transform", "translate(200,200)")
        .attr("class", "arcgroup")
        .selectAll("path").data(d3.range(numberOfSegments))
        .enter().append("path")
        .attr("class", "seg" + j + "")
        .attr("d", arc)
        .attr("fill", function (d, i) {
        return d3.hsl(i * degrees, 1 - 0.2 * j, 0.5)
    });
}

var pos = d3.svg.arc()
    .innerRadius(innerRadius + 30)
    .outerRadius(outerRadius + 30)
    .startAngle(function (d, i) {
    return radians * i
})
    .endAngle(function (d, i) {
    return radians * (i + 1)
});

var label = svg.append("text")
    .attr("transform", function (d, i) {
    return "translate(" + pos.centroid(d, i) + ")";
})
    .attr("text-anchor", "middle")
    .text(function (d, i) {
    return i * degrees + "°";
});