NHL shot map
NHL shot map Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Data: Zone chart of 40 shots. Expected goals (xG) in 3 zones, from 0.46 to 4.7. Highest: Offensive zone (4.7), Outer slot (1.1), Inner slot (0.46). 40 shots. By outcome: Goal 10, Saved 10, Off target 10, Blocked 10. The size of a mark shows its expected goals (xG). Key. Goal, Saved, Off target, Blocked Key. Size: xG, xG 6.2 Zone chart of 40 shots Expected goals (xG) in 3 zones, from 0.46 to 4.7. Highest: Offensive zone (4.7), Outer slot (1.1), Inner slot (0.46). Offensive zone: 4.7 (31) Behind the goal line (0) Outer slot: 1.1 (6) Inner slot: 0.46 (3) 4.7 1.1 0.46 Legend: Expected goals (xG) Expected goals (xG) 1 2 3 4 40 shots By outcome: Goal 10, Saved 10, Off target 10, Blocked 10. The size of a mark shows its expected goals (xG). Key Goal, Saved, Off target, Blocked Key Size: xG, xG 6.2 Goal Saved Off target Blocked Size: xG xG 6.2 The picture above was drawn when the docs were built. The script below draws it again with the published package.
import { nhlShotMap } from "@johnmorrisdotca/kyogijo-stadiums/charts";
const shots = Array.from({ length: 40 }, (_, i) => ({ x: (i % 2 ? -1 : 1) * (50 + ((i * 11) % 38)), y: ((i * 23) % 60) - 30, outcome: ["goal", "saved", "missed", "blocked"][i % 4], xg: 0.03 + (i % 9) / 30, team: i % 2 ? "away" : "home" }));
const svg = nhlShotMap(shots, { fold: true, zones: true, statistic: "xg" }).draw();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.