JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="//d3js.org/d3.v4.min.js"></script>
<svg width="600" height="500"></svg><br>
<input id="val">

JavaScript

val.addEventListener("change", function() {
  foreground.transition()
      .duration(750)
      .attrTween("d", arcTween(tau * this.value / 100 + delta))
      .attr("end", function() {console.log("end");});
})
var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
var delta = 30 / 210;

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.arc()
    .innerRadius(180)
    .outerRadius(240)
    .cornerRadius(30)
    .startAngle(-delta);

// 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.
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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

// Add the foreground arc in orange, currently showing 12.7%.
var foreground = g.append("path")
    .datum({endAngle: 0.127 * tau})
    .style("fill", "blue")
    .attr("d", arc);

// Every so often, start a transition to a new random angle. The attrTween
// definition is encapsulated in a separate function (a closure) below.
/*d3.interval(function() {
  foreground.transition()
      .duration(750)
      .attrTween("d", arcTween(Math.random() * tau));
}, 1500);*/

// 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) {

  // The function passed to attrTween is invoked for each selected element when
  // the transition starts, and for each element returns the interpolator to use
  // over the course of transition. This function is...