Plotly: points for and against, with team logos (the figure for Plotly.newPlot)

With JavaScript on, plotly.js draws this figure here.

{
  "data": [
    {
      "type": "scatter",
      "mode": "markers",
      "x": [
        385,
        402,
        425,
        309,
        525,
        345,
        338,
        289
      ],
      "y": [
        326,
        301,
        311,
        434,
        368,
        364,
        404,
        417
      ]
    }
  ],
  "layout": {
    "width": 560,
    "height": 400,
    "xaxis": {
      "range": [
        260,
        550
      ]
    },
    "yaxis": {
      "range": [
        280,
        460
      ]
    },
    "images": [
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/3d/3d77958dc6373768919bb2681cbe1b143f56c07a1f013460def665a5026a7f3d.png",
        "x": 385,
        "y": 326,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:12"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/54/5400f85bd93129c056717a771da57a97225e15f39c0022107ce89ef993f15bb0.png",
        "x": 402,
        "y": 301,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:24"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/c9/c98bec2be32e27b19f79f5da86ac6ef133c78d75ab78aadb28ef36696c3213e8.png",
        "x": 425,
        "y": 311,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:7"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/25/25fbb03e972ae872fa024026b73c7b63ef9f23c2f2c51f87d1614d800dcee6e7.png",
        "x": 309,
        "y": 434,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:13"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/79/79b71e2f536ee29f9d23834e89828883af2d95bf6968cbd07a505444229cdd20.png",
        "x": 525,
        "y": 368,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:2"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/b9/b9631269a82abda39bd748afc82390679ca67bfc167bc3581665e237407de8e0.png",
        "x": 345,
        "y": 364,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:15"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/5d/5de8d029f3602c97ffe02bd636eb2630e55d019d1a37cf819d3b9e39a219487b.png",
        "x": 338,
        "y": 404,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:20"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/da/dac19aa9a573dcf9075e2422bee3e35a4955b9ab494bb3191ab3bacfd3609729.png",
        "x": 289,
        "y": 417,
        "xref": "x",
        "yref": "y",
        "sizex": 580,
        "sizey": 21.599999999999998,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:logo:17"
      }
    ]
  }
}

import { STANDINGS } from "@sportsdataverse/examples/data";
import { loadLeague } from "@sportsdataverse/sdvplot";
import { withLogos } from "@sportsdataverse/sdvplot/plotly";

await loadLeague("nfl");
const rows = STANDINGS.map((s) => ({ ...s }));
const figure = {
  data: [{ type: "scatter", mode: "markers", x: rows.map((r) => r.pf), y: rows.map((r) => r.pa) }],
  layout: { width: 560, height: 400, xaxis: { range: [260, 550] }, yaxis: { range: [280, 460] } },
};

// Each logo is one entry of layout.images, which plotly.js loads itself.
const logos = withLogos(figure, rows, { league: "nfl", x: "pf", y: "pa", team: "team", height: 0.12 });
// In the browser: Plotly.newPlot(div, data, layout), as this page does. Without JavaScript the page shows the figure.
export const browser = {
  lib: "plotly",
  figure: logos,
  label: "2024 AFC points for against points against, each team drawn as its logo",
} as const;

logos;

Tags: plotly · withLogos · nfl. All sdvplot examples.