nfl-tracking

NFL tracking data (x, y in yards). The middle of the right 20-yard line is (90, 26.67) in yards; the arrows show which way x (blue) and y (orange) grow.

NFL football fieldDrawn as: an American football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Data: 1 x grows. 1 y grows. 1 the middle of the right 20-yard line. 2 axes.1020304050403020100102030405040302011 x grows1 y grows1 the middle of the right 20-yard linethe middle of the right 20-yard line: 90, 26.672 axesxy

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

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

const svg = drawKyogijo({
  sport: "nfl",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "nfl-tracking",
      data: [{ x: 90, y: 26.67, x2: 104.4, y2: 26.67 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "nfl-tracking",
      data: [{ x: 90, y: 26.67, x2: 90, y2: 33.07 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right 20-yard line",
      from: "nfl-tracking",
      data: [{ x: 90, y: 26.67, title: "the middle of the right 20-yard line: 90, 26.67" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "nfl-tracking",
      data: [{ x: 108.72, y: 26.67, text: "x" }, { x: 90, y: 35.63, text: "y" }],
      style: { size: 4 },
    },
  ],
});

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.