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.

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

Gallery: curling

The sheet from World Curling's and Curling Canada's rules, its display ranges and house colours, the board and the badge, and the stones of an end with their score worked out. 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 sheet#

sport: "curling": tall by default, with the far house at the top; orientation: "landscape" lays it wide.

The sheet, tall

Download SVG Open 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" });

The sheet, wide

Download SVG Open 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", orientation: "landscape" });

World Curling, with its hack and courtesy lines

Download SVG Open 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", orientation: "landscape", league: "wcf", detail: "full" });

Curling Canada's rules

Its book prints no hack line and no courtesy line.

Download SVG Open 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", orientation: "landscape", league: "curling-canada" });

The shortest sheet and the narrowest

146 feet by 14 feet 2 inches, the least Curling Canada allows.

Download SVG Open 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",
  orientation: "landscape",
  league: "curling-canada",
  sheet: { length: 146, width: 14.166666666666666 },
});

Colours, ice and guard zone#

sheet sets the colours of the rings, the ice's pebble and the shading of the free guard zone.

Rings in a club's colours

Download SVG Open 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",
  sheet: {
    rings: { outer: "#0b6e4f", middle: "#ffffff", inner: "#d4a017", button: "#ffffff" },
    pebble: true,
  },
});

The free guard zone

Download SVG Open 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", orientation: "landscape", sheet: { guardZone: true } });

The sheet, dark

Download SVG Open 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", theme: "dark" });

Part of the sheet#

sheet.show is half (the hog line to the back line) or house, at the left end (the top of a tall drawing) or the right.

Hog line to back line

Download SVG Open 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", sheet: { show: "half", guardZone: true } });

The house

Download SVG Open 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", sheet: { show: "house", pebble: true } });

The house at the right end, wide

Download SVG Open 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", orientation: "landscape", sheet: { show: "house", end: "right" } });

The top end, the bottom end, both folded#

sheet.show: "folded" is the whole sheet as a strip with its two houses enlarged beside it, so that a sheet 150 feet long fills a square. end: "top" or "bottom" is one end alone.

Folded, tall: the top house on the left, the bottom house on the right

The strip keeps its scale; each panel is the same sheet from the hog line to the back line, enlarged, with a fan to the part it shows.

Download SVG Open 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", sheet: { show: "folded" } });

Folded, wide: the left house above, the right house below

Download SVG Open 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", orientation: "landscape", sheet: { show: "folded" } });

Folded, with only the houses

`panels: "house"`; the free guard zone is shaded on the strip.

Download SVG Open 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", sheet: { show: "folded", panels: "house", guardZone: true } });

Folded, a little wider than tall

`fit` is width over height; a panel is never longer than the strip.

Download SVG Open 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", sheet: { show: "folded", fit: 1.2, pebble: true } });

Folded, dark, in Curling Canada's rules

Download SVG Open 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", league: "curling-canada", theme: "dark", sheet: { show: "folded" } });

Only the top end

Download SVG Open 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", sheet: { show: "half", end: "top", guardZone: true } });

Only the bottom end

Download SVG Open 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", sheet: { show: "half", end: "bottom", guardZone: true } });

The stones of an end, folded

The stones are in the strip, small, and in the top panel, large, at the house they were played to.

Download SVG Open in a page

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

Show the code

import { curlingStones } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const stones = [
  { x: 0.4, y: 0.3, team: "home", number: 8 },
  { x: -1.2, y: -0.8, team: "home", number: 6 },
  { x: 1.9, y: 1.1, team: "away", number: 7 },
  { x: -2.6, y: 2.8, team: "away", number: 5 },
  { x: 0.2, y: -9, team: "away", number: 3 },
  { x: 0.1, y: -14, team: "home", number: 2 },
];
const chart = curlingStones(stones, { end: 6, hammer: "home", show: "folded" });
const svg = chart.draw();

The same end, folded wide, with its key

Download SVG Open in a page

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

Show the code

import { curlingStones } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const stones = [
  { x: 0.4, y: 0.3, team: "home", number: 8 },
  { x: -1.2, y: -0.8, team: "home", number: 6 },
  { x: 1.9, y: 1.1, team: "away", number: 7 },
  { x: -2.6, y: 2.8, team: "away", number: 5 },
  { x: 0.2, y: -9, team: "away", number: 3 },
  { x: 0.1, y: -14, team: "home", number: 2 },
];
const chart = curlingStones(stones, { end: 6, hammer: "home", show: "folded" });
const svg = chart.draw({ orientation: "landscape" });

Where the stones of many ends came to rest#

curlingHeat counts the stones of many ends into cells, hexagons, a density or the zones of the house, or draws each as a translucent disc in its team's colour; it can keep one team's stones, the free guards or the stones in the house.

Cells, the half of the sheet

A cell is a foot square; a cell with no stone is not drawn.

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones).draw();

Hexagons, wide

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones, { view: "hexbin", cell: 1.2 }).draw({ orientation: "landscape" });

A density, one team, wide

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones, { view: "contour", team: "home" }).draw({ orientation: "landscape" });

The zones of the house

