Skip to content

Instantly share code, notes, and snippets.

@pvernier
Last active March 11, 2018 19:19
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 pvernier/b00af256b014e2824bf48b481754ff78 to your computer and use it in GitHub Desktop.
Save pvernier/b00af256b014e2824bf48b481754ff78 to your computer and use it in GitHub Desktop.
Drop circles with d3-timer
license: gpl-3.0

Drop circles with d3-timer using d3.interval. Get the same animation as this block except that here the circles appear one after the other whereas in the other they are all displayed at the beginning.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
svg {
background-color: #4d4d4d;
width: 500px;
height: 500px;
}
circle {
fill: #b2182b;
}
</style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type="text/javascript">
var svg = d3.select("svg")
// X coordinates of 25 circles
var coordsX = [10, 30, 50, 70, 90, 110, 130, 150, 170,
190, 210, 230, 250, 270, 290, 310, 330,
350, 370, 390, 410, 430, 450, 470, 490]
var i =0;
// If use d3.timer, get a slightly different animation
var t = d3.interval(function(elapsed) {
svg.append("circle")
.attr("cx", coordsX[i])
.attr("cy", 10)
.attr("r", 10)
.transition()
.duration(1000)
.attr("cy", "490")
i = i+1
if (i ==25) t.stop();
}, 200);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment