Color Field pt-br Explainer

Puzzle Explainer
#1

Explicação de Campo de cores

Objetivo do desafio:
Este desafio usa conceitos de JavaScript previamente ensinados (variáveis e manipuladores de eventos) com conceitos de D3 previamente ensinados (método de transição, método de duração e atributo de preenchimento).

Especificamente, você usará um manipulador de eventos e uma variável para animar o atributo de mudança 'fill' de uma forma SVG.

Passo a passo da solução:
No código com o qual você começa, existem duas funções, changeBottom e changeTop, e dois manipuladores de eventos. A função changeBottom cria a variável randomColor e define uma animação de .transition() incompleta em bottom. A animação não está completa porque falta um atributo e um valor para que bottom faça a transição. A função changeTop faz a mesma coisa, mas com a variável top. Abaixo destas funções estão dois manipuladores de eventos que especificam qual função chamar quando se toca em top e bottom. Em seu estado atual, nada acontece quando se toca no retângulo. Neste desafio, você completará as animações dentro das funções, de modo a animar o retângulo quando se toca nele.

Para concluir o desafio, anexe .attr('fill', randomColor) a .duration(2000) dentro das funções changeTop e changeBottom. Agora, quando você toca na parte superior ou inferior do retângulo, seu valor de cor mudará.

Solução do código de exemplo:
(Toque abaixo para revelar)

function changeBottom () {
    let randomColor = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255));
    bottom.transition().duration(2000).attr('fill', randomColor)
}

function changeTop () {
    let randomColor = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255));
    top.transition().duration(2000).attr('fill', randomColor)
}

bottom.on('click', changeBottom)
top.on('click', changeTop)

Conceitos de JavaScript: Variável, Manipuladores de Eventos, Declaração de Função
Conceitos de D3: Atributo, .transition(), .duration()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

var svg = canvas.append('g');

svg.attr('transform',`translate(${window.innerWidth/2},${window.innerHeight/2})`);

let bottom = svg.append('rect').attr('width', '160').attr('height', '70').attr('fill', 'rgb(255,112,54)').attr('x', -70).attr('y',40)
let top = svg.append('rect').attr('width', '160').attr('height', '135').attr('fill', 'rgb(248,169,51)').attr('x', -70).attr('y',-100)

[/details]