NFL pass chart

NFL pass chartDrawn 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: Zone chart of 40 passes. Completions, % in 5 zones, from 25% to 80%. Highest: Deep, middle (80%), Deep, left (64.3%), Deep, right (63.6%). 1 line of scrimmage. 40 passes. By outcome: complete 16, incomplete 8, touchdown 8, interception 8. 40 passes. By outcome: Complete 16, Incomplete 8, Touchdown 8, Interception 8. Air yards from 4 to 47. Key. Complete, Incomplete, Touchdown, Interception Key.102030405040302010010203040504030201Zone chart of 40 passesCompletions, % in 5 zones, from 25% to 80%. Highest: Deep, middle (80%), Deep, left (64.3%), Deep, right (63.6%).Short, left: 25% (4)Short, middle (1)Short, right: 60% (5)Deep, left: 64.3% (14)Deep, middle: 80% (5)Deep, right: 63.6% (11)80%4/564.3%9/1463.6%7/1160%3/525%1/4Legend: Completions, %Completions, %40%60%80%1 line of scrimmage40 passesBy outcome: complete 16, incomplete 8, touchdown 8, interception 8.40 passesBy outcome: Complete 16, Incomplete 8, Touchdown 8, Interception 8. Air yards from 4 to 47.KeyComplete, Incomplete, Touchdown, InterceptionKeyCompleteIncompleteTouchdownInterception

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

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

const outcomes = ["complete", "complete", "incomplete", "touchdown", "interception"];
const passes = Array.from({ length: 40 }, (_, i) => ({ x: 66 + ((i * 13) % 44), y: 8 + ((i * 17) % 40), outcome: outcomes[i % outcomes.length], fromX: 60, fromY: 26 }));
const svg = nflPassChart(passes, { los: 62, arrows: true }).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.