Spacecraft Overhaul explainer

Puzzle Explainer
#1

The aim of this puzzle: Repair the spaceship by modifying its attributes.
Walkthrough of the solution: There are three things wrong with the ship:

  1. The crossbar should be filled 'grey'
  2. The rightWing should have a height of 200
  3. The cabin should have a radius of 30 and a 'cy' of 130.

To change each of these attributes you use the .attr() function. It takes two arguments inside of its parentheses which are separated by a comma. The first argument is a string, so it’s surrounded by quotation marks. This should be the name of the attribute you want to change, like: 'fill' or 'x'. The second argument is the value for that attribute, and it might be a string or number, like: 'grey' or 200. So, first find the identifier you want to change and follow the .attr() chain until you see the name of the property you need to adjust. Then inside that same set of parentheses as the property name, change the value (either a number or a string).
Sample code solution:
(Tap below to reveal)

leftWing.attr('width', 30)
  .attr('height', 200)
  .attr('x', 60)
  .attr('y', 30);
rightWing.attr('width', 30)
  .attr('height', 200)
  .attr('x', 210)
  .attr('y', 30);
crossbar.attr('width', 150)
  .attr('height', 10)
  .attr('x', 75)
  .attr('y', 125)
  .attr('fill', 'grey');
cabin.attr('r', 30)
  .attr('cx', 150)
  .attr('cy', 130);

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

svg.attr('transform','translate(0,-20)');

var leftWing = svg.append('rect');
var rightWing = svg.append('rect');
var crossbar = svg.append('rect');
var cabin = svg.append('circle');

leftWing.attr('fill','rgb(153,153,153');
rightWing.attr('fill','rgb(153,153,153)');
cabin.attr('fill','rgb(28,28,28)');
#2

Yes yes! I want to know that!

#3

Hey @Rohit_Kundu,

See below — there are elements in this code that we don’t yet teach.

svg.attr('transform','translate(0,-20)');

var leftWing = svg.append('rect');
var rightWing = svg.append('rect');
var crossbar = svg.append('rect');
var cabin = svg.append('circle');

leftWing.attr('fill','rgb(153,153,153');
rightWing.attr('fill','rgb(153,153,153)');
cabin.attr('fill','rgb(28,28,28)');
#4

I wrote everything that was written in “Instructions” but the code didn’t let me continue.

image
image1536×2048 219 KB

#5

The aim of this puzzle: Repair the spaceship by modifying its attributes.
Walkthrough of the solution: There are three things wrong with the ship:

  1. The crossbar should be filled 'grey'
  2. The rightWing should have a height of 200
  3. The cabin should have a radius of 30 and a 'cy' of 130.

To change each of these attributes you use the .attr() function. It takes two arguments inside of its parentheses which are separated by a comma. The first argument is a string, so it’s surrounded by quotation marks. This should be the name of the attribute you want to change, like: 'fill' or 'x'. The second argument is the value for that attribute, and it might be a string or number, like: 'grey' or 200. So, first find the identifier you want to change and follow the .attr() chain until you see the name of the property you need to adjust. Then inside that same set of parentheses as the property name, change the value (either a number or a string).
Sample code solution:
(Tap below to reveal)

leftWing.attr('width', 30)
  .attr('height', 200)
  .attr('x', 60)
  .attr('y', 30);
rightWing.attr('width', 30)
  .attr('height', 200)
  .attr('x', 210)
  .attr('y', 30);
crossbar.attr('width', 150)
  .attr('height', 10)
  .attr('x', 75)
  .attr('y', 125)
  .attr('fill', 'grey');
cabin.attr('r', 30)
  .attr('cx', 150)
  .attr('cy', 130);

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

svg.attr('transform','translate(0,-20)');

var leftWing = svg.append('rect');
var rightWing = svg.append('rect');
var crossbar = svg.append('rect');
var cabin = svg.append('circle');

leftWing.attr('fill','rgb(153,153,153');
rightWing.attr('fill','rgb(153,153,153)');
cabin.attr('fill','rgb(28,28,28)');