Skip to content

Instantly share code, notes, and snippets.

@easadler

easadler/README.md

Last active November 21, 2015 00:14
Show Gist options
  • Save easadler/43d9cccae0f2b5a0e59a to your computer and use it in GitHub Desktop.
Save easadler/43d9cccae0f2b5a0e59a to your computer and use it in GitHub Desktop.
Download ZIP
Animated Circles
Raw
README.md

Randomly generates circles that change position and size.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background-color: black;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var generateData = function(){
data = []
for (var i = 0; i < 150; i++) {
data.push([Math.random() * width, Math.random() * height]);
};
return data
}
var svg = d3.select('body')
.append("svg")
.attr('width', width)
.attr('height', height);
var color = d3.scale.category10()
var circle = svg.selectAll('circle')
.data(generateData())
circle.enter().append('circle')
.attr('cx', function(d){ return d[0]})
.attr('cy', function(d){ return d[1]})
.attr('opacity', 0)
.attr('r', 0)
.attr('fill', function(d,i){ return color(i % 10)})
circle.transition().duration(2400)
.attr('opacity', function(d){ return Math.random()})
.attr('r', 50)
.transition().duration(2000)
.attr('r', 5)
var breath = function(dat){
var circle = svg.selectAll('circle')
.data(dat);
circle.transition()
.ease('sin').duration(400)
.attr('cx', function(d){ return d[0]})
.attr('cy', function(d){ return d[1]})
.attr('opacity', function(d){ return Math.random()})
.attr('r', 5)
.attr('fill', function(d,i){ return color(Math.floor(Math.random()*10))})
.transition().duration(2000)
.attr('r', 50)
.transition().duration(2000)
.attr('r', 5)
}
setInterval(function(){breath(generateData)}, 4400)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment