JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div class="plot">
    <svg><g transform="translate(100,100)"><path></path></g></svg>
</div>

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
svg {
    border:solid 1px red;
}
.plot {
    height:500px;
}
svg {
    height:100%;
    width:100%;
}

JavaScript

'use strict';

var data = [{
    value: 0.80
}]
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 100
},
width = 960 - margin.left - margin.right,    height = 500 - margin.top - margin.bottom; 

const arc = d3.svg.arc().startAngle(0).innerRadius(50).outerRadius(70);
            
            
const paths = d3.selectAll('svg g').selectAll('path').datum({endAngle:0.2*Math.PI*2});

            
paths.attr('d', arc);

setInterval(()=>paths.transition().duration(500).call(tween, Math.PI * 2 * Math.random()), 1000);

function tween(transition, newAngle){
    transition.attrTween('d', d=>{
        const interpolate = d3.interpolate(d.endAngle, newAngle);
        
        return t=>{
            d.endAngle = interpolate(t)
            return arc(d);
        }
    });
}