Kyogijo Stadiums競技場

Guides, the reference, a gallery of every picture it can draw, and how it compares: the pages are made from the package's own files when the site is built.

About the name

The pages are in English; this contents, the search and the buttons are in Japanese.

Gallery: display ranges and zoom

A drawing cropped to a named part of its surface (range), at either end, wide and tall, to a box of your own, with data, annotations and a score. Every picture is drawn by the build from the code under it. The pictures share one stylesheet, which is left out of each one's SVG here; drawKyogijo puts it in every drawing unless style: "none" says not to.

The named ranges#

RANGES lists them for each sport; range: "offensive-zone" is the name, and each has the end it is at by default.

NFL field: red-zone

NFL football fieldDrawn 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. Shows only the red zone at the right end.102030405040302010010203040504030201

At the right end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "red-zone" });

NFL field: end-zone

NFL football fieldDrawn 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. Shows only the end zone at the right end.102030405040302010010203040504030201

At the right end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "end-zone" });

NFL field: between-the-20s

NFL football fieldDrawn 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. Shows only the field between the 20-yard lines.102030405040302010010203040504030201

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "between-the-20s" });

NFL field: field-of-play

NFL football fieldDrawn 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. Shows only the field of play.102030405040302010010203040504030201

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "field-of-play" });

NFL field: own-half

NFL football fieldDrawn 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. Shows only the own half at the left end.102030405040302010010203040504030201

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "own-half" });

NFL field: opponent-half

NFL football fieldDrawn 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. Shows only the opponent's half at the right end.102030405040302010010203040504030201

At the right end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "opponent-half" });

NHL rink: offensive-zone

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. Shows only the offensive zone at the right end.

At the right end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: "offensive-zone" });

NHL rink: defensive-zone

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. Shows only the defensive zone at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: "defensive-zone" });

NHL rink: neutral-zone

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. Shows only the neutral zone.

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: "neutral-zone" });

NHL rink: half

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. Shows only the half at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: "half" });

NBA court: half-court

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Shows only the half court at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", range: "half-court" });

NBA court: paint

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Shows only the paint at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", range: "paint" });

Soccer pitch: half

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only the half at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: "half" });

Soccer pitch: final-third

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only the final third at the right end.

At the right end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: "final-third" });

Soccer pitch: defensive-third

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only the defensive third at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: "defensive-third" });

Soccer pitch: middle-third

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only the middle third.

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: "middle-third" });

Soccer pitch: penalty-area

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only the penalty area at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: "penalty-area" });

Baseball field: infield

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Shows only the infield.

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "mlb", range: "infield" });

Baseball field: outfield

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Shows only the outfield.

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "mlb", range: "outfield" });

Curling sheet: sheet

Curling sheetDrawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Shows only the whole sheet.

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "curling", range: "sheet", orientation: "landscape" });

Curling sheet: half

Curling sheetDrawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Shows only the half at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "curling", range: "half", orientation: "landscape" });

Curling sheet: house

Curling sheetDrawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Shows only the house at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "curling", range: "house", orientation: "landscape" });

Curling sheet: folded

Curling sheetDrawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Shown folded: the whole sheet is in the middle, with its left house enlarged above it and its right house enlarged below it. Each enlarged part runs from the hog line to the back line.Left houseRight house

A range with no end.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "curling", range: "folded", orientation: "landscape" });

Tennis court: half-court

Tennis courtDrawn as: a tennis court, 78 by 36 feet, with its baselines, singles and doubles sidelines, service lines, centre service lines, centre marks and the net. Shows only the half court at the left end.

At the left end unless `end` says the other.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "tennis", range: "half-court" });

The other end, and tall#

range: { name, end } puts a range at the other end; a tall drawing shows the same part on its side, with the left end at the top.

The offensive zone at the left end

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. Shows only the offensive zone at the left end.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: { name: "offensive-zone", end: "left" } });

The red zone at the left end

NFL football fieldDrawn 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. Shows only the red zone at the left end.102030405040302010010203040504030201
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: { name: "red-zone", end: "left" } });

The offensive zone, tall

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. Shows only the offensive zone at the right end.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: "offensive-zone", orientation: "portrait" });

The half court, tall

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Shows only the half court at the left end.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", range: "half-court", orientation: "portrait" });

The penalty area, tall

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only the penalty area at the right end.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: { name: "penalty-area", end: "right" }, orientation: "portrait" });

The outfield, tall

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Shows only the outfield.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "mlb", range: "outfield", orientation: "portrait" });

A curling house, wide, at the right end

Curling sheetDrawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Shows only the house at the right end.

