Simple D3 Percentage Gauge

Copied and modified from https://codepen.io/adeveloperdiary/pen/VaQRqe?editors=0010

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

buildSVG = function (value1, value2) {

$('svg').remove();

var w = 150, h = 150;
        var outerRadius = (w / 2) - 10;
        var innerRadius = (w / 2) - 15;

var color = ['#e0e0e0', '#eb3323'];

var ammount = value1;
        var total = value2;
        var percent = (ammount / total) * 100;
        var ratio = percent / 100;
        var piePercent = Math.PI * ratio;

var arc = d3.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
          .startAngle(0)
          .endAngle(Math.PI);

var arcLine = d3.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
          .startAngle(0)
          .endAngle(piePercent);

var svg = d3.select("#chart")
          .append("svg")
          .attr("width", w)
          .attr("height", h)
          .append('g')
          .attr("transform", 'translate(' + w / 2 + ',' + h / 2 + ')');

var path = svg.append('path')
          .attr("d", arc)
          .attr("transform", 'rotate(-90)')
          .attr("fill", color[0]);

var path2 = svg.append('path')
          .attr("d", arcLine)
          .attr("transform", 'rotate(-90)')
          .attr("fill", color[1]);

var middleCount = svg.append('text')
          .text(Math.round(percent) + "%")
          .attr("class", "middle-text")
          .attr('text-anchor', 'middle')
      }

// Just needed to cycle over some test values.

var values = [
        {
          lower: 0,
          upper: 1000
        },
        {
          lower: 22,
          upper: 1000
        },
        {
          lower: 200,
          upper: 1000
        },
        {
          lower: 3.5,
          upper: 10
        },
        {
          lower: 5000,
          upper: 10000
        },
        {
          lower: 820,
          upper: 1000
        },
        {
          lower: 1000,
          upper: 1000
        }
      ]

var i = -1;
      setInterval(function () {
        i = i === (values.length - 1) ? -1 : i;
        i++;
        buildSVG(values[i].lower, values[i].upper);
      }, 1000);

});

</script>

</head>

</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js