43:["$","title",null,{"children":"Showing ESPN Receiver Tracking Metrics using weighted radar charts | Toph Tucker | Observable"}] 4b:Tb2d,# Showing ESPN Receiver Tracking Metrics using weighted radar charts _The whole idea for these charts, and the text and stats, are from [Seth Walder](https://twitter.com/SethWalder) of ESPN Sports Analytics; Toph just helped with coding._ These radar charts depict the three components of [ESPN’s Receiver Tracking Metrics](https://projects.fivethirtyeight.com/nfl-receiver-rankings/) (RTMs): Open Score, Catch Score and YAC Score. Because Open Score is the most important of the three components — it is the most stable, correlates strongest with a receiver’s yards per route run and is the most predictive of future production — its axis is twice as long as the other two components’.

Below you can select multiple players within the same season to compare their RTMs components or look at how a single player’s RTMs have changed over time. ESPN’s Receiver Tracking Metrics use NFL Next Gen Stats player-tracking data and an explainer for how they work [can be found here](https://www.espn.com/nfl/story/_/id/34649390/espn-receiver-tracking-metrics-how-new-nfl-stats-work-open-catch-yac-scores).4c:Ta38,render = (data, {title, color: colorKey, sequential}) => { if (sequential) { data = data.sort((a, b) => d3.ascending(a[colorKey], b[colorKey])); } const points = data.map((d) => ({ ...d, points: axes.map((axis) => axis.scale(d[axis.name] / 100)) })); const color = sequential ? sequentialScale : d3.scaleOrdinal(data.map(d => d[colorKey]), colors); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 10); const g = svg.append("g") .attr("transform", `translate(${xOffset}, ${yOffset})`); const ticks = d3.ticks(0, 1, 5); const grid = g.append("g") .attr("stroke", "#ccc") .attr("stroke-dasharray", "2,2") .attr("fill", "none") grid.selectAll("path.gridTriangle") .data(ticks) .join("path") .attr("class", "gridTriangle") .attr("d", n => `M ${axes.map(axis => axis.scale(n))} Z`); grid.selectAll("path.gridAxis") .data(axes) .join("path") .attr("class", "gridAxis") .attr("d", axis => `M ${axis.scale(ticks[1])} ${axis.scale(ticks[ticks.length - 1])}`) g.selectAll("text.axisLabel") .data(axes) .join("text") .attr("class", "axisLabel") .attr("transform", axis => { const [x, y] = axis.scale(1); const dr = 15; const dx = dr * Math.cos(axis.angle); const dy = dr * Math.sin(axis.angle); return `translate(${x + dx}, ${y + dy})`; }) .attr("text-anchor", "middle") .text(d => d.name.toUpperCase()) .attr("dy", "0.32em") g.selectAll("g.points") .data(points) .join("g") .attr("class", "points") .call(g => g.append("path") .attr("d", d => `M ${d.points} Z`) .attr("stroke", d => color(d[colorKey])) .attr("stroke-width", 2) .attr("fill", "none")) .call(g => g.selectAll("circle") .data(d => d.points.map(pt => ({...d, pt}))) .join("circle") .attr("cx", d => d.pt[0]) .attr("cy", d => d.pt[1]) .attr("fill", d => color(d[colorKey])) .attr("r", 3)); svg.append("text") .attr("dx", "1em") .attr("dy", "0.32em") .attr("x", -5) .attr("y", 10) .attr("font-weight", "bold") .text(title); svg.selectAll("g.legend") .data(points) .join("g") .attr("class", "legend") .attr("transform", (d, i) => `translate(10, ${10 + (i + 1) * 15})`) .call(g => g.append("circle").attr("r", 5).attr("fill", d => color(d[colorKey]))) .call(g => g.append("text").attr("dx", "1em").attr("dy", "0.32em").text(d => d[colorKey])) return svg.node(); }4d:[{"id":"134c95935b454403e3a5e0e254af94c6a2503c1ea41d367f8b2c859de503ec8a8ae5ed8c53a73306e77afaf54e9411b3c1d73891bf90e88d3d607a774b42a351","href":"https://static.observableusercontent.com/files/134c95935b454403e3a5e0e254af94c6a2503c1ea41d367f8b2c859de503ec8a8ae5ed8c53a73306e77afaf54e9411b3c1d73891bf90e88d3d607a774b42a351","name":"RTMs.csv","type":"text/csv","lastModified":1680998961226.026,"size":40607}] 47:{"id":"cf22023319727aee","slug":"espn-receiver-tracking-weighted-radar","title":"Showing ESPN Receiver Tracking Metrics using weighted radar charts","thumbnail":"1f5affddbaf939dcc07c33f3578162c450791ef8db3a3cad576f5d9d6f844d35","access_level":"public","create_time":"$D2023-04-09T00:09:13.704Z","update_time":"$D2023-07-21T17:33:15.286Z","view_time":null,"first_public_time":"$D2023-07-21T17:24:05.240Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false},"version":717,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"titling":"auto","title":"Showing ESPN Receiver Tracking Metrics using weighted radar charts","cells":[{"id":0,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"---\n## Compare players\nShift-click or cmd-click to select multiple players. They are disabled if we don’t have data for the given year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"viewof year = Inputs.number(years, {label: \"Year\", value: years[0]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"viewof player = {\n return Inputs.select(players, {\n label: \"Player\",\n value: this?.value || players.slice(1, 4),\n multiple: true,\n disabled: disabledPlayers\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"render(data.filter(d => d.Season === year && player.includes(d.Player)), {title: year, color: \"Player\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"---\n## Compare each player over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"viewof overTime = Inputs.select(\n new Map([\n [\"All\", [...grouped]],\n ...[...grouped].map((d) => [d[0], [d]])\n ]),\n { label: \"Player\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"

\n ${overTime.map(([player, data]) => htl.html`

${render(data, {title: player, color: \"Season\", sequential: true})}

`)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"data = await FileAttachment(\"RTMs.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":253,"value":"---\n## Appendix\nA simpler implementation of just one weighted radar chart can be found [here](https://observablehq.com/d/4eab92f6b0c1c58e).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"weights = [\n {name: \"OPEN\", weight: 2},\n {name: \"YAC\", weight: 1},\n {name: \"CATCH\", weight: 1},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"width = 280","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"size = width / 1.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"xOffset = width / 2 + d3.mean(d3.extent(axes.map((d) => d.scale(1)[0])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"yOffset = height / 2 - d3.mean(d3.extent(axes.map(d => d.scale(1)[1])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"players = [...new Set(data.map(d => d.Player))].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"disabledPlayers = players.filter(\n (player) =>\n !data\n .filter((d) => d.Season === year)\n .map((d) => d.Player)\n .includes(player)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"years = d3.extent(data, d => d.Season)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"sequentialScale = d3.scaleSequential([years[0] - 1, years[1]], d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"radius = d3.scaleLinear([0, Math.max(...weights.map(d => d.weight))], [0, size])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"axes = weights.map((axis, i) => {\n const rScale = d3.scaleLinear([0, 1], [0, radius(axis.weight)]);\n const angle = i * (2 / 3) * Math.PI - Math.PI / 2;\n return {\n ...axis,\n angle,\n scale: (d) => [rScale(d) * Math.cos(angle), rScale(d) * Math.sin(angle)]\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"colors = d3.schemeCategory10; //[\"#AB323D\", \"#62AFE7\", \"#D6B729\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"grouped = d3.group(data, d => d.Player)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null