animated donut chart

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style>
  .text-large {
    font: 27px Lato;
    position: relative;
    font-weight: 600;
    text-align: center;
  }
  .text-small {
    font: 17px Lato;
    position: relative;
    font-weight: 400;
    text-align: center;
  }
  #donut-chart {
    float:left;
    margin: auto;
  }
  </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
</head>

var tau = 2 * Math.PI; // https://tauday.com/tau-manifesto

var arc = d3.arc()
    .innerRadius(100)
    .outerRadius(80)
    .startAngle(0);

// Returns a tween for a transition’s "d" attribute, transitioning any selected
// arcs from their current angle to the specified new angle.
function arcTween(newAngle) {
    return function(d) {
    
    var interpolate = d3.interpolate(d.endAngle, newAngle);
    
    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    }
  }
}

var data = {
    scalable_campuses: 407,
    unscalable_campuses: 109
}

// Get the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don’t need to position arcs individually.
function draw(selector, num, bcolor) {
    var svg = d3.select("#" + selector)
              .append('svg')
              .attr("width", 200)
              .attr("height", 200)
            console.log(svg);
        g = svg.append("g").attr("transform", "translate(" + 200 / 2 + "," + 200 / 2 + ")");

// Add the background arc, from 0 to 100% (tau).
    var background = g.append("path")
        .datum({endAngle: tau})
        .style("fill", bcolor)
        .attr("d", arc);

// Add the foreground arc 
    var foreground = g.append("path")
        .datum({endAngle: 0* tau})
        .style("fill", "#686868")
        .attr("d", arc);

foreground.transition()
          .duration(750)
          .attrTween("d", arcTween((1 - (num)) * tau)); // pct_rural
}
</script>

<body>
  
  
<div id="donut-chart">
    <script type="text/javascript">
  draw('donut-chart', data.scalable_campuses/(data.scalable_campuses+data.unscalable_campuses), "#e16b29");
  </script>
</div>

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