A hockey net with its zones

The net is the NHL's 6 by 4 feet, seen from the front with the shooter's left on the left. A post and a crossbar are on the frame, a shot wide or high is outside it; the top shelf and the five-hole are hockey's names for the middle cells of the top and bottom rows.

Goal mouth, Hockey net: where the shots crossed the goal lineThe Hockey net, 6 by 4 feet, seen from the front: the shooter's left is on the left. Data: 7 shots. By outcome: Goal 2, Saved 1, Post 1, Crossbar 1, Wide 1, High 1.Top left cornerTop left cornerTop shelfTop shelfTop right cornerTop right cornerLeft sideLeft sideCentreCentreRight sideRight sideBottom left cornerBottom left cornerFive-holeFive-holeBottom right cornerBottom right corner7 shotsBy outcome: Goal 2, Saved 1, Post 1, Crossbar 1, Wide 1, High 1.

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

import { drawGoalMouth } from "@johnmorrisdotca/kyogijo-stadiums/target";

const shots = [
  { x: -2.4, z: 3.6, outcome: "goal" },
  { x: 0, z: 0.4, outcome: "saved" },
  { x: 1.5, z: 1.2, outcome: "goal" },
  { x: -3, z: 2.5, outcome: "post" },
  { x: 1, z: 4, outcome: "crossbar" },
  { x: 3.4, z: 2, outcome: "wide" },
  { x: 1.2, z: 4.6, outcome: "high" },
];
const svg = drawGoalMouth(shots, { sport: "nhl", zones: "labels" }).svg;

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.