JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<svg width="300" height="300" viewBox="-50 -50 100 100">
 
</svg>

JavaScript

function getSVG(){
const svg = ['svg',
    {
        viewBox: '-25 -25 50 50'
    }];            
svg.push(
            //inner circle
            [
                'circle',
                {
                    r: 25,
                    fill: 'rgba(255, 255, 255, 1)' 
                }
            ],
            //inner circle
            [
                'circle',
                {
                    r: 16,
                    fill: 'black'
                }
            ],
            //label
            [
                'text',
                {
                    x: 0,
                    y: 5,
                    
                    fontFamily: 'sans-serif',
                    fontWeight: "bold",
                    //fontWeight: 100,
                    fontSize: 12,
                    textAnchor: 'middle',
                    fill: 'black'
                },
                String(parseInt("100") + "%")
            ]
        );  
        
let providers = {  "0":  33,  "1":  33, "2":  33 };
  	let weight = 0
    for (let provider in providers){ weight += providers[provider]; }        
    let startAngle = 0;
    let endAngle = 0;
    const chunkAngle = 2 * Math.PI / weight
    var CircleInfoColors = [
                            'rgb(101, 155, 0)',
                            'rgb(242, 104, 39)', 
                            'rgb(255, 255, 255)'
                            ];
    for (let provider in providers)  {
        // slice is just one element of a cluster and
        // providers obj has providers and count of a provider in cluster
        endAngle = endAngle + chunkAngle * providers[provider];
        svg.push([
            'path',
            {
                d: d3.arc()({
                    innerRadius: 17,
                    outerRadius: 24,
                    startAngle: startAngle,
                    endAngle: endAngle
                }),
                fill: 'red',  //CircleInfoColors[provider],
               
               ...