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