In The Middle es-419 Explainer

Explicador de En el medio

Objetivo de este acertijo: Agregar otro conjunto de puntos de tamaño mediano.
Tutorial de la solución: El for loop ciclará 50 veces, y cada vez, hará un círculo azul grande y un círculo verde pequeño. Básicamente, tendrás que copiar uno de los comandos y cambiar el tamaño y el color. Debes comenzar a escribir el nuevo comando entre los otros dos porque será de tamaño mediano y eso le da una mejor oportunidad de que el círculo grande no lo cubra o de cubrir el círculo pequeño (sin embargo, no se puede garantizar que no sucederá la próxima vez por el ciclo). El tamaño lo define el atributo 'r', y debe ser entre 5 y 15 porque esos son los radios de los círculos pequeños y grandes. Puedes elegir el color que quieras, pero busca algo que se vea bien.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

for (var i = 0; i < 50; i = i + 1) {
  svg.append('circle')
    .attr('r', 15)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'dodgerblue');
  svg.append('circle')
    .attr('r', 10)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'white');
  svg.append('circle')
    .attr('r', 5)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'lime');
}

Conceptos de JavaScript: expresión binaria (+, <), bloque de código (for loop), funciones de llamada, anidamiento de llamadas
Conceptos de Grasshopper: pickRandom()
Conceptos de D3: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var position = [];
for (var i=15; i<=window.innerWidth; i+=30) position.push(i); // (var i=15; i<=315; i+=30)