The aim of this puzzle: Make the googly eyes look to the left side by changing the center locations of various circles.
Walkthrough of the solution: The eyes are made of four circles: two big white eyes, and two small black pupils. The location of each circle is determined by the coordinates of its center:
'cy'. To move a circle to the right, you increase its
'cx' value. To move a circle down, you increase its
'cy' value. Remember the order the grasshopper jumped? It increased its
'x' value then its
'y' value. It’s also like reading a book – increasing x is like reading the words in a line, and increasing y is like reading each line on a page. In this puzzle, all of the circles should be lined up across a horizontal line. That means they’re all the same distance from the top of the screen and have the same
'cy' value of 50. The only circle with the wrong left-right placement is the right pupil – it should have a
'cx' of 125.
Sample code solution:
(Tap below to reveal)
leftEye.attr('cx', 50) .attr('cy', 50); rightEye.attr('cx', 150) .attr('cy', 50); leftPupil.attr('cx', 25) .attr('cy', 50); rightPupil.attr('cx', 125) .attr('cy', 50);
D3 Concepts: .attr(‘cx’,), .attr(‘cy’,)
Additional Code: There is code that runs before the puzzle’s code that sets the color, size, and location of the SVG shapes.