Broken Button Blues pt-br Explainer

Explicação de Botão azul quebrado

Objetivo deste desafio: Conecte os botões às suas funções.
Passo a passo da solução: As funções estão todas prontas, mas nunca estão sendo chamadas no programa. É necessário usar .on('click',...) para conectar a variável de botão à função. Um truque para lembrar o que cada parte da chamada .on('click',...) faz é lê-la de trás para frente - se você quiser que a função de queda seja executada toda vez que clicar no botão vermelho, então use redButton.on('click', drop);. É a mesma coisa para o botão azul, exceto que se deve executar a função cleanUp.
Solução do código de exemplo:
(Toque abaixo para revelar)

function drop() {
  svg.append('circle')
      .attr('r', 15)
      .attr('fill', pickRandom(color))
      .attr('cx', pickRandom(slot))
      .attr('cy', 0)
    .transition()
      .duration(2000)
      .ease(d3.easeBounceOut)
      .attr('cy', 165);
}
function cleanUp() {
  d3.selectAll('circle')
    .transition()
      .duration(1000)
      .attr('cx', 500)
      .ease(d3.easeCubicIn)
      .remove();
}
redButton.on('click', drop);
blueButton.on('click', cleanUp);

Conceitos de JavaScript: Bloco de código (função, if statement), Aninhamento de chamadas, Expressão de membro, Identificadores, Funções de chamada, Identificadores
Conceitos do Grasshopper: pickRandom()
Conceitos de D3: .append(), .attr(‘r’,), .attr(‘fill’,), .attr(‘cx’,), .attr(‘cy’,), .transition(), .duration(), .ease(), .selectAll(), .remove(), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

//Tube
svg.append('path').attr('d','M0 0 L0 32 C0 44 4 48 16 48 L30 50 L30 30 C12 32 16 36 16 0 Z').attr('fill','silver').attr('transform','scale(2) translate(4 40)').attr('stroke','darkgrey');

//redButton
// Backplate
svg.append('rect').attr('x',0).attr('y',0).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');
// Button depth
var redButton = svg.append('rect').attr('x',5).attr('y',6).attr('width',40).attr('height',40).attr('fill','darkred');
// Button
var redButton = svg.append('rect').attr('x',5).attr('y',3).attr('width',40).attr('height',40).attr('fill','red');

//blueButton
// Backplate
svg.append('rect').attr('x',0).attr('y',60).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');
// Button depth
var blueButton = svg.append('rect').attr('x',5).attr('y',66).attr('width',40).attr('height',40).attr('fill','blue');
// Button
var blueButton = svg.append('rect').attr('x',5).attr('y',63).attr('width',40).attr('height',40).attr('fill','dodgerblue');

//Slots
var numDiv = 7;
var slotWidth = 30;

for (var i=0; i<numDiv; i++) {
    svg.append('rect').attr('x',65+i*(slotWidth+5)).attr('width',5).attr('height',30).attr('fill','silver');
}

var slot = [];
for (var i=0; i<numDiv-1; i++) {
    slot[i] = 65+5+(i*(slotWidth+5))+15;
}

[/details]