Syzygy explainer

[grasshopperexplainer]

The aim of this puzzle: Line up the circles and make them all the same size.

Walkthrough of the solution: To make the circles all the same size, you just need to set the radius to the same number using the 'r' attribute through an .attr() call. The new part is the .transition(). When you add a .transition() before an .attr() call, instead of instantly changing the attribute to the new value, you’ll see it animate the change you made. If you just add an .attr('r',35) right after the .attr('cy', 55), you would still see an animation, but the 'cy' animation would happen at the same time as the 'r' animation. That means, instead of three simple animations in a row, you would see the quick 'cx' animation, then a combined 'cy' and 'r' animation.

Sample code solution:
(Tap below to reveal)

function moveCircles() {
  circles.transition()
      .attr('cx', 55)
    .transition()
      .attr('cy', 55)
    .transition()
      .attr('r', 35);
}
circles.on('click', moveCircles);

JavaScript Concepts: Code Block (function), Identifiers, Member Expression
D3 Concepts: .transition(), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,), .on(‘click’,)
Additional Code (hidden code that runs before the puzzle’s code):

for (let i=0; i<10; i++) {    
    let rad = 55-5*i;
    svg.append('circle')
        .attr('r',rad)
        .attr('cx',rad+Math.random()*(window.innerWidth-rad*2))
        .attr('cy',rad+Math.random()*(window.innerHeight-rad*2))
        .attr('fill',`rgb(${rad*3},${rad*4},${rad*5})`);
}

var circles = d3.selectAll('circle');

[Des_kit]

I dont under stand please help

[grasshopperexplainer]

The circles.on('click', moveCircles) part is just like you’ve seen before in the previous puzzles. It’s saying, “run the moveCircles function when you click on the circles”. Inside of the moveCircles function definition, there is something new, a .transition().

The transition adds animation to an SVG object, specifically, the .attr()s that follow. So, circles.transition().attr('cx', 55) will take all the circles which are placed randomly on the screen and move them to an x-coordinate of 55. But instead of moving them instantly, the transition makes the circles slide across the screen from their starting position to the final position where ‘cx’ is 55. You can then add another transition to make another animation.

circles.transition().attr('cx', 55).transition().attr('cy', 55);

This starter code has two animations: slide the circles to ‘cx’ equals 55, then slide the circles to ‘cy’ equals 55. These are done one after the other because there are two .transition() commands. If you want to make a third animation that shrinks or grows all the circles to the same size, you’re going to need two things: .transition() and .attr('r', 35), but you can use any positive number for the radius. The order that you add these is important. When you use a .transition() it looks at what comes after to know what it is transitioning into. If you did .attr('r', 35).transition() the transition wouldn’t know what to animate because there’s no code attached to it. Also, if you have multiple .attrs in a row like this:

circles.transition().attr('cx',55).attr('cy',55)

you would see the circles travel in a straight line right to the coordinates (55,55) because there’s only 1 .transition() which means all the attr changes happen in one motion.

I hope this helps clarify it a bit. Let me know if you still have questions!

–Frankie

[CLM]

Still having trouble with this one…I have this code as my answer and it says “You’ll need the moveCircles function to solve this puzzle…” “Error: can’t find variable: moveCircles…”. Not sure what’s going on

[Arthur]

I have been sitting on this lvl for 2 hour and still can’t

! figure out the problem. My code is the exact as the answer should be but it only says “you need the move circle function” and with red: “movecircle is not defined”

[Grasshopper_Heather]

Hey @Arthur,

That’s really strange. Sorry you’ve hit up against this issue. Your code is correct, so I think this is a bug on our side. Would you be able to hard-close Grasshopper, re-open and run your code again to see if the issue persists?

H

[Rennell_Goudeau]

I just made the ‘r’ 40. After that the code works. Took me a while too. Notice the direction says “any even number”.

[ELBO_D2i]

I can Additional codes.Hiddend Codes

[Penda_Wong]

What is “Reset” button.
Please advise.

[Grasshopper_Frankie]

The screenshot at the bottom of my post shows the reset button. You can tap anywhere in your code to bring up the keyboard and then reset your code with that button. If you press it accidentally, you can undo the reset (or any other action) by tapping the undo button which is just to the right of the reset button.

The code in your screenshot looks correct, but somehow you were able to create a “self invoking function expression” instead of a “function declaration”. There would normally be parentheses around this type of function, but they’re being hidden here.

Do you recall what steps you took to create your code? Did you rename the function or have to use the function() {} button at all?

Thanks,
Frankie

[Penda_Wong]

Thanks Frankie.
Might be I have once renamed the function or some steps that corrupted the function.

I press the “Reset” button, re-code and it works.

Thanks for your professional and detailed advice.

Penda

[star_smiley]

My example solution and my solution won’t load

[Grasshopper_Ben]

Hey there, we’re looking into this bug. In the meantime, try refreshing the page, or trying the puzzle in a different web browser.

Hope this helps!
Ben

[star_smiley]

ok ill try it thanks

[Art_Zhukov]

Hey there, I have a question. How is the order of overlap of the circles defined and can I change it?