Map Of Places es-419 Explainer

Puzzle Explainer
#1

Explicador de Mapa de lugares

Objetivo de este acertijo: Agregar los lugares al mapa usando la función drawOnMap.
Tutorial de la solución: Cuando se ejecuta el código de inicio, verás que hay una cuadrícula en blanco. Debes agregar cada lugar de arrayOfPlaces en el mapa con la función drawOnMap. Ya hay un for...of loop configurado para que lo uses. Se ejecuta en todos los lugares, pero debes asegurarte de que haga algo con ellos; dibújalos en el mapa usando drawOnMap(...). ¿Qué argumentos toma la función, qué va en los paréntesis? Si miras la definición de la función, verás que drawOnMap pide una x, y y un valor color. Entonces, si te dan un object place del arreglo, ¿cómo accedes a su x, y, y valor color? Al usar expresiones de miembro, el nombre de la propiedad con un punto antes de ella. Esto significa que place.name te daría el nombre del lugar, y place.color te daría el color, etc. Ahora, si ejecutas nuevamente el código, habrá una parte del círculo negro en la esquina superior izquierda del mapa. Esto se debe a que la función drawOnMap no se completó; no usa sus parámetros: x, y y color. Debes asegurarte de que .attr() para cx esté definido en x, cy esté definido en y, y fill esté definido en color. ¡Ahora todo debería funcionar!
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

var arrayOfPlaces = [
  {
    name: 'mall',
    x: 240,
    y: 160,
    color: red
  },
  {
    name: 'home',
    x: 50,
    y: 70,
    color: blue
  },
  {
    name: 'gym',
    x: 100,
    y: 140,
    color: yellow
  },
  {
    name: 'work',
    x: 180,
    y: 30,
    color: white
  }
];
function drawOnMap(x, y, color) {
    var newPoint = svg.append('circle')
.attr('r', 8);
    newPoint.attr('cx', x)
      .attr('cy', y)
      .attr('fill', color);
}
for (var place of arrayOfPlaces) {
    drawOnMap(place.x, place.y, place.color);
}

Conceptos de JavaScript: bloque de código (función, for loop), encadenamiento, biblioteca D3, modificadores D3
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):

for (var i=0; i<400; i = i + 20) {
    var line = svg.append('rect').attr('width', 1).attr('height', 400).attr('x', i).attr('fill', 'slategrey');
}
for (var i=0; i<400; i = i + 20) {
    var line = svg.append('rect').attr('width', 400).attr('height', 1).attr('y', i).attr('fill', 'slategrey');
}
#2
#3