Two shot charts and a score
A game in three pictures Drawings (3): First half; Second half; Final. Synthetic shots. A game in three pictures First half NBA shot chart Drawn 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 90 shots. Field goals made, % in 5 zones, from 28.6% to 50%. Highest: Left corner 3 (50%), Right corner 3 (33.3%), Mid-range (33.3%). 90 shots. By outcome: Made 30, Missed 60. Key. Made, Missed Key. Zone chart of 90 shots Field goals made, % in 5 zones, from 28.6% to 50%. Highest: Left corner 3 (50%), Right corner 3 (33.3%), Mid-range (33.3%). Above the break 3: 31.8% (22) Left corner 3: 50% (4) Right corner 3: 33.3% (3) Mid-range: 33.3% (54) In the paint (non-RA): 28.6% (7) Restricted area (0) 50% 2/4 33.3% 1/3 33.3% 18/54 31.8% 7/22 28.6% 2/7 Legend: Field goals made, % Field goals made, % 30% 40% 50% 60% 90 shots By outcome: Made 30, Missed 60. Key Made, Missed Key Made Missed Second half NBA shot chart Drawn 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 140 shots. Field goals made, % in 5 zones, from 25% to 50%. Highest: Left corner 3 (50%), Mid-range (33.3%), Above the break 3 (32.4%). 140 shots. By outcome: Made 47, Missed 93. Key. Made, Missed Key. Zone chart of 140 shots Field goals made, % in 5 zones, from 25% to 50%. Highest: Left corner 3 (50%), Mid-range (33.3%), Above the break 3 (32.4%). Above the break 3: 32.4% (34) Left corner 3: 50% (8) Right corner 3: 25% (4) Mid-range: 33.3% (87) In the paint (non-RA): 28.6% (7) Restricted area (0) 50% 4/8 33.3% 29/87 32.4% 11/34 28.6% 2/7 25% 1/4 Legend: Field goals made, % Field goals made, % 30% 40% 50% 60% 140 shots By outcome: Made 47, Missed 93. Key Made, Missed Key Made Missed Final Summit Peaks 108, Metro Bolts 112, Final Final. Summit Peaks 108, Metro Bolts 112. Metro Bolts won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. SUMMIT PEAKS METRO BOLTS SMT 108 MTB 112 – Synthetic shots The picture above was drawn when the docs were built. The script below draws it again with the published package.
import { nbaShotChart } from "@johnmorrisdotca/kyogijo-stadiums/charts";
import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
const shots = (n) => Array.from({ length: n }, (_, i) => ({ x: ((i * 97) % 480) - 240, y: (i * 61) % 300, made: i % 3 === 0 }));
const svg = drawGrid(
[
{ drawing: nbaShotChart(shots(90), { league: 46, minShots: 2 }), label: "First half" },
{ drawing: nbaShotChart(shots(140), { league: 46, minShots: 2 }), label: "Second half" },
{ drawing: { sport: "nba", away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" }, label: "Final" },
],
{ columns: 2, width: 1000, title: "A game in three pictures", endnote: "Synthetic shots" },
);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.