Skip to content

Instantly share code, notes, and snippets.

@martinjc
Last active Jun 3, 2017
Embed
What would you like to do?
Animating with d3.timer()
license: MIT
border: no

Using d3.timer() to animate a bouncing ball

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Animation with D3</title>
</head>
<body>
<div id="vis"></div>
<script src="script.js"></script>
</body>
</html>
var width = 500;
var height = 500;
var margin = {
top: 20,
left: 20,
bottom: 20,
right: 20
};
var radius = 5;
var svg = d3.select('#vis')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
var circle_data = [{
x: Math.random() * width,
y: Math.random() * height,
x_diff: Math.random() < 0.5 ? 1 : -1,
y_diff: Math.random() < 0.5 ? 1 : -1,
speed: Math.random() * 5,
}];
var circles = svg.selectAll('.circle')
.data(circle_data)
.enter()
.append('circle')
.attr('class', 'circle')
.attr('r', radius)
.attr('fill', 'blue')
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
});
d3.timer(animate);
function animate(elapsed) {
circles
.attr('cx', function(d) {
d.x = d.x + (d.speed * d.x_diff);
if (d.x <= 0 || d.x >= width) {
d.x_diff = d.x_diff * -1;
}
return d.x;
})
.attr('cy', function(d) {
d.y = d.y + (d.speed * d.y_diff);
if (d.y <= 0 || d.y >= height) {
d.y_diff = d.y_diff * -1;
}
return d.y;
});
}
html, body, #vis {
height: 100%;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment