thayashi
10/2/2016 - 4:36 PM
badgetron
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);
function arcTween(transition) {
transition.attrTween("d", function(d) {
var interpolate = d3.interpolate(this._current.end, d.end);
this._current = interpolate(0);
return function(t) {
d.end = interpolate(t);
return arc(d);
};
});
}
</script>
</body>Built with blockbuilder.org
license: mit
border: no
height: 1500