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