# Golden Rectangle explainer

The aim of this puzzle: Add another square to the golden rectangle

Walkthrough of the solution: A rectangle has 2 attributes that set its size: `'height'` and `'width'`. The height of the violet `bigBox` should be as tall as the blue (80) and indigo (130) boxes combined. 80 + 130 = 210, so the `bigBox` should have a `'height'` of 210. Since it’s a square, the width should also be 210.

To set the attributes, you use the `.attr()` method. The 1st argument will be the string `'height'` and the 2nd argument is 210. For the `'width'`, the 1st argument is `'width'` and the 2nd argument is 210.

Sample code solution:
(Tap below to reveal)

``````bigBox.attr('width',210).attr('height',210);
``````

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

``````let goldenRect = svg.append('g').attr('transform',`scale(\${window.innerWidth/(340+20)})`);

goldenRect.append('rect').attr('width',10).attr('height',10).attr('x',0).attr('y',0).attr('fill','red');
goldenRect.append('rect').attr('width',10).attr('height',10).attr('x',10).attr('y',0).attr('fill','orange');
goldenRect.append('rect').attr('width',20).attr('height',20).attr('x',0).attr('y',10).attr('fill','yellow');
goldenRect.append('rect').attr('width',30).attr('height',30).attr('x',20).attr('y',0).attr('fill','lime');
goldenRect.append('rect').attr('width',50).attr('height',50).attr('x',0).attr('y',30).attr('fill','green');
goldenRect.append('rect').attr('width',80).attr('height',80).attr('x',50).attr('y',0).attr('fill','blue');
goldenRect.append('rect').attr('width',130).attr('height',130).attr('x',0).attr('y',80).attr('fill','indigo');
goldenRect.append('rect').attr('x',130).attr('y',0).attr('width',210).attr('height',210).attr('fill','none').attr('stroke','white').attr('opacity',0.1);
let bigBox = goldenRect.append('rect').attr('x',130).attr('y',0).attr('fill','violet').attr('opacity',0.9);
``````
1 Like