Rainbow Hopper es-419 Explainer

Explicador de Saltamontes de arcoíris

Objetivo de este acertijo: Hacer que el saltamontes salte y crear un arcoíris de cuadrados.
Tutorial de la solución: Cuando ejecutas el código, solo verás un cuadrado violeta. Esto se debe a que todos los rectángulos están dibujados encima de cada uno en el mismo lugar: x=0, y=50. Lo que queremos es que el valor x sea diferente para cada uno. Para hacerlo, cambia .attr('x', 0) a .attr('x', location) de modo que cada cuadrado se define en el valor de la variable location. Si ejecutas el código ahora, seguirá sin funcionar. Esto se debe a que location siempre es igual a cero. Dentro del ciclo, el valor location debe aumentar después de que se dibuja cada cuadrado. Debe aumentar en 30 cada vez porque ese es el ancho de cada cuadrado. Entonces, después del comando para agregar un cuadrado, debes agregar location = location + 30;. Esto toma el valor actual de location, agrega 30, y luego almacena la respuesta nuevamente dentro de la variable location. Si ejecutas el código ahora, los cuadrados se dibujarán en orden. Solo una cosa más: el saltamontes debe saltar. Lo que tienes que hacer es llamar a la función jump() en algún lugar dentro de la función drawSquare.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

var location = 0;
function drawSquare(color) {
  svg.append('rect')
    .transition()
      .delay(17*location)
      .attr('width', 30)
      .attr('height', 30)
      .attr('x', location)
      .attr('y', 50)
      .attr('fill', color);
  jump();
  location = location + 30;
}
drawSquare('red');
drawSquare('orange');
drawSquare('yellow');
drawSquare('green');
drawSquare('blue');
drawSquare('indigo');
drawSquare('violet');

Conceptos de JavaScript: expresión binaria (+), bloque de código (función), identificadores, expresión de miembro
Conceptos de D3: .append(), .transition(), .delay(), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

//Create Group
var grasshopper = svg.append('g');
var myColor = d3.rgb(115, 255, 115);

//Add parts to group
var head = grasshopper.append('path').attr('fill',myColor).attr('d','M761.15,157.3H730.21c0-34.59,8.18-68.32,22.31-99.37,6.51-14.31-4.16-30.55-19.88-30.55a21.86,21.86,0,0,0-19,11.09A239.76,239.76,0,0,0,681.89,157.3h0A216.16,216.16,0,0,0,818.08,358.12l10.4,4.14V224.63A67.33,67.33,0,0,0,761.15,157.3Z');
head.attr('transform', 'translate(-15 0) scale(0.05)');

var body = grasshopper.append('path').attr('fill',myColor).attr('d','M501.2,92.5,339,27.38c0,52.43,24.29,110.07,45.28,129.92H171.11c20.5,112.51,165,205,308.15,205h0L410.6,431c-15.37,15.37-4.49,41.65,17.25,41.65h0a24.4,24.4,0,0,0,17.25-7.15L548,362.62l1.29.53v84.25c0,13.44,10.51,25,23.94,25.21A24.4,24.4,0,0,0,598,448.22v-86h48.8v85.14c0,13.43,10.51,25,23.94,25.21a24.4,24.4,0,0,0,24.86-24.4v-86h0C695.65,239.87,622,142,501.2,92.5Z');
body.attr('transform', 'translate(-15 0) scale(0.05)');

//Initial Location
grasshopper.attr('transform','translate(10 20)');

//Horizontal Index
var x = 0;

function jump(){
    grasshopper.transition().delay(x*500/30).attr('transform','translate('+(x+=15)+' 10)').transition().attr('transform','translate('+(x+=15)+' 20)');
}