Nested Squares pt-br Explainer

Explicação de Quadrados aninhados

Objetivo deste desafio: Criar uma coleção de quadrados que diminuem de tamanho por um valor fixo.

Passo a passo da solução: Quando o código é executado pela 1ª vez, ele cria um conjunto de retângulos com cor, largura e altura aleatórias. Em vez de usar um número aleatório para a largura, podemos usar o valor da variável size(tamanho). A variável size começa em 200 e diminui em 10 cada vez através do laço, desde que seja um número positivo.

Altere o valor de .attr('width',pickRandom(200)) para .attr('width',size). Como um quadrado tem a mesma altura e largura, você também pode definir a altura como size.

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

for (let size = 200; size > 0; size -= 10) {
  svg.append('rect')
       .attr('fill', pickRandom(color))
       .attr('width', size)
       .attr('height', size);
}

Conceitos de JavaScript: Operadores de atribuição (-=), Expressão binária (>), Bloco de código (laço for)

Conceitos do Grasshopper: pickRandom()

Conceitos de D3: .append(), .attr('fill), .attr('height',), .attr('width',)

Código Adicional (código oculto executado antes do código do desafio):

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