JSFiddle - React, Tailwind, and code Playground

CSS

text {
				font-family: sans-serif;
				font-size: 12px;
				fill: black; text-transform:uppercase;
			}
			svg { border:1px #000 solid;}
			path:hover {
				fill: orange; cursor:pointer; stroke:green; stroke-width:1px;
			}
			path
			{
				stroke:#d4d4d4; stroke-width:1px;
				 -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
			}
		#tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
}

#tooltip.hidden {
        display: none;
}

#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;
}

JavaScript

var w = 600,                        //width
    h = 500,                            //height
//    r = 200,                            //radius
    color = d3.scale.category20c();     //builtin range of colors
	var outerRadius = w / 3.2;
	var innerRadius = w / 6;
    var x = parseInt($(this).attr("x"), 10);
    var y = parseInt($(this).attr("y"), 10);
	
    data = [{"label":"Nasik", "value":20}, 
            {"label":"Delhi", "value":20}, 
            {"label":"Mumbai", "value":20},
			{"label":"Denver", "value":20},
			{"label":"Denver", "value":20},
			{"label":"Denver", "value":20},
			{"label":"Denver", "value":20},
			{"label":"Denver", "value":20},
			{"label":"Washington", "value":20},
			{"label":"Chicago", "value":20}];
    
    var vis = d3.select("body")
        .append("svg:svg")              //create the SVG element inside the <body>
        .data([data])                   //associate our data with the document
            .attr("width", w)           //set the width and height of our visualization (these will be attributes of the <svg> tag
            .attr("height", h)
        .append("svg:g")                //make a group to hold our pie chart
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")    //move the center of the pie chart from 0, 0 to radius, radius

    var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
          .innerRadius(innerRadius)
		.outerRadius(outerRadius);

    var pie = d3.layout.pie()           //this will create arc data for us given a list of values
        .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array

    var arcs = vis.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
        .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
       ...