Plotly: wins by team, logos on the axis, team-coloured bars (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": [
          "#e31837",
          "#00338d",
          "#007bc7",
          "#002244",
          "#008e97",
          "#003f2d",
          "#000000",
          "#002244"
        ]
      }
    }
  ],
  "layout": {
    "width": 560,
    "height": 360,
    "xaxis": {
      "tickmode": "array",
      "showticklabels": false,
      "tickvals": [
        "KC",
        "BUF",
        "LAC",
        "DEN",
        "MIA",
        "NYJ",
        "LV",
        "NE"
      ],
      "ticktext": [
        "KC",
        "BUF",
        "LAC",
        "DEN",
        "MIA",
        "NYJ",
        "LV",
        "NE"
      ]
    },
    "margin": {
      "b": 97
    },
    "images": [
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/3d/3d77958dc6373768919bb2681cbe1b143f56c07a1f013460def665a5026a7f3d.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:12",
        "x": 0,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/79/79b71e2f536ee29f9d23834e89828883af2d95bf6968cbd07a505444229cdd20.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:2",
        "x": 1,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/54/5400f85bd93129c056717a771da57a97225e15f39c0022107ce89ef993f15bb0.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:24",
        "x": 2,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/c9/c98bec2be32e27b19f79f5da86ac6ef133c78d75ab78aadb28ef36696c3213e8.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:7",
        "x": 3,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/b9/b9631269a82abda39bd748afc82390679ca67bfc167bc3581665e237407de8e0.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:15",
        "x": 4,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/5d/5de8d029f3602c97ffe02bd636eb2630e55d019d1a37cf819d3b9e39a219487b.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:20",
        "x": 5,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/25/25fbb03e972ae872fa024026b73c7b63ef9f23c2f2c51f87d1614d800dcee6e7.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:13",
        "x": 6,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      },
      {
        "source": "https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/da/dac19aa9a573dcf9075e2422bee3e35a4955b9ab494bb3191ab3bacfd3609729.png",
        "sizing": "contain",
        "layer": "above",
        "name": "sdvplot:axis:x:17",
        "x": 7,
        "y": 0,
        "xref": "x",
        "yref": "y domain",
        "sizex": 16,
        "sizey": 0.1,
        "xanchor": "center",
        "yanchor": "top"
      }
    ]
  }
}

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

await loadLeague("nfl");
const teams = [...STANDINGS].sort((a, b) => b.wins - a.wins).map((s) => s.team);
const figure = {
  data: [
    {
      type: "bar",
      x: teams,
      y: teams.map((t) => STANDINGS.find((s) => s.team === t)?.wins),
      // one colour per bar; as `layout.colorway`, Plotly would cycle them per trace instead
      marker: { color: teamColorway("nfl", teams) },
    },
  ],
  layout: { width: 560, height: 360 },
};

// The axis keeps its categories; their labels are hidden, not blanked, so hovering a bar names its team.
const logos = withAxisLogos(figure, "x", { league: "nfl", height: 0.1 });
// 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 wins by team, best first, each bar in its team's colour with the team's logo under it",
} as const;

logos;

Tags: plotly · withAxisLogos · teamColorway · nfl. All sdvplot examples.