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

Every picture the package draws, each with the code that draws it, a button to copy the code, a link to download the drawing as an SVG file and a link that opens it in a page of its own. The pictures are drawn by the build of the docs site from that code, so a picture cannot part from its snippet, and a test runs every snippet against the source. The "Open in a page" link opens one HTML file, made when the site is built, that draws the picture again from the published package on jsDelivr; jsDelivr serves only published versions, so a feature newer than the last release is not in it, and the page then keeps the picture the build drew and says why.

The gallery is made when the site is built (pnpm site), so its pages are on the docs site and not in this repository:

  • Surfaces and scores: the thirty-nine surfaces bare, with a game on each, wide and tall, as a strip and a compact card, the court's looks, light and dark.
  • The soccer pitch: a pitch of every preset size, the mowing patterns, the goal styles, one half, a shoot-out.
  • Every league's surface: each league that marks a court, rink, field or diamond its own way.
  • Surfaces through the years: each sport in the seasons before and after its markings changed.
  • Ballparks, grounds and arenas: a sample of the 94 parks, 64 grounds and 167 arenas, a past park in two seasons, the rinks of Boston Garden and the Boston Arena at their own sizes, and the walls and quirks of eight parks.
  • Special games: the 18 games, a rink in a ballpark or a football stadium, a court on a deck, baseball over a pitch, each with its day and venue.
  • Data on a surface: every kind of data layer, every heat layer, the ready-made charts, the team-shape layers (networks, formations, lineups, Voronoi, triangulations, hulls, flow fields and sonars) and a frame of a replay.
  • Curling: the sheet of each rule book, its display ranges and house colours, the board and the badge, and the stones of an end.
  • Net sports: each court wide and tall, every look, the free zone, the singles sticks, the board of sets and games with its serving ball, and the zones of each side of the net.
  • Field sports: each surface and league of lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, the scores they write their own way, the AFL's named grounds, a cricket boundary of your own, and a part of each surface.
  • Pools: the swimming pool in 50 and 25 m and in ten lanes, a warm-up pool, the water polo field, the diving well and the artistic swimming area, the looks of the water and the deck, a side section, the lanes of a race with flags, medals, splits and pace bars, a frame of a race replay, the split pace chart and a natatorium.
  • Looks and annotations: the eight named looks, colours by feature, line widths and dashes, goal styles, mowing patterns, and the arrows, axes and labels that mark a surface for teaching.
  • Display ranges and zoom: a drawing cropped to a zone, a half court, the red zone, the penalty area, the infield or a box of your own, at either end, wide and tall, with data, labels and a score.
  • Flags on the halves: a carpet and a stage on each of the twenty surfaces, an emblem in the centre, tall and small, the borders, the lines over and under, a team with no flag, dark, and a crop.
  • The situation of a game: a power play, an empty net and a shootout, the bases loaded with a full count, third and 7 in the red zone with a drive chart, in the badge, the compact card, dark and in Japanese.
  • Layouts and backgrounds: small multiples in the size of a social card, a square post and a phone, with a title, a key and a credit line; seven patterns and a photograph behind a drawing or a grid.

Every picture in these pages is an SVG string, and each can be put somewhere else without drawing it again: pass the same options (or the SVG, or a chart's options) to drawToCanvas, appendSurface, surfaceMark, sceneToGeoJSON or toPNG, as the renderers say. A picture here and the canvas drawn from the same scene differ in a few pixels: the edges of the letters, and a logo the canvas was not given.

The same site draws one surface in each of the forty coordinate frames, side by side, and puts every ballpark and ground on a map.

Edit this page on GitHub