Get the Popcorn pt-br Explainer

Puzzle Explainer
#1

Explicação de Pegue a pipoca

Objetivo deste desafio: Animar o raio e preencher as mudanças de cor usando .transition()

Passo a passo da solução: Para animar uma mudança de atributo, você usa .transition(). A ordem de .transition() e .attr() é importante. É necessário que as chamadas para .attr() venham depois da .transition(), mas ainda assim elas devem ser anexadas. Assim: kernels.transition().attr().attr().

NÃO assim:

kernels.transition();
kernels.attr();

kernels.attr().transition()

Isso significa que você deve selecionar kernels dentro do bloco de códigos {} e depois adicionar .transition(). Isso anexará a .transition() diretamente a kernels para que fique antes das chamadas .attr().

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

function heatUp() {
  kernels.transition().attr('r', 30).attr('fill', 'white');
}
kernels.on('click', heatUp);

Conceitos de JavaScript: Bloco de código (função)

Conceitos de D3: .attr('r',), .attr('fill',), .on('click',...), .transition()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

function gauss(scale,iter=6) {
    return scale*Array(iter).fill().map(i=>Math.random()).reduce((a,c)=>a+c)/iter;
}

for (let i=0; i<50; i++) {
    svg.append('circle')
                .attr('r',8)
                .attr('cx',gauss(window.innerWidth))
                .attr('cy',gauss(window.innerHeight))
                .attr('fill','#E89800')
                .attr('stroke','grey')
                .attr('stroke-width',0.2);
}

let kernels = d3.selectAll('circle');

[/details]