Zones: shot zones

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Data: Zone chart of 160 shots. Success rate, % in 5 zones, from 25% to 50%. Highest: Left corner 3 (right end) (50%), Mid-range (right end) (34%), Above the break 3 (right end) (31.6%).Zone chart of 160 shotsSuccess rate, % in 5 zones, from 25% to 50%. Highest: Left corner 3 (right end) (50%), Mid-range (right end) (34%), Above the break 3 (right end) (31.6%).Above the break 3 (left end) (0)Right corner 3 (left end) (0)Left corner 3 (left end) (0)Mid-range (left end) (0)In the paint (non-RA) (left end) (0)Restricted area (left end) (0)Above the break 3 (right end): 31.6% (38)Left corner 3 (right end): 50% (8)Right corner 3 (right end): 25% (4)Mid-range (right end): 34% (103)In the paint (non-RA) (right end): 28.6% (7)Restricted area (right end) (0)50%34%31.6%28.6%25%Legend: Success rate, %Success rate, %30%40%50%

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 shots = Array.from({ length: 160 }, (_, i) => ({ x: ((i * 97) % 480) - 240, y: (i * 61) % 300, outcome: i % 3 === 0 ? "made" : "missed" }));
const svg = drawKyogijo({
  sport: "nba",
  layers: [{ kind: "zones", name: "shots", zones: "nba-shot", from: "nba-stats", data: shots, statistic: "rate", labels: true, legend: true }],
});

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.