Placements: a point, its image, its aspect

{
  "logos": [
    {
      "id": "12",
      "x": 385,
      "y": 326,
      "aspect": 1,
      "url": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/3d/3d77958dc6373768919bb2681cbe1b143f56c07a1f013460def665a5026a7f3d.png"
    },
    {
      "id": "24",
      "x": 402,
      "y": 301,
      "aspect": 1,
      "url": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/54/5400f85bd93129c056717a771da57a97225e15f39c0022107ce89ef993f15bb0.png"
    },
    {
      "id": "7",
      "x": 425,
      "y": 311,
      "aspect": 1,
      "url": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/c9/c98bec2be32e27b19f79f5da86ac6ef133c78d75ab78aadb28ef36696c3213e8.png"
    }
  ],
  "wordmarks": [
    {
      "id": "12",
      "aspect": 3.6458333333333335,
      "url": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/16/16a2c7e0cd5dcf2e6bdc646c0b22bf03e575f505aa4b843a0ebfdaf19650257b.png"
    },
    {
      "id": "24",
      "aspect": 3.6321243523316062,
      "url": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/ad/ad87ef1e14816a93f9cf06e2f356c526902186abfc4c729e8e01088a84e98cb7.png"
    },
    {
      "id": "7",
      "aspect": 3.6510416666666665,
      "url": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/dd/ddced0c3708afd6977d26e85c6efd4ddf3f045fb4527dd88e940e5952653875d.png"
    }
  ]
}

import { STANDINGS } from "@sportsdataverse/examples/data";
import { place, placeSync } from "@sportsdataverse/sdvplot";

const three = STANDINGS.slice(0, 3);
const xs = three.map((s) => s.pf);
const ys = three.map((s) => s.pa);
const ts = three.map((s) => s.team);
// What every logo mark draws: one entry per drawable row (any other renderer can use it too).
const logos = await place(xs, ys, ts, { league: "nfl" });
const wordmarks = placeSync(xs, ys, ts, { league: "nfl", kind: "wordmark" }); // loaded by place()

{
  logos: logos.map((p) => ({ id: p.id, x: p.x, y: p.y, aspect: p.aspect, url: p.url })),
  wordmarks: wordmarks.map((p) => ({ id: p.id, aspect: p.aspect, url: p.url })),
};

Tags: place · logos · nfl. All sdvplot examples.