# Jump Around explainer

The aim of this puzzle: Make the `ball` move to a random place on the screen whenever it’s tapped.

Walkthrough of the solution: The code starts out mostly done. When you tap on the ball, it moves to a random place at the top of the screen. This is because the `'cx'` is set to `pickRandom(200)` whenever you `'click'` `.on()` the `ball`.

When the `ball` moves to a random `'cx'`, it should also move to a random `'cy'`. Attach `.attr('cy', pickRandom(200))` to the `.attr('cx',...)`. You don’t need to add another `.transition()` because both `.attr()` changes should happen at the same time.

Sample code solution:
(Tap below to reveal)

``````let ball = svg.append('circle')
.attr('r', 50)
.attr('fill', pickRandom(color))
.attr('cx', 50)
.attr('cy', 50);

ball.on('click', ()=>{
ball.transition()
.attr('cx', pickRandom(200))
.attr('cy', pickRandom(200));
});
``````

JavaScript Concepts: Code Block (arrow function), Member Expression, Identifiers

Grasshopper Concepts: `pickRandom()`

D3 Concepts: `.attr('cx',)`, `.attr('cy',)`, `.attr('fill',)`, `.attr('r',)`, `.on('click',)`, `.transition()`
Additional Code (hidden code that runs before the puzzle’s code):

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