JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<path d="M4.469960816887839e-15,-73A73,73 0 0,1 4.469960816887839e-15,-73L4.469960816887839e-15,-73A73,73 0 0,0 4.469960816887839e-15,-73Z" stroke="red" stroke-width="2" fill="none"></path>

JavaScript

var pi = Math.PI, width=600,  height=400; var iR=150;  var oR=110;
startAngle = 90, endAngle = 270, innerRad=150 , outerRad=110 ;
 var new_color, hold; var max = 300, min = 0, current = 0;
var cur_color = 'limegreen';

var firstValue = 100;



var arc = d3.svg.arc().innerRadius(iR).outerRadius(oR).startAngle(-120 * (pi/180)); 

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

var nScale = d3.scale.linear()
    			   .range([0, 240])
    			   .domain([0,300]);
background = svg.append("path").datum({endAngle:  120 * (pi/180)}).style("fill", "none").attr("d", arc);

var current = svg.append("text").attr("transform", "translate(0,"+ (iR/2) +")") 
            .attr("text-anchor", "middle").style("font-size", "50").style("font-family", "Helvetica").text(current)

setInterval(function() {
    var dataRead =Math.random()*300 ;
    var num = nScale(dataRead); 
    var numPi = Math.floor(num - 119) * (pi/180);
current.transition().text(Math.floor(dataRead));
background
   .transition()
   .duration(1000)
   .style("fill", "limegreen").call(arcTween, numPi);
}, 2000); 
function arcTween(transition, newAngle) {
      transition.attrTween("d", function(d) {
           
           var interpolate = d3.interpolate(d.endAngle, newAngle);
            return function(t) {

                
                d.endAngle = interpolate(t);
                
                var path = arc(d);
                var coords = path.split("L")[1].split("A")[0]
                current.attr('transform', 'translate(' + coords + ')' + 'rotate(' + (d.endAngle * 180/Math.PI) + ')'); 
                
                return path;  
            };  
    }); 
}