Plotly: wins by team, the quarterback on top, the wordmark inside (the figure for Plotly.newPlot)

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

{
  "data": [
    {
      "type": "bar",
      "x": [
        "KC",
        "BUF",
        "LAC",
        "DEN",
        "MIA",
        "NYJ",
        "LV",
        "NE"
      ],
      "y": [
        15,
        13,
        11,
        10,
        8,
        5,
        4,
        4
      ],
      "marker": {
        "color": "#e8e8e8"
      }
    }
  ],
  "layout": {
    "width": 560,
    "height": 360,
    "yaxis": {
      "range": [
        0,
        18
      ]
    },
    "xaxis": {
      "range": [
        -0.8797086891009549,
        7.879708689100955
      ],
      "autorange": false
    },
    "images": [
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/3139477.png",
        "x": 0,
        "y": 16.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:3139477"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/3918298.png",
        "x": 1,
        "y": 14.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:3918298"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/4038941.png",
        "x": 2,
        "y": 12.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:4038941"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/4426338.png",
        "x": 3,
        "y": 11.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:4426338"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/4241479.png",
        "x": 4,
        "y": 9.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:4241479"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/8439.png",
        "x": 5,
        "y": 6.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:8439"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/4038524.png",
        "x": 6,
        "y": 5.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:4038524"
      },
      {
        "source": "https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/4431452.png",
        "x": 7,
        "y": 5.7,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 2.5200000000000005,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:headshot:4431452"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/16/16a2c7e0cd5dcf2e6bdc646c0b22bf03e575f505aa4b843a0ebfdaf19650257b.png",
        "x": 0,
        "y": 7.5,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:12"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/e3/e363b5d81c20f22a336be435f5ce14d5c86829f956064ec9b85c332661d42ac1.png",
        "x": 1,
        "y": 6.5,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:2"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/ad/ad87ef1e14816a93f9cf06e2f356c526902186abfc4c729e8e01088a84e98cb7.png",
        "x": 2,
        "y": 5.5,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:24"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/dd/ddced0c3708afd6977d26e85c6efd4ddf3f045fb4527dd88e940e5952653875d.png",
        "x": 3,
        "y": 5,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:7"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/cf/cf20b7c2f3fbdbd3d67e6067495c1eae5dfc1d5e22aadb40c574da8fd4abcba0.png",
        "x": 4,
        "y": 4,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:15"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/82/8215dbe17aa824c97de83f1a27d744dc2140e9fe69b42dab5c422738e78e0866.png",
        "x": 5,
        "y": 2.5,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:20"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/c2/c22afa5471cd8e08e9c42f06df3d90f6b88b1b95fc16b4da5e610737a8fe7dac.png",
        "x": 6,
        "y": 2,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:13"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/d8/d898a07bacac59e21dc35f7ad3d77e1d6fe57d21dd7000aa9ae9617ea949c7c4.png",
        "x": 7,
        "y": 2,
        "xref": "x",
        "yref": "y",
        "sizex": 17.51883475640382,
        "sizey": 0.9,
        "sizing": "contain",
        "xanchor": "center",
        "yanchor": "middle",
        "opacity": 1,
        "layer": "above",
        "name": "sdvplot:wordmark:17"
      }
    ]
  }
}

import { STANDINGS } from "@sportsdataverse/examples/data";
import { loadLeague } from "@sportsdataverse/sdvplot";
import { withHeadshots, withWordmarks } from "@sportsdataverse/sdvplot/plotly";

await loadLeague("nfl");
// Each image sits at a row's (x, y): the headshot just above the bar, the wordmark halfway up it.
const rows = [...STANDINGS]
  .sort((a, b) => b.wins - a.wins)
  .map((s) => ({ ...s, qb_y: s.wins + 1.7, mark_y: s.wins / 2 }));
const figure = {
  data: [
    { type: "bar", x: rows.map((r) => r.team), y: rows.map((r) => r.wins), marker: { color: "#e8e8e8" } },
  ],
  layout: { width: 560, height: 360, yaxis: { range: [0, 18] } },
};
const headshots = withHeadshots(figure, rows, {
  league: "nfl",
  x: "team",
  y: "qb_y",
  player: "qb_espn_id",
  height: 0.14,
});

const both = withWordmarks(headshots, rows, {
  league: "nfl",
  x: "team",
  y: "mark_y",
  team: "team",
  height: 0.05,
});
// In the browser: Plotly.newPlot(div, data, layout), as this page does; plotly.js loads each layout image itself.
// Without JavaScript the page shows the figure.
export const browser = {
  lib: "plotly",
  figure: both,
  label:
    "2024 AFC wins by team, each bar topped by its most frequent starting quarterback's headshot, the team's wordmark inside it",
} as const;

both;

Tags: plotly · withHeadshots · withWordmarks · nfl. All sdvplot examples.