The same as `sheet: { show: "house", end: "right" }`.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "curling", range: { name: "house", end: "right" }, orientation: "landscape" });

The CFL's red zone

CFL football fieldDrawn as: a Canadian football field, 150 by 65 yards with its 20-yard end zones, with a yard line every 5 yards, hash marks, numbers and goal posts on the goal lines. Shows only the red zone at the right end.10203040505040302010C01020304050504030201C
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "cfl", range: "red-zone" });

A box of your own#

{ x0, x1, y0, y1 } in the drawing's feet, in units, or in a frame's own numbers.

A box in feet

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. Shows only a part of the surface: x from 100 to 160, y from 10 to 60.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: { x0: 100, x1: 160, y0: 10, y1: 60 } });

The same box in yards

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. Shows only a part of the surface: x from 33.33 to 53.33, y from 3.33 to 20.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nhl",
  units: "yd",
  range: { x0: 33.333333333333336, x1: 53.333333333333336, y0: 3.3333333333333335, y1: 20 },
});

The right end zone in the NHL API's numbers

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. Shows only a part of the surface, in the nhl-api frame: x from 25 to 100, y from -42.5 to 42.5.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: { x0: 25, x1: 100, y0: -42.5, y1: 42.5, frame: "nhl-api" } });

A pitch's final third in Opta's 0 to 100

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Shows only a part of the surface, in the opta frame: x from 66 to 100, y from 0 to 100.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: { x0: 66, x1: 100, y0: 0, y1: 100, frame: "opta" } });

The left-field corner of a ballpark

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Shows only a part of the surface: x from -330 to -60, y from -330 to -60.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "mlb", range: { x0: -330, x1: -60, y0: -330, y1: -60 } });

Data on a range#

Layers are cut to the range, and a heat map has the cells of the zone, not of the whole surface.

Shots in the offensive zone

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. Shows only the offensive zone at the right end. Data outside it is not drawn. Data: 48 shots. By outcome: shot 40, goal 8.48 shotsBy outcome: shot 40, goal 8.
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const shots = Array.from({ length: 48 }, (_, i) => ({ x: 6 + ((i * 53) % 190), y: 6 + ((i * 29) % 74), outcome: i % 6 === 0 ? "goal" : "shot" }));
const svg = drawKyogijo({ sport: "nhl", range: "offensive-zone", layers: [{ kind: "points", name: "shots", data: shots }] });

A heat map of the zone, with its legend

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. Shows only the offensive zone at the right end. Data outside it is not drawn. Data: Heat map of 48 shots. Count in 18 cells, from 1 to 1. Highest: 162.5, 8.9 (1), 126.8, 12.4 (1), 130.4, 15.9 (1). 30 outside the grid or the zones.Heat map of 48 shotsCount in 18 cells, from 1 to 1. Highest: 162.5, 8.9 (1), 126.8, 12.4 (1), 130.4, 15.9 (1). 30 outside the grid or the zones.Legend: CountCount1
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const shots = Array.from({ length: 48 }, (_, i) => ({ x: 6 + ((i * 53) % 190), y: 6 + ((i * 29) % 74), outcome: i % 6 === 0 ? "goal" : "shot" }));
const svg = drawKyogijo({ sport: "nhl", range: "offensive-zone", layers: [{ kind: "heatmap", name: "shots", data: shots, legend: true }] });

