# Mondrian Puzzle explainer

The aim of this puzzle:
Use the attribute method `.attr()` to set the `'height'` and `'width'` 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 height or width of an SVG rectangle, set the first argument of `.attr()` to `'height'` or `'width'` and the second argument to a number.

In the code that you start off with, `redSqaure` already has values for `'height'` and `'width'` but these values are too small. In this puzzle, youâ€™ll change `'height'` and `'width'` to make `redSquare` bigger.

To complete the puzzle, change both the `'height'` and `'width'` values to `90`.

Sample code solution:
(Tap below to reveal)

``````redSquare.attr('height', 90).attr('width', 90);
``````

JavaScript Concepts: Variable
D3 Concepts: Attribute

``````var redSquare = svg.append('rect').attr('fill','red').attr('x',50).attr('y',10);
svg.append('rect').attr('fill','black').attr('x', 50).attr('y',100).attr('height', '45').attr('width', '45');
svg.append('rect').attr('fill','black').attr('x',175).attr('y',100).attr('height','15').attr('width','35');
svg.append('rect').attr('fill','yellow').attr('x',95).attr('y',100).attr('height', '22.5').attr('width', '45');
svg.append('rect').attr('fill','yellow').attr('x',175).attr('y',10).attr('height','55').attr('width','35');
svg.append('rect').attr('fill','blue').attr('x',140.5).attr('y',116).attr('height', '30').attr('width','70');
svg.append('rect').attr('fill','white').attr('x',95).attr('y',123).attr('height', '22.5').attr('width', '45');
svg.append('rect').attr('fill','white').attr('x',140).attr('y',10).attr('height', '105').attr('width','35');
svg.append('rect').attr('fill','white').attr('x',175).attr('y',65).attr('height','35').attr('width','35');
svg.append('rect').attr('fill','black').attr('x',50).attr('y',10).attr('height','135').attr('width','5');
svg.append('rect').attr('fill','black').attr('x',50).attr('y',9).attr('height','5').attr('width','164');
svg.append('rect').attr('fill','black').attr('x',210).attr('y',10).attr('height','135').attr('width','5');
svg.append('rect').attr('fill','black').attr('x',50).attr('y',145).attr('height','5').attr('width','165');
svg.append('rect').attr('fill','black').attr('x',140).attr('y',10).attr('height','135').attr('width','5');
svg.append('rect').attr('fill','black').attr('x',50).attr('y',100).attr('height','5').attr('width','164');
svg.append('rect').attr('fill','black').attr('x',95).attr('y',122.5).attr('height','5').attr('width','45');
svg.append('rect').attr('fill','black').attr('x',140).attr('y',115).attr('height','5').attr('width','70');
svg.append('rect').attr('fill','black').attr('x',175).attr('y',10).attr('height','105').attr('width','5');
svg.append('rect').attr('fill','black').attr('x',175).attr('y',65).attr('height','5').attr('width','35');``````