The First Domino Puzzle Explainer

#1

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 120).

Sample code solution:
(Tap below to reveal)

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

JavaScript Concepts: Variable
D3 Concepts: Attribute
Additional 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');
}
0 Likes

listed #2
0 Likes