JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<!DOCTYPE html>
<html>


<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

  <svg></svg>


  <script>
    var $scope = {};
    $scope.svgWidth = 800;
    $scope.svgHeight = 500;

    //Data in proper format 
    var data = [{
      "name": "Day",
      "val": "60"
    }, {
      "name": "Night evng",
      "val": "30"
    }, {
      "name": "C",
      "val": "10"
    }];

    //removing prior svg elements ie clean up svg 
    /* d3.select('svg').selectAll("*").remove(); */

    //resetting svg height and width in current svg 
    d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);

    //Setting up of our svg with proper calculations 
    var svg = d3.select("svg");
    var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    };
    var width = svg.attr("width") - margin.left - margin.right;
    var height = svg.attr("height") - margin.top - margin.bottom;
    var radius = 200;
		
    //Plotting our base area in svg in which chart will be shown 
    var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
		var color = d3.scaleOrdinal(['#4daf4a', '#377eb8', '#ff7f00', '#984ea3', '#e41a1c']);
    var pie = d3.pie().sort(null)
      .value(function(d) {
        return d.val;
      });

    var piedata = pie(data);

    var arc = d3.arc()
      .innerRadius(radius - 200)
      .outerRadius(radius - 50);
      
    var outerArc = d3.arc()
	    .innerRadius(radius * 0.9)
	    .outerRadius(radius * 0.9);

    var path = g.selectAll("path")
      .data(piedata)
      .enter().append("path")
      .attr("fill", function(d, i) {
        return color(i);
      })
      .attr("d", arc);

    g.selectAll("text").data(piedata)
      .enter()
      .append("text")
      .attr("text-anchor", "middle")
      .attr("transform", function(d){
        var pos = outerArc.centroid(d);
       ...