Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active January 2, 2020 16:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save curran/e30339061fb0dac8dfcfbb57d06715b8 to your computer and use it in GitHub Desktop.
Save curran/e30339061fb0dac8dfcfbb57d06715b8 to your computer and use it in GitHub Desktop.
Download ZIP
Sine Wave Circles
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>
<script>
var svg = d3.select("svg").style("background-color", "black"),
width = svg.attr("width"),
height = svg.attr("height"),
n = 40,
circles = svg.selectAll("circle").data(d3.range(n))
.enter().append("circle")
.attr("cx", function(d){ return (d + 0.5) * width / n; })
.attr("r", width / n / 2)
.attr("fill", "white");
d3.timer(function (time){
circles.attr("cy", function(d){
return (Math.sin(d / 5 + time / 1000)) * height / 4 + height / 2;
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment