MLB spray chart
Baseball spray chart Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. The outfield fence follows the figures published for Fenway Park. Data: Zone chart of 60 balls in play. Share of all, % in 6 zones, from 1.8% to 33.9%. Highest: Centre, outfield (33.9%), Opposite, outfield (28.6%), Pull, outfield (25%). 4 outside the grid or the zones. 60 balls in play. By outcome: Single 10, Double 10, Triple 10, Home run 10, Out 20. Key. Single, Double, Triple, Home run, Out Key. Zone chart of 60 balls in play Share of all, % in 6 zones, from 1.8% to 33.9%. Highest: Centre, outfield (33.9%), Opposite, outfield (28.6%), Pull, outfield (25%). 4 outside the grid or the zones. Pull, infield: 1.8% (1) Centre, infield: 5.4% (3) Opposite, infield: 5.4% (3) Pull, outfield: 25% (14) Centre, outfield: 33.9% (19) Opposite, outfield: 28.6% (16) 33.9% 28.6% 25% 5.4% 5.4% 1.8% Legend: Share of all, % Share of all, % 10% 20% 30% 60 balls in play By outcome: Single 10, Double 10, Triple 10, Home run 10, Out 20. Key Single, Double, Triple, Home run, Out Key Single Double Triple Home run Out The picture above was drawn when the docs were built. The script below draws it again with the published package.
import { mlbSprayChart } from "@johnmorrisdotca/kyogijo-stadiums/charts";
const types = ["single", "field_out", "double", "field_out", "home_run", "triple"];
const balls = Array.from({ length: 60 }, (_, i) => ({ x: 125.4 + (((i * 37) % 120) - 60), y: 198.27 - (30 + ((i * 53) % 110)), type: types[i % types.length] }));
const svg = mlbSprayChart(balls, { park: "fenway-park", zones: 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.