Gooooal explainer


The aim of this puzzle: Move the ball into the goal

Walkthrough of the solution: The position of a circle is set by its center. The distance from the left side of the screen to the center is its 'cx' attribute. The distance from the top of the screen to the center of the circle is its 'cy' attribute.

The ball will be between the left and right sides of the goal if its 'cx' is between 50 and 200. Let’s pick 125. To set the 'cx' attribute of the ball, you use ball.attr('cx',...). For 'cy' the value should be between 50 and 100. Let’s use 100. ball.attr('cy',100) will set the ball along the very bottom of the goal.

You can choose to chain the .attr() calls together, or directly to ball on a new line. Either will work as long as you don’t try to use ball.attr() above the let ball = ..., becuase the variable needs to be created before it is used.

Sample code solution:
(Tap below to reveal)

let goal = svg.append('rect')
                .attr('x' ,25)
                .attr('y', 25)
                .attr('width', 200)
                .attr('height', 100)
                .attr('fill', 'white');
let ball = svg.append('circle')
                .attr('r', 25)
                .attr('fill', 'dodgerblue');
ball.attr('cx', 125)
    .attr('cy', 100);

D3 Concepts: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr('height',), .attr(r,), .attr('width',), .attr('x',), .attr('y',), .on('click',...)