# 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',...)`