arcResolution: points per arc, and what they cost

{
  "arcResolution: 12": {
    "points": 1888,
    "toSVG": "33.0 KB",
    "toSVG arcs: \"svg\"": "14.8 KB"
  },
  "arcResolution: 200 (default)": {
    "points": 24824,
    "toSVG": "446.6 KB",
    "toSVG arcs: \"svg\"": "32.6 KB"
  }
}

import { surface } from "@sportsdataverse/sporty";
import { toSVG } from "@sportsdataverse/sporty/svg";

// Every circle and corner is sampled as `arcResolution` points (default 200). Fewer points, smaller output;
// toSVG's `arcs: "svg"` writes detected circles as arc commands, so it shrinks the file at any resolution.
const kb = (s: string): string => `${(new TextEncoder().encode(s).length / 1024).toFixed(1)} KB`;
const cost = (arcResolution: number) => {
  const rink = surface("hockey", "nhl", { arcResolution });
  let points = 0;
  for (const f of rink.features) if (f.kind === "polygon") points += f.points.length;
  return { points, toSVG: kb(toSVG(rink)), 'toSVG arcs: "svg"': kb(toSVG(rink, { arcs: "svg" })) };
};

{ "arcResolution: 12": cost(12), "arcResolution: 200 (default)": cost(200) };

Tags: arcResolution · toSVG · hockey · nhl. All sporty examples.