d3 Spirograph

Spirograph inspired by this stackoverflow question.

<!DOCTYPE html>
<html>

<body>
    <script>
    
      var width = 600,
          height = 600;
    
      var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform','translate(' + width/2 + ',' + height/2 + ')');
        
      var data = [
        {
          r: 250,
          x: 0,
          y: 0,
          c: 'black',
          d: 0
        }, {
          r: 175,
          x: 0,
          y: 0,
          c: 'steelblue',
          d: 10000
        },{
          r: 50,
          x: 0,
          y: 0,
          c: 'orange',
          d: 8000
        },{
          r: 40,
          x: 0,
          y: 0,
          c: 'red',
          d: 6000
        },{
          r: 30,
          x: 0,
          y: 0,
          c: 'green',
          d: 4000,
          l: 'color'
        },{
          r: 2,
          x: 0,
          y: 0,
          c: 'yellow',
          d: 200,
          l: 'line'
        }
      ];
      
      data.forEach(function(d,i){
        if (i === 0) d.pD = null;
        else d.pD = data[i-1];
      });
      
      var line = updateLine();
      
      svg.selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr('r', function(d){
          return d.r;
        })
        .style('fill', 'none')
        .style('stroke', function(d){
          return d.c
        })
        .each(goRound);
        
      function goRound(d,i){
        
        if (!d.pD) return function(t) { }
        
        if (d.l === 'color') line.newColor();
        
        var self = d3.select(this);
        
        self.transition()
          .ease(d3.easeLinear)
          .duration(function(d){
            return d.d;
          })
          .tween("go.round", function(){
            
            var inter = d3.interpolate(0, Math.PI * 2);
            
            return function(t) {
              d.x = Math.cos(inter(t)) * (d.pD.r - d.r) + d.pD.x;
              d.y = Math.sin(inter(t)) * (d.pD.r - d.r) + d.pD.y;
              self.attr('cx', d.x);
              self.attr('cy', d.y);
              
              if (d.l === 'line') {
                line.update([d.x, d.y])
              }
            };
            
          })
          .on('end', goRound);
      }
      
      function updateLine(){
        var line = d3.line(),
            data = [],
            c_index = -1
            path = null;
        
        return {
          
          update: function(p){
            data.push(p);
            path.attr('d', line(data));
          },
          
          newColor: function(){
            c_index++;
            path = svg.append('path')
              .style('stroke', d3.schemeCategory10[c_index % 10])
              .style('storke-width', '2px')
              .style('fill', 'none');
            data = [];
          }
        }
      }

</script>
  </body>

</html>

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