Tetromino explainer

The aim of this puzzle: Move the rectangle into place.
Walkthrough of the solution: The block needs to move to the right and down. You can do this by changing the 'x' and 'y' coordinates of the longBlock object. Increasing 'x' will move it right, and increasing 'y' will move it down. The values you need are x=120 and y=150. The way to change these values is by using an .attr() call. The .attr() takes in two arguments separated by a comma – the first argument is the name of the attribute you want to change (either 'x' or 'y'), and the second argument is the value you want to set the attribute to (120 or 150).
Sample code solution:
(Tap below to reveal)

longBlock.attr('x', 120).attr('y', 150);

JavaScript Concepts: Member Expression, Identifiers
D3 Concepts: .attr(‘x’,), .attr(‘y’,)
Additional Code (hidden code that runs before the puzzle’s code):

var pieces = svg.append('g');
pieces.attr('transform','scale(0.85)');

const max = Math.max(window.innerWidth, window.innerHeight);
for (let i = 0; i <= max; i += 30) {
    pieces.append('line').attr('x1',i).attr('y1',0).attr('x2',i).attr('y2',max).attr('stroke-width',1).attr('stroke','black');
    pieces.append('line').attr('x1',0).attr('y1',i).attr('x2',max).attr('y2',i).attr('stroke-width',1).attr('stroke','black');
}

var jPiece = pieces.append('path');
var lPiece = pieces.append('path');
var oPiece = pieces.append('path');
var sPiece = pieces.append('path');
var tPiece = pieces.append('path');
var zPiece = pieces.append('path');

jPiece.attr('fill','blue').attr('d','M 0 0 L 0 30 L 60 30 L 60 60 L 90 60 L 90 0 Z');
lPiece.attr('fill','orange').attr('d','M 0 0 L 0 60 L 30 60 L 30 30 L 90 30 L 90 0 Z');
oPiece.attr('fill','yellow').attr('d','M 0 0 L 0 60 L 60 60 L 60 0 Z');
sPiece.attr('fill','green').attr('d','M 0 0 L 0 60 L 30 60 L 30 90 L 60 90 L 60 30 L 30 30 L 30 0 Z');
tPiece.attr('fill','purple').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 60 60 L 60 30 L 90 30 L 90 0 Z');
zPiece.attr('fill','red').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 90 60 L 90 30 L 60 30 L 60 0 Z');

// translate top left corner to final position (with final rotational position in mind), then rotate.
jPiece.attr('transform','translate(270,180) rotate(90)');
lPiece.attr('transform','translate(0,270) rotate(-90)');
oPiece.attr('transform','translate(60,210) rotate(0)');
sPiece.attr('transform','translate(240,210) rotate(90)');
tPiece.attr('transform','translate(150,240) rotate(-90)');
zPiece.attr('transform','translate(90,150) rotate(90)');

// Add border to pieces.
d3.selectAll('path').attr('stroke','black').attr('stroke-width',0.25);

// Student Piece
var longBlock = pieces.append('rect');
longBlock.attr('width', 30).attr('height',120).attr('fill','cyan');

I would like to know the additional code please.

Hey @Rohit_Kundu,

Here it is! FYI — there are several elements in this code that we don’t teach yet, but you can learn more about most of them by looking at D3 documentation.

var pieces = svg.append('g');
    .attr('transform','scale(0.85)');
const max = Math.max(window.innerWidth, window.innerHeight);
for (let i = 0; i <= max; i += 30) {
    pieces.append('line')
         .attr('x1',i)
         .attr('y1',0)
         .attr('x2',i)
         .attr('y2',max)
         .attr('stroke-width',1)
         .attr('stroke','black');
    pieces.append('line')
         .attr('x1',0)
         .attr('y1',i)
         .attr('x2',max)
         .attr('y2',i)
         .attr('stroke-width',1)
         .attr('stroke','black');
}
var jPiece = pieces.append('path');
var lPiece = pieces.append('path');
var oPiece = pieces.append('path');
var sPiece = pieces.append('path');
var tPiece = pieces.append('path');
var zPiece = pieces.append('path');
jPiece.attr('fill','blue').attr('d','M 0 0 L 0 30 L 60 30 L 60 60 L 90 60 L 90 0 Z');
lPiece.attr('fill','orange').attr('d','M 0 0 L 0 60 L 30 60 L 30 30 L 90 30 L 90 0 Z');
oPiece.attr('fill','yellow').attr('d','M 0 0 L 0 60 L 60 60 L 60 0 Z');
sPiece.attr('fill','green').attr('d','M 0 0 L 0 60 L 30 60 L 30 90 L 60 90 L 60 30 L 30 30 L 30 0 Z');
tPiece.attr('fill','purple').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 60 60 L 60 30 L 90 30 L 90 0 Z');
zPiece.attr('fill','red').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 90 60 L 90 30 L 60 30 L 60 0 Z');
jPiece.attr('transform','translate(270,180) rotate(90)');
lPiece.attr('transform','translate(0,270) rotate(-90)');
oPiece.attr('transform','translate(60,210) rotate(0)');
sPiece.attr('transform','translate(240,210) rotate(90)');
tPiece.attr('transform','translate(150,240) rotate(-90)');
zPiece.attr('transform','translate(90,150) rotate(90)');
d3.selectAll('path').attr('stroke','black').attr('stroke-width',0.25);
var longBlock = pieces.append('rect')
    .attr('width', 30)
    .attr('height',120)
    .attr('fill','cyan');
2 Likes