JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

CSS

body {
    font: 10px sans-serif;
    /*background: #333;*/
    border: 0px solid black;
}

svg{
    padding: 100px;
    margin: 0 auto;
}

.arc path {
    stroke: #fff;
    stroke-width: 2px;
}

.arc grid {
    stroke: #fff;
    stroke-width: 1;
    stroke-dasharray: 5,5;
}

.arc text {
    fill: #000;
    font-size: 12px;
    font-weight: normal;
}

.arc line {
    stroke: #fff;
}

JavaScript

var data = [
    {
        age: "Vendor 1",
        population: 14.28,
        percent: 80
    },
    {
        age: "Vendor 2",
        population: 14.28,
        percent: 38
    },
    {
        age: "Vendor 3",
        population: 14.28,
        percent: 91
    },
    {
        age: "Vendor 4",
        population: 14.28,
        percent: 49
    },
    {
        age: "Vendor 5",
        population: 14.28,
        percent: 71
    },
    {
        age: "Vendor 6",
        population: 14.28,
        percent: 88
    },
    {
        age: "Vendor 7",
        population: 14.28,
        percent: 64
    },
];

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2 - 10,
    numTicks = 5,
    sdat = [];

var color = d3.scale.ordinal().range(["#52B5E4"]);

var arc = d3.svg.arc()
.outerRadius(function(d) { return 50 + (radius - 50) * d.data.percent / 100; })
.innerRadius(20);

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

var grid = d3.svg.area.radial()
.radius(150);

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

var gradient = svg.append("svg:defs")
    .append("svg:radialGradient")
    .attr("id", "gradient")
    .attr("cx", "0%")
    .attr("cy", "0%")
    .attr("r", "50%")
    .attr("fx", "0%")
    .attr("fy", "0%")
    .attr("spreadMethod", "pad")
    .attr("gradientUnits", "userSpaceOnUse");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#000")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#fff")
    .attr("stop-opacity", 1);

var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");

g.append("path")
.attr("d", arc)
.attr('fill', 'url(#gradient)');

g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";...