JSFiddle - React, Tailwind, and code Playground

by tramtom

JavaScript

var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);

var width = 160,
    height = 160;

var data = new Array();

data.push([0, 100, "#e2e8ef"]); // background circle
data.push([0.25, 35, "#145298"]); // data circle

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

var arc = d3.svg.arc()
            .innerRadius(65)
            .outerRadius(80)
            .startAngle(function (d) { return cScale(d[0]); })
            .endAngle(function (d) { return cScale(d[1]); });

 svg.selectAll("path")
            .data([data[0]])
            .enter()
            .append("path")
            .style("fill", function (d) { return d[2]; })
            .attr("d", arc);


svg.selectAll("path")
             .data([data[1]])
             .enter()
             .append("path")
             .attr("class", "active")
             .style("fill", function (d) { return d[2]; })
             .transition()
             .delay(500)
             .duration(1000)
             .attrTween('d', function (d) {
                    var i = d3.interpolate(d[0], d[1]);
                    return function (t) {
                        d[1] = i(t);
                        return arc(d);
                    }
                });