A soccer goal, dark

The Laws' 7.32 by 2.44 metres; the marks are sized by expected goals.

Goal mouth, Soccer goal: where the shots crossed the goal lineThe Soccer goal, 7.32 by 2.44 metres, seen from the front: the shooter's left is on the left. Data: 5 shots. By outcome: Goal 1, Saved 1, Post 1, Wide 1, High 1.Top left cornerTop centreTop right cornerLeft sideCentreRight sideBottom left cornerBottom centreBottom right corner5 shotsBy outcome: Goal 1, Saved 1, Post 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: -3.3, z: 2.2, outcome: "goal", value: 0.4 },
  { x: 1, z: 0.5, outcome: "saved", value: 0.1 },
  { x: 3.66, z: 1.2, outcome: "post", value: 0.05 },
  { x: 4.4, z: 1, outcome: "wide", value: 0.03 },
  { x: 0, z: 2.9, outcome: "high", value: 0.02 },
];
const svg = drawGoalMouth(shots, { sport: "soccer", theme: "dark", zones: true, sizeBy: "value" }).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.