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)
                .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);
                    }
                });