Off to the Races explainer

The aim of this puzzle: Use the racer objects from the list to set the color and race time for each circle.

Walkthrough of the solution: The 1st section of code creates an empty list array. Then adds 10 objects to the list. Each object has 3 propeties: lane, color, and time.

  • The lane for each racer will be used for its 'cy' value. It goes from 10, 30, 50, …, 190.
  • The color is picked randomly and will be used for the 'fill'.
  • The time is a random number between 1001 and 6000 which will be used as the number of milliseconds for the animation’s .duration()

The finishLine is just a tall, thin red rectangle.

The For Loop will take each object in the list and store it in racer. Then the racer object is used to create a circle for each object. The 'cy' attribute already uses racer.lane.

Instead of 'teal', the attr('fill',) should use the color property of the racer. Change .attr('fill','teal') to .attr('fill',racer.color).

Instead of .duration(1000), the length of the animation should be the racer.time. Change 1000 to racer.time.

Sample code solution:
(Tap below to reveal)

let list = [];

for (let entry = 0; entry < 10; entry++) {
  list.push({
    lane: 10 + entry*20,
    color: pickRandom(color),
    time: 1000 + pickRandom(5000)
  });
}

let finishLine = svg.append('rect')
                      .attr('width', 5)
                      .attr('height', 200)
                      .attr('fill', 'red')
                      .attr('x', 185);

for (let racer of list) {
  svg.append('circle')
       .attr('cx',0)
       .attr('cy',racer.lane)
       .attr('r',10)
       .attr('fill',racer.color)
      .transition()
       .duration(racer.time)
       .attr('cx',200);
}

JavaScript Concepts: Code Block (for loop), Chaining

Grasshopper Concepts: pickRandom()

D3 Concepts: .append(), .attr('height',), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .attr('width',), .attr('x',), .duration(), .transition()
Additional Code (hidden code that runs before the puzzle’s code):

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