Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/README.md

Last active October 3, 2016 12:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EfratVil/dc372a98c40f25b26d8f09178ab18d1c to your computer and use it in GitHub Desktop.
Save EfratVil/dc372a98c40f25b26d8f09178ab18d1c to your computer and use it in GitHub Desktop.
Download ZIP
swirling circles
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment