Heat map

A count in each cell of a grid, in a ramp, cut to the boards.

NHL hockey rinkDrawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Data: Heat map of 360 shots. Count in 220 cells, from 1 to 4. Highest: 150, 26.3 (4), 162, 30.4 (4), 130, 46.5 (4).Heat map of 360 shotsCount in 220 cells, from 1 to 4. Highest: 150, 26.3 (4), 162, 30.4 (4), 130, 46.5 (4).Legend: Shots in each 4 by 4 feetShots in each 4 by 4 feet1234

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: 360 }, (_, i) => { const t = i * 2.399963; const r = 4 + 54 * Math.sqrt((i % 120) / 120); return { x: 189 - r * Math.abs(Math.cos(t)) * 1.1, y: 42.5 + r * Math.sin(t) * 0.7 }; });
const svg = drawKyogijo({
  sport: "nhl",
  layers: [{ kind: "heatmap", name: "shots", data: shots, bins: [50, 21], legend: { title: "Shots in each 4 by 4 feet" } }],
});

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.