Hexagons over a half court

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Shows only the half court at the left end. Data outside it is not drawn. Data: Hexagon map of 60 shots. Count in 44 hexagons, from 1 to 2. Highest: 4.6, 2.7 (2), 7.7, 2.7 (2), 29.4, 2.7 (2).Hexagon map of 60 shotsCount in 44 hexagons, from 1 to 2. Highest: 4.6, 2.7 (2), 7.7, 2.7 (2), 29.4, 2.7 (2).Legend: CountCount11.31.51.82
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nba",
  range: "half-court",
  layers: [
    {
      kind: "hexbin",
      name: "shots",
      data: [
        { x: 4, y: 3 },
        { x: 21, y: 14 },
        { x: 38, y: 25 },
        { x: 11, y: 36 },
        { x: 28, y: 3 },
        { x: 45, y: 14 },
        { x: 18, y: 25 },
        { x: 35, y: 36 },
        { x: 8, y: 3 },
        { x: 25, y: 14 },
        { x: 42, y: 25 },
        { x: 15, y: 36 },
        { x: 32, y: 3 },
        { x: 5, y: 14 },
        { x: 22, y: 25 },
        { x: 39, y: 36 },
        { x: 12, y: 3 },
        { x: 29, y: 14 },
        { x: 46, y: 25 },
        { x: 19, y: 36 },
        { x: 36, y: 3 },
        { x: 9, y: 14 },
        { x: 26, y: 25 },
        { x: 43, y: 36 },
        { x: 16, y: 3 },
        { x: 33, y: 14 },
        { x: 6, y: 25 },
        { x: 23, y: 36 },
        { x: 40, y: 3 },
        { x: 13, y: 14 },
        { x: 30, y: 25 },
        { x: 47, y: 36 },
        { x: 20, y: 3 },
        { x: 37, y: 14 },
        { x: 10, y: 25 },
        { x: 27, y: 36 },
        { x: 44, y: 3 },
        { x: 17, y: 14 },
        { x: 34, y: 25 },
        { x: 7, y: 36 },
        { x: 24, y: 3 },
        { x: 41, y: 14 },
        { x: 14, y: 25 },
        { x: 31, y: 36 },
        { x: 4, y: 3 },
        { x: 21, y: 14 },
        { x: 38, y: 25 },
        { x: 11, y: 36 },
        { x: 28, y: 3 },
        { x: 45, y: 14 },
        { x: 18, y: 25 },
        { x: 35, y: 36 },
        { x: 8, y: 3 },
        { x: 25, y: 14 },
        { x: 42, y: 25 },
        { x: 15, y: 36 },
        { x: 32, y: 3 },
        { x: 5, y: 14 },
        { x: 22, y: 25 },
        { x: 39, y: 36 },
      ],
      legend: true,
    },
  ],
});

Zones of the half court

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Shows only the half court at the left end. Data outside it is not drawn. Data: Zone chart of 60 shots. Count in 4 zones, from 1 to 31. Highest: Above the break 3 (left end) (31), Mid-range (left end) (24), In the paint (non-RA) (left end) (4).Zone chart of 60 shotsCount in 4 zones, from 1 to 31. Highest: Above the break 3 (left end) (31), Mid-range (left end) (24), In the paint (non-RA) (left end) (4).Above the break 3 (left end): 31 (31)Right corner 3 (left end) (0)Left corner 3 (left end) (0)Mid-range (left end): 24 (24)In the paint (non-RA) (left end): 4 (4)Restricted area (left end): 1 (1)Above the break 3 (right end) (0)Left corner 3 (right end) (0)Right corner 3 (right end) (0)Mid-range (right end) (0)In the paint (non-RA) (right end) (0)Restricted area (right end) (0)312441
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nba",
  range: "half-court",
  layers: [
    {
      kind: "zones",
      name: "shots",
      zones: "nba-shot",
      data: [
        { x: 4, y: 3 },
        { x: 21, y: 14 },
        { x: 38, y: 25 },
        { x: 11, y: 36 },
        { x: 28, y: 3 },
        { x: 45, y: 14 },
        { x: 18, y: 25 },
        { x: 35, y: 36 },
        { x: 8, y: 3 },
        { x: 25, y: 14 },
        { x: 42, y: 25 },
        { x: 15, y: 36 },
        { x: 32, y: 3 },
        { x: 5, y: 14 },
        { x: 22, y: 25 },
        { x: 39, y: 36 },
        { x: 12, y: 3 },
        { x: 29, y: 14 },
        { x: 46, y: 25 },
        { x: 19, y: 36 },
        { x: 36, y: 3 },
        { x: 9, y: 14 },
        { x: 26, y: 25 },
        { x: 43, y: 36 },
        { x: 16, y: 3 },
        { x: 33, y: 14 },
        { x: 6, y: 25 },
        { x: 23, y: 36 },
        { x: 40, y: 3 },
        { x: 13, y: 14 },
        { x: 30, y: 25 },
        { x: 47, y: 36 },
        { x: 20, y: 3 },
        { x: 37, y: 14 },
        { x: 10, y: 25 },
        { x: 27, y: 36 },
        { x: 44, y: 3 },
        { x: 17, y: 14 },
        { x: 34, y: 25 },
        { x: 7, y: 36 },
        { x: 24, y: 3 },
        { x: 41, y: 14 },
        { x: 14, y: 25 },
        { x: 31, y: 36 },
        { x: 4, y: 3 },
        { x: 21, y: 14 },
        { x: 38, y: 25 },
        { x: 11, y: 36 },
        { x: 28, y: 3 },
        { x: 45, y: 14 },
        { x: 18, y: 25 },
        { x: 35, y: 36 },
        { x: 8, y: 3 },
        { x: 25, y: 14 },
        { x: 42, y: 25 },
        { x: 15, y: 36 },
        { x: 32, y: 3 },
        { x: 5, y: 14 },
        { x: 22, y: 25 },
        { x: 39, y: 36 },
      ],
      labels: { show: ["count"] },
    },
  ],
});

