Nested Circles explainer

Puzzle Explainer
#1

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%)`);
#2