Chart libraries

sdvplot is not only for Observable Plot. Its adapters add team logos to a chart you build in Plotly, Vega-Lite, ECharts or Chart.js: as the points of a scatter, or as the labels of a category axis. Each adapter edits that library's own figure, spec, option or config (the library still draws it, with its own hover, zoom and tooltips), so the code below is ordinary code for each library plus one sdvplot call. All four draw the same real data: every NFL team's 2024 EPA per play (nflverse), and the wins of the 2024 AFC West and East.

Chart picks the scatter (32 logos at each team's offensive and defensive EPA per play; the defence axis is reversed, so up is better) or the bars (the AFC's wins, in team colours, with a logo under each bar). Logo size is a fraction of the plot's height for Plotly, Vega-Lite and ECharts; Chart.js sizes images in pixels, so its logos are that fraction of the canvas height. Every chart follows this page's light or dark mode. Hover a logo or a bar in any of them for its numbers.

Plotly

withLogos(figure, rows, options) adds one layout.images entry per row, which plotly.js loads itself; the scatter's own markers are invisible but keep Plotly's hover. withAxisLogos(figure, "x", options) hides the axis's category labels (they are hidden, not blanked, so hovering a bar still names its team) and draws a logo under each; teamColorway gives one colour per bar.

Vega-Lite

withLogos(spec, rows, options) layers an image mark over the spec, one logo per row; withAxisLogos(spec, "x", options) blanks the axis labels and layers a logo under each tick. teamColorScale is a Vega-Lite colour scale of team colours. The image layers never take the tooltip, so the chart's own tooltip encoding is what shows. vega-embed draws it on the SVG renderer.

ECharts

withLogos(option, rows, options) adds a custom series that draws one image per row at its data coordinates; withAxisLogos(option, "x", options) replaces the category labels with rich-text images; teamColorPalette is the palette for colorBy: "data". The logo series is silent and keeps out of the tooltip, so the chart's own series answers it.

Chart.js

Chart.js draws on a canvas, so sdvplot's helpers are plugins: logoPoints(teams, options) turns each point into its team's logo (with pointImages, which redraws as each image lands), and axisLogos("x", options) paints a logo in place of each category label. teamColor gives one colour per bar. The tooltips are Chart.js's own.