Hello! The example shows how to create a collection of SVG circle elements, place them randomly on the SVG element, and animate them randomly. Modify the slider to change the speed of the circles (it is not perfect, but you get the idea). Figure out in the code how this is done. For each concept in the code that looks unfamiliar, Google it!
The visualization also resizes when you resize the window of the browser. Go to the code and figure out how this is done. Play with the code, and try to implement the Flocking example from p5.js here!
The following code selects the div with id="slider" creates a slider input element, assings it the id "step", and appends it inside the div. Then you select the slider you just created, and you assign its value to the step variable:
d3.select("#slider")
.append("input")
.attr("id", "step")
.attr("type", "range")
.attr("min", 0)
.attr("max", 20)
.attr("step", "0.05")
.attr("value", 10);
d3.select("#step").on("input", function() {
step = +this.value;
setInterval(update, interval);
});
setInterval(update, interval);