The aim of this puzzle: Use a for loop to create many different circles at the same time.
Walkthrough of the solution: In this puzzle, a classic for loop declares the variable size
and sets its value to 300
. After every loop, size
will decrease by 10
, and the for loop will stop running when size
is no longer greater than 0
.
Inside the code block of the classic for loop, svg.append('circle')
creates a new circle. Every time the for loop iterates, a new circle is created.
To complete the puzzle, set the circle’s radius attribute to use the value of the size
variable.
Sample code solution:
(Tap below to reveal)
for (let size = 300; size > 0; size -= 10) {
svg.append('circle').attr('fill', pickRandom(color)).attr('r', size);
}
JavaScript Concepts: Classic For Loops, Subtraction Assignment Operator
**D3 Concepts: SVG, .attr()
Additional Code (hidden code that runs before the puzzle’s code):
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);