Mandala Puzzle explainer

Aim of the puzzle:
Use the d3.selectAll() method to set an attribute on all instances of a type of shape.

Walk through of solution:
The d3.selectAll() method selects all instances of a type of shape. For example, d3.selectAll('circle') selects every circle and d3.selectAll('rect') selects every rectangle. Once all the instances of a shape are selected, you can set all of their attributes using one .attr().

In the code that you start off with, there is an incomplete dots variable declaration and a .transition() animation. Since the dots variable is incomplete, the .transition() doesn’t have anything to animate on and won’t run. In this puzzle, you’ll use d3.selectAll() to update the dots variable so the animation runs on all the circles.

To complete the puzzle, attach .selectAll() to end of d3 and use 'circle' as an argument. Now, the animation works and all the circles get bigger.

Sample code solution:
(Tap below to reveal)

let dots = d3.selectAll('circle');
dots.transition().attr('r',20);

Javascript Concepts: Variable
D3 Concepts: Attribute, .transition(), d3.selectAll()
Additional Code:

const color = [...Array(36)].map((_, i) => `hsl(${10 * i},100%,50%)`);
const n = 230;

for (var i = 3; i < n; i++) {
  parts
    .append('circle')
    .attr('fill', `hsl(${3 * i},100%,50%)`)
    .attr('r', 2)
    .attr('cx', window.innerWidth / 2 + i * Math.sin(i))
    .attr('cy', window.innerHeight / 2 + i * Math.cos(i));
}