# Gabonese Flag Fixer Puzzle explainer

Aim of the puzzle:
Use the attribute method `.attr()` to set the `'x'` and `'y'` positions of an SVG rectangle.

Walk through of the solution:
The attribute method `.attr()` is used to set or modify the attributes of SVG shapes. It takes two arguments: the name of the attribute to change, and the value for the attribute. To define the position of an SVG rectangle, use `.attr()` to set a value for both `'x'` and `'y'`. The `'x'` attribute defines the amount of space to the left of a rectangle. The `'y'` attribute defines the amount of space on top of a shape.

In the code that you start off with, `greenStripe` already has values for `'x'` and `'y'` but they are incorrect. In this puzzle, you’ll change those values so `greenStripe` is in the right position.

To complete the puzzle, change both the `'x'` and `'y'` values to `0`.

Sample code solution:
(Tap below to reveal)

``````greenStripe.attr('x',0).attr('y',0);
``````

JavaScript Concepts: Variable
D3 Concepts: Attribute
Additional Code (hidden code that runs before the puzzle’s code):

``````var greenStripe = svg.append('rect').attr('fill','#4CAF50').attr('width',90).attr('height',33);
var yellowStripe = svg.append('rect').attr('fill','#FFEB3B').attr('x',0).attr('y',33).attr('width',90).attr('height',33);
var blueStripe = svg.append('rect').attr('fill','#2196F3').attr('x',0).attr('y',66).attr('width',90).attr('height',33);

``````