Look to the Left explainer


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: 'cx' and '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);

JavaScript Concepts: Member Expression, Identifiers
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.


Plz will u provide the additional code I wanna cross check it


Hey @Sushma_Deshmukh,

Here is the additional code:

var leftEye = svg.append('circle').attr('stroke','grey');
var rightEye = svg.append('circle').attr('stroke','grey');
var leftPupil = svg.append('circle');
var rightPupil = svg.append('circle');



Thanks a lot it will help me a lot… :blush:


I think that this resembles a lot like basic HTML image positioning.
It’s nice to understand that, but I need to remember those commands.