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,

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

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… :blush:

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 cyits 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: