The First Domino explainer

Aim of the puzzle:
Use the attribute method .attr() with 'transform' to rotate an SVG shape.

Walk through of 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 rotate an SVG shape, set the first argument of .attr() to 'transform' and the second argument to 'rotate(__ __ __)' with three numbers inside the parentheses. The numbers inside 'rotate()' represent, in order: degrees clockwise to rotate the shape, x coordinate of the origin of the rotation, y coordinate of the origin of the rotation.

In the code that you start off with, the domino already has a 'transform' attribute and 'rotate()' value but they are incorrect. In this puzzle, you’ll change the numbers inside rotate() so the domino tips over.

To complete the puzzle, change the numbers inside of 'rotate()' to (15 20 150).

Sample code solution:
(Tap below to reveal)

domino.attr('transform','rotate(15 20 150)');

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

svg.append('rect').attr('y',150).attr('width',window.innerWidth).attr('height',10).attr('fill','brown');
var domino = svg.append('rect').attr('x',10).attr('y',70).attr('width',10).attr('height',80).attr('fill','white');

for (let i = 2; i < 20; i++) {
  svg.append('rect').attr('x',20*i).attr('y',70).attr('width',10).attr('height',80).attr('fill','white');
}

@Grasshopper_Ben

The 3rd argument of rotate() is mistyped. It would be 150.

Thank you
Apurba Ghosh

Thanks for flagging! Fixed now :smile:
Natalie


The introductory description of **Animation II ** seems incomplete or may be I’m seeing this because of any compatibility issue. Can you please check it?

Thank you
Apurba Ghosh

Hey there, it looks like the text might be cut off due to the screen size or resolution of your device. We’ll take a look at it. Thanks for letting us know!

Ben