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);
};
});
}