badgetron

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }
  svg {
    display:block;
    margin: 0 auto;
    background: #000;
  }
  body {
    background: #fff;
    font: 30px sans-serif;
  }
  </style>
</head>
<body>
  <script>
    color_array = ['#ffffe0','#fff3c6','#ffe5ab','#ffd88e','#ffc970','#ffbc50','#ffad28','#ff9d24','#ff8945','#ff745d','#ff5d72','#ff3a87','#f9128a','#e90d75','#d90862','#c9054f','#bb023d','#aa012a','#9a0017','#8b0000']; 
    var width = 1050;
    var height = 1500;
    var arc_width = 43;
    var arc_round = arc_width/2;
    var τ = 2 * Math.PI;
    var r = 30;
    var data = [
      {index: 0,  color: color_array[0],  start:0, end: 0},
      {index: 1,  color: color_array[1],  start:0, end: 0},
      {index: 2,  color: color_array[2],  start:0, end: 0},
      {index: 3,  color: color_array[3],  start:0, end: 0},
      {index: 4,  color: color_array[4],  start:0, end: 0},
      {index: 5,  color: color_array[5],  start:0, end: 0},
      {index: 6,  color: color_array[6],  start:0, end: 0},
      {index: 7,  color: color_array[7],  start:0, end: 0},
      {index: 8,  color: color_array[8],  start:0, end: 0},
      {index: 9,  color: color_array[9],  start:0, end: 0},
      {index: 10, color: color_array[10], start:0, end: 0},
      {index: 11, color: color_array[11], start:0, end: 0},
      {index: 12, color: color_array[12], start:0, end: 0},
      {index: 13, color: color_array[13], start:0, end: 0},
      {index: 14, color: color_array[14], start:0, end: 0},
      {index: 15, color: color_array[15], start:0, end: 0},
      {index: 16, color: color_array[16], start:0, end: 0},
      {index: 17, color: color_array[17], start:0, end: 0},
      {index: 18, color: color_array[18], start:0, end: 0},
      {index: 19, color: color_array[19], start:0, end: 0}
    ];
    var bg_data = [
      {index: 0,  color: color_array[0],  start:0, end: 360},
      {index: 1,  color: color_array[1],  start:0, end: 360},
      {index: 2,  color: color_array[2],  start:0, end: 360},
      {index: 3,  color: color_array[3],  start:0, end: 360},
      {index: 4,  color: color_array[4],  start:0, end: 360},
      {index: 5,  color: color_array[5],  start:0, end: 360},
      {index: 6,  color: color_array[6],  start:0, end: 360},
      {index: 7,  color: color_array[7],  start:0, end: 360},
      {index: 8,  color: color_array[8],  start:0, end: 360},
      {index: 9,  color: color_array[9],  start:0, end: 360},
      {index: 10, color: color_array[10], start:0, end: 360},
      {index: 11, color: color_array[11], start:0, end: 360},
      {index: 12, color: color_array[12], start:0, end: 360},
      {index: 13, color: color_array[13], start:0, end: 360},
      {index: 14, color: color_array[14], start:0, end: 360},
      {index: 15, color: color_array[15], start:0, end: 360},
      {index: 16, color: color_array[16], start:0, end: 360},
      {index: 17, color: color_array[17], start:0, end: 360},
      {index: 18, color: color_array[18], start:0, end: 360},
      {index: 19, color: color_array[19], start:0, end: 360}
    ];

//arc generator
    var arc = d3.svg.arc()
      .cornerRadius(arc_width/2)
      .startAngle(function(d) { 
        return d.start * τ / 360 - arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
      })
      .endAngle(function(d) {
        return d.end*τ / 360 + arc_round / (r + (arc_width + 1) * d.index + arc_width - arc_round);
      })
      .innerRadius(function(d) { return r + (arc_width + 1) * d.index; })
      .outerRadius(function(d) { return r + (arc_width + 1) * d.index + arc_width; });
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    var arcs_bg = svg.append("g").selectAll("path.arcbg")
        .data(bg_data)
        .enter().append("path")
        .attr("class", "arcbg")
        .style("opacity", 0.25)
        .style("fill", function(d) { return d.color; })
        .attr("d", arc);
    var arcs = svg.append("g").selectAll("path.arc")
      .data(data)
      .enter().append("path")
      .attr("class", "arc")
      .style("fill", function(d) { return d.color; })
      .attr("d", arc)
      .each(function(d) { this._current = d;});

setTimeout(function() {
      arcs.data([ 
        {index: 0,  start:0, end: 360},
        {index: 1,  start:0, end: 360},
        {index: 2,  start:0, end: 360},
        {index: 3,  start:0, end: 360},
        {index: 4,  start:0, end: 360},
        {index: 5,  start:0, end: 360},
        {index: 6,  start:0, end: 360},
        {index: 7,  start:0, end: 360},
        {index: 8,  start:0, end: 360},
        {index: 9,  start:0, end: 360},
        {index: 10, start:0, end: 360},
        {index: 11, start:0, end: 360},
        {index: 12, start:0, end: 360},
        {index: 13, start:0, end: 360},
        {index: 14, start:0, end: 360},
        {index: 15, start:0, end: 360},
        {index: 16, start:0, end: 360},
        {index: 17, start:0, end: 360},
        {index: 18, start:0, end: 360},
        {index: 19, start:0, end: 360}
      ]);

arcs.each(function(d, index){
        console.log(d3.select(this));
        d3.select(this).transition().duration(3000 + 150 * index).call(arcTween);
      });
    }, 800);

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