JSFiddle - React, Tailwind, and code Playground

by Rakesh Vadnal

HTML

<!DOCTYPE html>
<head>

<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<div class="progress" data-percentage="35"></div>
<p class="radial-text">Chart One</p>

<div class="progress" data-percentage="60"></div>
<p class="radial-text">Chart Two</p>

<div class="progress" data-percentage="20"></div>
<p class="radial-text">Chart Two</p>
  

<script>

var nextChart = 0;

go();

function go() {

var wrapper = document.querySelectorAll('.progress')[nextChart];
var start = 0;
var end = parseFloat(wrapper.dataset.percentage);

var colors = {
fill: '#2c3187',
track: '#cec6bc',
text: '#2c3187',
stroke: '#FFFFFF',
}

var endAngle = Math.PI * 2;
var formatText = d3.format('.0%');
var boxSize = 200;
var count = end;
var progress = start;
var step = end < start ? -0.01 : 0.01;

//Define the circle
var circle = d3.svg.arc()
.startAngle(0)
.innerRadius(100)
.outerRadius(60);

//setup SVG wrapper
var svg = d3.select(wrapper)
.append('svg')
.attr('width', boxSize)
.attr('height', boxSize);

// Add Group container
var g = svg.append('g')
.attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');

//Setup track
var track = g.append('g');
track.append('path')
  .attr('fill', colors.track)
  .attr('stroke', colors.stroke)
  .attr('stroke-width', '7px')
  .attr('d', circle.endAngle(endAngle));

//Add colour fill
var value = track.append('path')
  .attr('class', 'radial-path')
  .attr('fill', colors.fill)
  .attr('stroke', colors.stroke)
  .attr('stroke-width', '7px');

//Add text value
  var numberText = track.append('text')
  .attr('class', 'radial-text')
  .attr('fill', colors.text)
  .attr('text-anchor', 'middle')
  .attr('dy', '.8em');

//Action
function update(progress) {
  //update position of endAngle
  value.attr('d', circle.endAngle(endAngle * progress));
  //update text value
  numberText.text(formatText(progress));
}

(function iterate() {
  //call update to begin animation
  update(progress);
  if (count > 0) {
   ...