Annotations on a range#

The ticks, the names of the parts and the arrows are of what is shown, on the apron beyond the cut.

The offensive zone, labelled

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. Shows only the offensive zone at the right end. Labelled parts: Goal line, Blue line.Blue lineGoal line
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nhl", range: "offensive-zone", landmarks: true });

The red zone, with axes

NFL football fieldDrawn 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. Shows only the red zone at the right end. Axes in the drawing's own numbers, in yd: x from 90 to 120, y from 0 to 53.33.10203040504030201001020304050403020190100110120yards01020304050yards
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nfl", range: "red-zone", axes: { ticks: 10, labels: { x: "yards", y: "yards" } } });

A half court on the chalkboard

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Shows only the half court at the left end. Home attacks the right end. Axes in the drawing's own numbers, in ft: x from 0 to 47, y from 0 to 50. Labelled parts: Baseline, Halfway line, Key, Free-throw line, Free-throw circle, Backboard, Basket, Three-point line, Restricted area.Home attacking01020304001020304050BackboardRestricted areaKeyFree-throw circleBaselineBasketFree-throw lineThree-point lineHalfway line
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nba",
  range: "half-court",
  look: "chalkboard",
  landmarks: true,
  direction: { home: "right" },
  axes: { ticks: 10 },
});

The penalty area, in Japanese

サッカーのピッチ図の内容：サッカーのピッチ。105×68mで、ハーフウェーライン、センターサークル、両側のペナルティーエリアとゴールエリア、ペナルティーマークとペナルティーアーク、コーナーアーク、ゴールがあります。表示範囲は左側のペナルティーエリアです。名称を表示している部分：ゴールライン、ペナルティーエリア、ゴールエリア、ペナルティーマーク、ペナルティーアーク、ゴール。ゴールゴールラインペナルティーエリアペナルティーアークゴールエリアペナルティーマーク
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "soccer", range: "penalty-area", landmarks: true, language: "ja" });

A score on a range#

The panel is moved inside what is shown, or, when the range is too small for it, the score is a strip under the drawing.

The offensive zone, with a score

Northern Owls 3, Lakeshore Anchors 2, Final/OTCup Final, Game 7, Final/OT. Northern Owls 3, Lakeshore Anchors 2. Northern Owls won. Drawn 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. Shows only the offensive zone at the right end.LAKESHOREANCHORSCup Final, Game 7NOW3LSA2–Final/OT
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nhl",
  range: "offensive-zone",
  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
  status: "final-ot",
  competition: "Cup Final, Game 7",
});

The offensive zone with a score, tall

Northern Owls 3, Lakeshore Anchors 2, Final/OTCup Final, Game 7, Final/OT. Northern Owls 3, Lakeshore Anchors 2. Northern Owls won. Drawn 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. Shows only the offensive zone at the right end.LAKESHOREANCHORSCup Final, Game 7NOW3LSA2–Final/OT
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nhl",
  range: "offensive-zone",
  orientation: "portrait",
  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
  status: "final-ot",
  competition: "Cup Final, Game 7",
});

The half court, with a score

Summit Peaks 108, Metro Bolts 112, FinalFinals, Game 6, 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. Shows only the half court at the left end.SUMMITPEAKSFinals, Game 6SMT108MTB112–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nba",
  range: "half-court",
  away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" },
  status: "final",
  competition: "Finals, Game 6",
});

The paint: the score is a strip

Summit Peaks 108, Metro Bolts 112, FinalFinals, Game 6, 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. Shows only the paint at the left end.SMT108MTB112Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nba",
  range: "paint",
  away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" },
  status: "final",
  competition: "Finals, Game 6",
});

The infield, with a score

Valley Stars 4, Coastal Pines 6, Bottom 9thGame 5, Bottom 9th. Valley Stars 4, Coastal Pines 6. 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. Shows only the infield.Game 5VAL4CPN6–Bottom 9th
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "mlb",
  range: "infield",
  away: { name: "Valley Stars", abbr: "VAL", score: 4, color: "#c8102e" },
  home: { name: "Coastal Pines", abbr: "CPN", score: 6, color: "#1f6b3c" },
  status: "Bottom 9th",
  competition: "Game 5",
  park: "fenway-park",
});

The red zone, with a score

Harbour City Gulls 27, Prairie Ridge Bison 24, FinalChampionship Game, Final. Harbour City Gulls 27, Prairie Ridge Bison 24. Harbour City Gulls won. Drawn 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. Shows only the red zone at the right end.PRAIRIE RIDGE BISON102030405040302010010203040504030201Championship GameHCG27PRB24–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nfl",
  range: "red-zone",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Championship Game",
});