# 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 (hidden code that runs before the puzzle’s 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');

leftEye.attr('fill','white').attr('r',50);
rightEye.attr('fill','white').attr('r',50);
leftPupil.attr('fill','black').attr('r',20);
rightPupil.attr('fill','black').attr('r',20);

``````

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

Hey @Sushma_Deshmukh,

``````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');

leftEye.attr('fill','white').attr('r',50);
rightEye.attr('fill','white').attr('r',50);
leftPupil.attr('fill','black').attr('r',20);
rightPupil.attr('fill','black').attr('r',20);
``````

Thanks a lot it will help me a lot…

1 Like

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.

I see here we are using `cx` and `cy` for setting the coordinates for the circle. However in the “Where Do We Begin?” question two lessons later, instead of using `cx` and `cy`, it simply uses `x` and `y`. I’m wondering why this is?

My guess is that when we use `cx` or `cy`its because we are assigning an attribute to a circle, and possibly the `c` stands for center (as its using the center of the circle as the reference point for where to place it). Where as in the later lesson where we see `x` and `y` used it’s in reference to a rectangle which may not use the center of that object as a reference? Is this partially or fully correct?

Thanks

Disregard the above. I found the answer. Reference “Issue 2” in the following post: