JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

CSS

svg {
    border:1px solid red;
}

path {
    stroke:white
}

circle {
    fill:white;
    cursor : pointer;
}

text {
    color:#fff;
}

JavaScript

var data = [
    {value:10,text:"Jan"},
    {value:10,text:"Feb"},
    {value:10,text:"Mar"},
    {value:10,text:"Apr"},
    {value:10,text:"May"},
    {value:10,text:"Jun"},
    {value:10,text:"Jul"},
    {value:10,text:"Aug"},
    {value:10,text:"Sep"},
    {value:10,text:"Oct"},
    {value:10,text:"Nov"},
    {value:10,text:"Dec"}
]
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    w = 300 - margin.left - margin.right,
    h = 300 - margin.top - margin.bottom;
var svg = 
    d3.select('body').append('svg')
    .attr({
        width : w,
        height : h
    });

var radius = Math.min(w, h) / 2;

var arc = d3.svg.arc().outerRadius(radius).innerRadius(0);
var pie = d3.layout.pie().sort(null).value(function(d) { return d.value; });

var g = svg.selectAll('.arc').data(pie(data))
        .enter()
        .append("g")
        .attr("transform", "translate(" +(w / 2) + "," + (h / 2 ) + ")")
        .attr("class", "arc");

g.append("path")
          .attr("d", arc)
          .attr('opacity', 0.5);

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

var cC = svg.append('circle').attr({'r':radius/5,cx : w/2,cy:h/2})
        .on('click', function () {
            console.log("play now");
        });