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%)`);