JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<div class="container" id="graph_container1">
    <svg id="svg1"></svg>
    <svg id="svg2"></svg>
    <svg id="svg3"></svg>
  </div>

JavaScript

var PDAscore1 = 80,
    PDAscore2 = 45,
    PDAscore3 = 100;

var svg1 = "#svg1",
    svg2 = "#svg2",
    svg3 = "#svg3";

var color1 = "orange",
    color2 = "#477225",
    color3 = "rgb(65, 244, 169)";

drawArc(PDAscore1, svg1, color1, 'Chart 01 description');
drawArc(PDAscore2, svg2, color2, 'Chart 02 description');
drawArc(PDAscore3, svg3, color3, 'Chart 03 description');

function drawArc(rawScore, svgNum, color, description){
    
    var format = d3.format(",d");
    
    //canvas for the arc graph
    var canvas = d3.select(svgNum)
      .attr("width", 400)
      .attr("height", 400);

    //make it a group element (like a block/div element)
    var group = canvas.append("g")
      .attr("transform", "translate(150, 150)");

    //calculation for the radius, pie and score
    var r = 100;
    var p = Math.PI * 2;
    var score = rawScore;
    var finalScore = p * (score / 100);

    //drawing of the arc
    var arc = d3.arc()
        .innerRadius(r)
        .outerRadius(65)
        .startAngle(0);

    //Insertion of the 'arc path' + animation
    group.append("path")
        .attr("fill", color)
        .transition()
        .ease(d3.easeExpInOut)
        .duration(2500)
        .attrTween("d", pieTween);

    //Insertion of the text of score in the middle of the arc/donut chart
    group.append("text")
        .attr("text-anchor", "middle")
        .attr("alignment-baseline", "middle")
        .attr("fill", color)
        .text(d3.format(",.1%")(score/100))
        .transition()
        .duration(4000)
        .on("start", function() {
        d3.active(this)
        .tween("text", function() {
            var that = d3.select(this),
                i = d3.interpolateNumber(0, score);
            //return function(t) { that.text(format(i(t))); };
            return function(t) { that.text(format(i(t)) + '%'); };
          });
        });
        
    group.append("text")
    		.text(description)
        .attr('transform', 'translate('+ (-r) + ',' +...