var dataset = [
  {index: 0, color: 'rgb(255,0,0)', width:10},
  {index: 1, color: 'rgb(28,151,255)', width:15},
  {index: 2, color: 'rgb(255,213,0)', width:40},
  {index: 3, color: 'rgb(231,255,0)', width:30},
  {index: 4, color: 'rgb(255,255,255)', width:40},
  {index: 5, color: 'rgb(255,7,189)', width:10},
  {index: 6, color: 'rgb(172,244,78)', width:50},
  {index: 7, color: 'rgb(143,120,222)', width:60},
  {index: 8, color: 'rgb(28,151,255)', width:70},
  {index: 9, color: 'rgb(255,213,0)', width:80},
  {index: 10, color: 'rgb(231,255,0)', width:50},
  {index: 11, color: 'rgb(254,111,85)', width:60},
  {index: 12, color: 'rgb(255,7,189)', width:70},
  {index: 13, color: 'rgb(172,244,78)', width:80},
  {index: 14, color: 'rgb(255,0,0)', width:10},
  {index: 15, color: 'rgb(28,151,255)', width:15},
  {index: 16, color: 'rgb(255,7,189)', width:10},
  {index: 17, color: 'rgb(231,255,0)', width:50},
  {index: 18, color: 'rgb(28,151,255)', width:10},
  {index: 19, color: 'rgb(255,255,255)', width:20},
  {index: 20, color: 'rgb(172,244,78)', width:40},
  {index: 21, color: 'rgb(143,120,222)', width:30},
  {index: 22, color: 'rgb(28,151,255)', width:10},
  {index: 23, color: 'rgb(255,213,0)', width:30},
  {index: 24, color: 'rgb(231,255,0)', width:20},
  {index: 25, color: 'rgb(254,111,85)', width:40},
  {index: 26, color: 'rgb(255,7,189)', width:20},
  {index: 27, color: 'rgb(172,244,78)', width:40},
  {index: 28, color: 'rgb(28,151,255)', width:10}
];

var width = 724, height = 996, margin, innerwidth, outerwidth;

//convert value to angle
var convertValue = function(value) {
  return value * 2 * Math.PI;
}

//translate triangle position
var translateTriangle = function(value, arrow_pos) {
  return "translate(" + Math.cos(convertValue(value) - Math.PI / 2) * arrow_pos
   + "," +
    Math.sin(convertValue(value) - Math.PI / 2) * arrow_pos
   + ") rotate(" +
   (convertValue(value) * 180 / Math.PI) + ")";
}

//set container
var svg = d3.select("div").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + ",50)");

//set arc size
var drawArc = d3.svg.arc()
  .cornerRadius(10)
  .innerRadius(function(d) {
    if (d.index == 0 || d.index == 14) {
      innerwidth = 10;
      margin = 10;
    };
    innerwidth = innerwidth + margin;
    return innerwidth;
  })
  .outerRadius(function(d) {
    outerwidth = innerwidth + d.width;
    innerwidth = outerwidth;
    return outerwidth;
  });

//creating arc path
var arc = svg.append("g").selectAll("path.arc")
  .data(dataset)
  .enter().append("path")
  .attr("class", "arc")
  .attr("fill", function(d) {
    return d.color
  })
  .each(function(d) {
    d.endAngle = 0;
    d.startAngle = 0;
  })
  .attr("d", drawArc);

//creating triangle path
var triangle = svg.append("g").selectAll("path.arc")
  .data(dataset)
  .enter().append("path")
  .attr("class", "triangle")
  .attr("d", "M 0 0 L -12 -10 L 12 -10 z")
  .style("fill", function(d) {
    return d.color;
  })
  .each(function(d) {
    d.position = 0;
  });

//start tween
arc.transition()
  .duration(750)
  .delay(300)
  .call(arcTween);
triangle.transition()
  .duration(750)
  .delay(1000)
  .call(triangleTween);

//loop tween
setInterval(function() {
  arc.transition()
    .duration(500)
    .call(arcTween);
  triangle.transition()
    .duration(500)
    .call(triangleTween);
}, 15000);

function arcTween(transition) {
  transition.attrTween("d", function(d) {
    var randStart = Math.floor(Math.random() * 90) / 90;
    var randEnd = Math.floor(Math.random() * 90) / 90;
    var interpolateStart = d3.interpolate(d.startAngle, convertValue(randStart));
    var interpolateEnd = d3.interpolate(d.endAngle, convertValue(randEnd));
    return function(t) {
      d.startAngle = interpolateStart(t);
      d.endAngle = interpolateEnd(t);
      return drawArc(d);
    };
  });
}

function triangleTween(transition) {
  transition.attrTween("transform", function(d) {
    var randpos = Math.floor(Math.random() * 36) / 36;
    var interpolate = d3.interpolate(d.position, randpos);
    var arrow_pos;
    if (d.index < 14) {
      arrow_pos = 180;
    } else {
      arrow_pos = 545;
    };
    return function(t) {
      d.position = interpolate(t);
      return translateTriangle(d.position, arrow_pos);
    };
  });
}