Just for fun, swirling circles.
Inspired from @mtaptich's block - 8f8c955a7bcaa3ac2b2f
Just for fun, swirling circles.
Inspired from @mtaptich's block - 8f8c955a7bcaa3ac2b2f
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
.circle{ fill-opacity: 0.4;} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
function colorPicker(v) { | |
if (v == 1) { return "#4575b4"; } | |
else if (v == 2) { return "#74add1"; } | |
else if (v == 3) { return "#fee08b"; } | |
else if (v == 4) { return "#fdae61"; } | |
else if (v == 5) { return "#f46d43"; } | |
else if (v == 6) { return "#92c5de"; } | |
else { return "#d73027"; } | |
} | |
var margin = { top: 20, right: 10, bottom: 20, left: 10 }, | |
width = 900 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom, | |
pace = 20, | |
n_limit = 1000; | |
var svg = d3.select('body').append('svg') | |
.attr('width', width + margin.left + margin.right) | |
.attr('height', height + margin.top + margin.bottom) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
function go(){ | |
var ncount = 0 | |
interval = setInterval(function(){ | |
var c = svg.append('circle') | |
.attr('cy', function(d){ return height - 10*Math.random() }) | |
.attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -3 : 3) + width*0.5}) | |
.attr('r', function (d) { return 4 }) | |
.attr("opacity", 0.6) | |
.style("fill", function (d) { return colorPicker(Math.ceil(6 * Math.random())) }) | |
c.transition() | |
.duration(2000) | |
.attr('cy', height*0.5) | |
.attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -3 : 3) + width*0.5}) | |
.ease('linear') | |
.transition() | |
.duration(2000) | |
.attr('cy', 10) | |
.attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -3 : 3) + width*0.5}) | |
.ease('linear') | |
.each("end", function(){ d3.select(this).remove()}); | |
ncount+=1; | |
if (ncount>n_limit) clearInterval(interval) | |
},pace) | |
} | |
go() | |
var go_loop = setInterval(go, 4000 + pace * n_limit) | |
</script> | |
</body> |