The number in each zone is the stones that came to rest in it, by their centres.

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones, { view: "zones", show: "house" }).draw();

The free guards, as discs in the teams' colours, folded

Stones that fall on each other build up colour.

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones, { view: "discs", only: "guards", show: "folded" }).draw();

Cells, folded

The colour bar stands in the enlarged house the stones are at.

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones, { show: "folded" }).draw();

The stones in the house, the house alone

Download SVG Open in a page

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

Show the code

import { curlingHeat } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const svg = curlingHeat(stones, { only: "house", show: "house", cell: 0.8 }).draw();

A game's ends in one picture

Each cell is the chart of that end, scored by the rules.

Download SVG Open in a page

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

Show the code

import { curlingStones } from "@johnmorrisdotca/kyogijo-stadiums/charts";
import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";

const luck = (n) => {
  const v = Math.sin(n * 12.9898) * 43758.5453;
  return v - Math.floor(v);
};
const bell = (n) => luck(n) + luck(n + 1) + luck(n + 2) - 1.5;
const stones = Array.from({ length: 240 }, (_, i) => {
  const inHouse = luck(i * 7) < 0.45;
  return { x: bell(i * 5) * (inHouse ? 3 : 2.5), y: inHouse ? bell(i * 11) * 3 : -8 - 9 * luck(i * 13), team: i % 2 ? "home" : "away" };
});
const ends = [0, 1, 2, 3, 4, 5].map((end) => {
  const chart = curlingStones(stones.slice(end * 8, end * 8 + 8).map((s, i) => ({ ...s, y: s.y > -2 ? s.y : s.y * 0.4, number: i + 1 })), { end: end + 1, id: `end-${end + 1}` });
  return { drawing: chart, label: `End ${end + 1}: ${chart.totals.scoring ?? "blank"} ${chart.totals.points}` };
});
const svg = drawGrid(ends, { columns: 3, width: 900, title: "A game, end by end" });

The board and the badge#

Each team's score in each end (ends), the total, the hammer, and an end as the status.

The board, tall

Download SVG Open 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",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 5,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, "X"],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 4,
    color: "#a8452c",
    hammer: true,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0],
  },
  status: "end-10",
  competition: "Final",
});

The board, wide

Download SVG Open 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",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 5,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, "X"],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 4,
    color: "#a8452c",
    hammer: true,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0],
  },
  status: "end-10",
  competition: "Final",
  orientation: "landscape",
});

A compact card, wide

Download SVG Open 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",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 5,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, "X"],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 4,
    color: "#a8452c",
    hammer: true,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0],
  },
  status: "end-10",
  competition: "Final",
  orientation: "landscape",
  size: "compact",
});

An extra end

Download SVG Open 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",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 6,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, 0, 1],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 5,
    color: "#a8452c",
    hammer: false,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0, 0, 0],
  },
  status: "extra-end",
  size: "badge",
});

The stones of an end#

curlingStones judges the stones by the rules and rings the ones that score: one ring for a counting stone, two for the shot rock.

An end, the house at the top

Home scores 2: its two stones are nearer the button than every stone of the other team.

Download SVG Open in a page

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

Show the code

import { curlingStones } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const stones = [
  { x: 0.4, y: 0.3, team: "home", number: 8 },
  { x: -1.2, y: -0.8, team: "home", number: 6 },
  { x: 1.9, y: 1.1, team: "away", number: 7 },
  { x: -2.6, y: 2.8, team: "away", number: 5 },
  { x: 0.2, y: -9, team: "away", number: 3 },
  { x: 0.1, y: -14, team: "home", number: 2 },
];
const chart = curlingStones(stones, { end: 6, hammer: "home", names: { home: "Prairie Ridge", away: "Harbour City" } });
const svg = chart.draw();

The same end, wide, with its key

Download SVG Open in a page

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

Show the code

import { curlingStones } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const stones = [
  { x: 0.4, y: 0.3, team: "home", number: 8 },
  { x: -1.2, y: -0.8, team: "home", number: 6 },
  { x: 1.9, y: 1.1, team: "away", number: 7 },
  { x: -2.6, y: 2.8, team: "away", number: 5 },
  { x: 0.2, y: -9, team: "away", number: 3 },
  { x: 0.1, y: -14, team: "home", number: 2 },
];
const chart = curlingStones(stones, { end: 6, hammer: "home" });
const svg = chart.draw({ orientation: "landscape" });

Zones: the rings

Download SVG Open 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 stones = Array.from({ length: 80 }, (_, i) => ({ x: 8.5 * Math.cos(i * 2.4) * Math.sqrt((i % 40) / 40), y: 8 * Math.sin(i * 2.4) * Math.sqrt((i % 40) / 40) - 14 + (i % 3) * 3, outcome: i % 4 ? "stone" : "counting" }));
const svg = drawKyogijo({ sport: "curling", sheet: { show: "half", end: "left" }, layers: [{ kind: "zones", name: "stones", zones: "curling-house", from: "curling", attacking: "left", end: "left", data: stones, labels: { show: ["value"] }, legend: true }] });