Bubble Up pt-br Explainer

Explicação de Bolhas sobem

Objetivo deste desafio: Reduzir a velocidade da .transition() que faz as bubbles subirem.

Passo a passo da solução: O tempo que leva para uma .transition() animar as mudanças de atributos é definido usando .duration(). O argumento de .duration() está em milissegundos, portanto .duration(1000) significa, “a transição levará 1 segundo para ser concluída”. Para desacelerar uma animação, é necessário fazer com que ela dure mais tempo.
Se você quiser que dure 3,5 segundos, isso seria 3500 milissegundos. Você pode anexar .duration(3500) a .transition() para definir o tempo.

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

function rise() {
  bubbles.transition().duration(3500).attr('cy',0);
}
bubbles.on('click', rise);

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

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

for (let i=0; i<50; i++) {
    svg.append('circle')
                .attr('r',5 + Math.random()*35)
                .attr('cx',Math.random()*window.innerWidth)
                .attr('cy',20 + Math.random()*window.innerHeight)
                .attr('fill',`rgb(${115+pickRandom(20)},${185+pickRandom(20)},${225+pickRandom(20)})`)
                .attr('opacity',0.8);
}

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

[/details]