# Hole in the Wall explainer

The aim of this puzzle: Change the location of the gold brick to fill the hole

Walkthrough of the solution: The `brick` is a rectangle. A rectangle’s position is determined by its top left corner. The distance from the left side of the screen is its `'x'` value. The distance from the top of the screen is its `'y'` value. To move the `brick` down 2 rows, you have to increase its `'y'` value.

Each brick is 25 tall, so moving down 2 bricks is increasing `'y'` to 50. Then to move the brick to the right 2 spaces, you have to increase `'x'` by 2 brick widths. Each brick is 50 wide, so 2 bricks to the right is 100.

Sample code solution:
(Tap below to reveal)

``````let brick = svg.append('rect')
.attr('fill', 'gold')
.attr('width', 50)
.attr('height', 25)
.attr('x', 100)
.attr('y', 50);
``````

D3 Concepts: `.append()`, `.attr('fill',)`, `.attr('height',)`, `.attr('width',)`, `.attr('x',)`, `.attr('y',)`
Additional Code (hidden code that runs before the puzzle’s code):

``````// Another Brick in the Wall
let brickW = 50;
let brickH = 25;
for (let i = 0; i <= 400/brickH; i++) {
for (let j = 0; j <= 400/brickW; j++) {
svg.append('rect').attr('width', brickW).attr('height',brickH).attr('fill',`rgb(\${178+30*(Math.random()-0.5)},\${34+20*(Math.random()-0.5)},\${34+20*(Math.random()-0.5)})`).attr('stroke','white').attr('x',(j-0.5*(i%2))*brickW).attr('y',i*brickH);
}
}

d3.selectAll('rect').attr('opacity', (d,i)=> i===20?0:1);
``````
1 Like