A race replay, the 400 m

Each runner is on the curve of the lane, starting at its stagger; at 20 seconds the field is on the back straight.

Replay of the 400 mDrawn as: an athletics track of 400 metres with 8 lanes, its bends of 36.50 metres radius at the kerb and its straights of 84.39 metres, with the finish line and the lane numbers. A soccer pitch lies inside the track. Field events marked: High jump, Pole vault, Long jump, Triple jump, Shot put, Discus throw, Hammer throw, Javelin throw. Races marked: 400 m. Data: Replay, 0:49. 8 tracked objects. By team: home 8. 9 events.PlayersBy team: home 8.Runner 1 1Runner 2 2Runner 3 3Runner 4 4Runner 5 5Runner 6 6Runner 7 7Runner 8 8Shirt numbers12345678

The picture above was drawn when the docs were built. The script below draws it again with the published package.

import { raceReplay } from "@johnmorrisdotca/kyogijo-stadiums/athletics";
import { drawFrame } from "@johnmorrisdotca/kyogijo-stadiums/replay";

const runners = Array.from({ length: 8 }, (_, i) => ({ lane: i + 1, name: "Runner " + (i + 1), time: 44.2 + i * 0.25, reaction: 0.14 }));
const replay = raceReplay(runners, { race: "400m" });
const svg = drawFrame(replay.options, replay.timeline, 20, replay.look);

This page imports the package from jsDelivr (major version 0), which serves only versions that have been published to npm. A feature added after the last release is not in it: the page then keeps the picture above and says why. The docs were built from version 0.6.1.