2e:null 2f:["$","title",null,{"children":"NFL Schedule 2022 Alluvial Diagram | Advaith Venkatakrishnan | Observable"}] 34:T1037,chart = { const height = 700 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const margin = { top: 35, bottom: 75, left: 50, right: 50 } const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) .attr('class', 'plotGroup') // Scales const xScale = d3.scaleBand().domain(weeks).range([0, plotWidth]) const yScale = d3.scaleBand().domain(d3.range(maxMatchesWeek)).range([0, plotHeight]).paddingInner(0.3) const gameScale = d3.scaleLinear().domain([0,100]).range([yScale.bandwidth(), 0]) // Week Labels const weekGroups = g.selectAll('.week') .data(preppedData) .join('g') .attr('transform', (d, i) => `translate(${xScale(i + 1) + xScale.bandwidth() / 2}, 0)`) .attr('class', 'week') const weekLabelGroups = weekGroups.selectAll('.weekLabelGroup') .data((d, i) => [i + 1]) .join('text') .attr('x', 0) .attr('y', -35) // TODO does this have to be hardcoded? .attr('text-anchor', 'middle') .attr('font-size', '10px') .attr('font-weight', '500') .attr('class', 'weekLabelGroup') weekLabelGroups.selectAll('.weekLabel') .data(d => ['WEEK', d]) .join('tspan') .attr('x', 0) .attr('dy', '0.7rem') .attr('class', 'weekLabel') .text(d => d) const games = weekGroups.selectAll('.game') .data(d => d) .join('g') .attr('transform', (d, i) => `translate(0, ${yScale(i)})`) .attr('class', 'game') const teamGameLabel = games.selectAll('.teamLabel') .data(d => d) .join('text') .attr('x', -25) // this needs to not be hardcoded .attr('y', (d, i) => i % 2 === 0 ? gameScale(100) + gameScale(100 - d.success) / 2 : gameScale(d.success) + gameScale(100 - d.success) / 2 ) .attr('text-anchor', 'left') .attr('font-size', '8px') .attr('dy', '4') .attr('class', 'teamLabel') .attr('fill', d => colorMap[d.team].primary) .text((d,i) => `${d.team}`) const winPercentageLabel = games.selectAll('.winPercentageLabel') .data(d => d) .join('text') .attr('x', 10) // this needs to not be hardcoded .attr('y', (d, i) => i % 2 === 0 ? gameScale(100) + gameScale(100 - d.success) / 2 : gameScale(d.success) + gameScale(100 - d.success) / 2 ) .attr('text-anchor', 'right') .attr('font-size', '8px') .attr('dy', '4') .attr('class', 'winPercentageLabel') .attr('opacity', 0) .attr('fill', d => colorMap[d.team].primary) .text((d,i) => `${d.success}%`) const teamGame = games.selectAll('.team') .data(d => d) .join('rect') .attr('x', -MATCH_WIDTH / 2) .attr('y', (d, i) => i % 2 === 0 ? gameScale(100) : gameScale(d.success)) .attr('height', d => gameScale(100 - d.success)) .attr('width', MATCH_WIDTH) .attr('fill', d => colorMap[d.team].primary) .attr('fill-opacity', 0.9) .attr('stroke', 'white') .attr('stroke-width', '1px') .attr('rx', 1) .attr('ry', 1) .on('mouseover', (event, data) => { // Simplify this function const { team, success, oppTeam, oppTeamSuccess, week } = data // Highlight Path highlightPath(data, gameScale, xScale, yScale) // Tooltip // setTooltip(event, data) }) .on('mouseout', (event, data) => { // simplify these functions g .selectAll('.highlight') .data([]) .join('path') .attr("class", "highlight") g.selectAll('.team') .attr('opacity', 0.9) g.selectAll('.teamLabel') .attr('opacity', 1) .attr('font-weight', 'normal') g.selectAll('.winPercentageLabel') .attr('opacity', 0) tooltip.style("visibility", "hidden"); }) .attr('class', 'team') return Object.assign(svg.node()); }35:T4b1,setTooltip = (event, data) => { const {team, oppTeam, success, oppTeamSuccess} = data const logoBaseURL = (team) => `https://sportsbook.draftkings.com/static/logos/teams/nfl/${team}.png` const teamLinkImage = `` const oppTeamLinkImage = `` tooltip .style("top", (event.pageY + 20)+"px") // is there a better way to adjust this? .style("left",(event.pageX - 65)+"px") .style("visibility", "visible") .html(`

${team}

${success}%

${oppTeam}

${oppTeamSuccess}%

`); }36:T43f,style = html` `37:[{"id":"8c1d13e3529e7266800007528cdea1125635c44266e3b0e089fa012daa98a1058175ea841e925a78fbc98475af8f2f336ce72a2a230c2c882d4291393a8018a0","href":"https://static.observableusercontent.com/files/8c1d13e3529e7266800007528cdea1125635c44266e3b0e089fa012daa98a1058175ea841e925a78fbc98475af8f2f336ce72a2a230c2c882d4291393a8018a0","name":"nfl-team-colors.csv","type":"text/csv","lastModified":1652711872427.088,"size":1666},{"id":"2f10e54080fe351f377e428a26aad447b53932cc8c552669281e92453dd66401f37d19959bcdadb303b2ea711773e1ee8e48588c11c69b7036e45effd5d056ab","href":"https://static.observableusercontent.com/files/2f10e54080fe351f377e428a26aad447b53932cc8c552669281e92453dd66401f37d19959bcdadb303b2ea711773e1ee8e48588c11c69b7036e45effd5d056ab","name":"dataSource@2.csv","type":"text/csv","lastModified":1652713640644.909,"size":18596},{"id":"21dfac4fdc764a62be5e4e22ef5c6454f7983946e5457033cebac4768a0353b66ac385b27ec58361094228330e95c0d2cc1c2baaaa3e7c71b02026bfff2aa02d","href":"https://static.observableusercontent.com/files/21dfac4fdc764a62be5e4e22ef5c6454f7983946e5457033cebac4768a0353b66ac385b27ec58361094228330e95c0d2cc1c2baaaa3e7c71b02026bfff2aa02d","name":"2022NFLGameOdds.json","type":"application/json","lastModified":1652835157214.749,"size":59020},{"id":"a4f2bbf1a88564eb65845612ce8c213adffdab322d077aaeedc8779cf22af45e01f9bc5174d32cd3a096096d4221567149a225e60931ba42b459973581a359f3","href":"https://static.observableusercontent.com/files/a4f2bbf1a88564eb65845612ce8c213adffdab322d077aaeedc8779cf22af45e01f9bc5174d32cd3a096096d4221567149a225e60931ba42b459973581a359f3","name":"2022NFLGameOdds@1.json","type":"application/json","lastModified":1652839186484.973,"size":59454},{"id":"c54e72d9f6f235952358f7be6191ce7694ef8ab3436e9b2669ef849f1db83654c15d2fb34917fc361216364d5643b1be2497af243aeb8366f383c45940f436ab","href":"https://static.observableusercontent.com/files/c54e72d9f6f235952358f7be6191ce7694ef8ab3436e9b2669ef849f1db83654c15d2fb34917fc361216364d5643b1be2497af243aeb8366f383c45940f436ab","name":"colorMap.json","type":"application/json","lastModified":1652835299870.618,"size":2154}] 32:{"id":"d81701645e7a334a","slug":"chart-recreation-nfl-schedule-alluvial-diagram","title":"NFL Schedule 2022 Alluvial Diagram","thumbnail":"0a757358b9e9b5051ccb1bc9237a6a0045758a3c5c1fb1a327a5cb0372f819c2","access_level":"public","create_time":"$D2022-05-14T16:03:53.131Z","update_time":"$D2022-05-19T15:29:46.626Z","view_time":null,"first_public_time":"$D2022-05-16T17:11:59.107Z","has_unpublished_edits":null,"fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"20079c8e956535fa","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":"starter_2024"},"version":993,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6016059babd9176a","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":null}],"members":[{"type":"individual","id":"6016059babd9176a","login":"adv1996","name":"Advaith Venkatakrishnan","avatar_url":"https://avatars-next.observableusercontent.com/235d93db85725164a91bc264da213cb78fb9310bdaf54baaf5d46bcc5e700c84","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"NFL Schedule 2022 Alluvial Diagram","cells":[{"id":0,"value":"# NFL Schedule 2022 Alluvial Diagram\n\nRecreating a project from [BrightPoint](http://www.brightpointinc.com/2015-nfl-predictions/) to visualize the 2015 NFL schedule.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"This notebook shows each game in the 2022 NFL season. Within each game the chances of winning for each team is encoded as the size for each team rectangle. Implied probability is calculated from [DraftKings](https://sportsbook.draftkings.com/leagues/football/88670561?wpsrc=Organic%20Search&wpaffn=Google&wpkw=https%3A%2F%2Fsportsbook.draftkings.com%2Fleagues%2Ffootball%2F88670561&wpcn=leagues&wpscn=football%2F88670561) Money Line odds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":737,"value":"

\n 2022 NFL Regular Season\n

\n Win probabilities for each team in every game\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"areaGame = d3.area()\n .x(d => d.x)\n .y0(d => d.y0)\n .y1(d => d.y1)\n .curve(d3.curveMonotoneX);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"buildHighlight = (team, gameScale, xScale, yScale) => {\n const teamData = data.filter(match => match.teamANickname === team || match.teamBNickname === team)\n return teamData.map(d => {\n const teamAccessor = d.teamANickname === team ? 'teamASuccess' : 'teamBSuccess'\n const isTopTeam = teamAccessor === 'teamASuccess'\n return [\n {\n x: xScale(d.week) + xScale.bandwidth() / 2 - MATCH_WIDTH / 2,\n y0: yScale(d.game) + (isTopTeam ? gameScale(100) : gameScale(d[teamAccessor])),\n y1: yScale(d.game) + (isTopTeam ? gameScale(100 - d[teamAccessor]) : gameScale(0))\n },\n {\n x: xScale(d.week) + xScale.bandwidth() / 2 + MATCH_WIDTH / 2,\n y0: yScale(d.game) + (isTopTeam ? gameScale(100) : gameScale(d[teamAccessor])),\n y1: yScale(d.game) + (isTopTeam ? gameScale(100 - d[teamAccessor]) : gameScale(0))\n }\n ]\n }).flat()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"highlightPath = (selectedData, gameScale, xScale, yScale) => {\n const { team, oppTeam, idx } = selectedData\n const g = d3.select('.plotGroup')\n const highlightData = buildHighlight(team, gameScale, xScale, yScale)\n const games = data.filter(d => d.teamANickname === team || d.teamBNickname === team).map(d => d.idx)\n \n g\n .selectAll('.highlight')\n .data([highlightData])\n .join('path')\n .attr(\"class\", \"highlight\")\n .attr(\"d\", d => areaGame(d))\n .attr('fill', d => colorMap[team].primary)\n .attr('fill-opacity', 0.3)\n .lower()\n g.selectAll('.team')\n .attr('opacity', d => games.includes(d.idx) ? 1 : 0.1)\n g.selectAll('.teamLabel')\n .attr('opacity', d => games.includes(d.idx) ? 1 : 0.1)\n .attr('font-weight', d => games.includes(d.idx) ? '600' : 'normal')\n g.selectAll('.winPercentageLabel')\n .attr('opacity', d => games.includes(d.idx) ? 1 : 0)\n .attr('font-weight', d => games.includes(d.idx) ? '600' : 'normal')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"rawData = FileAttachment(\"2022NFLGameOdds@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"teamData = Object.values(_.mapValues(_.groupBy(_.orderBy(rawData.map(d => {\n const { teamA, teamB, teamANickname, teamBNickname, teamASuccess, teamBSuccess} = d\n const isTeamAWinning = teamASuccess >= teamBSuccess\n const orderedGame = {\n teamA: isTeamAWinning ? teamA : teamB,\n teamB: isTeamAWinning ? teamB: teamA,\n teamANickname: isTeamAWinning ? teamANickname : teamBNickname,\n teamBNickname: isTeamAWinning ? teamBNickname : teamANickname,\n teamASuccess: isTeamAWinning ? teamASuccess : teamBSuccess,\n teamBSuccess: isTeamAWinning ? teamBSuccess : teamASuccess,\n }\n return {\n ...d,\n ...orderedGame\n }\n}), ['week', 'teamASuccess'], ['asc', 'desc']), 'week'), d => {\n return d.map((game,i) => {\n return {\n ...game,\n game: i\n }\n })\n})).flat()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"sortData = (sortFlag) => {\n return Object.values(_.mapValues(_.groupBy(_.orderBy(teamData, ['week', 'teamASuccess'], ['asc', sortFlag === 'Descending' ? 'desc' : 'asc']), 'week'), d => {\n return d.map((game,i) => {\n return {\n ...game,\n game: i\n }\n })\n })).flat()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"data = sortData()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"weeks = _.uniqBy(data, 'week').map(d => d.week)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"maxMatchesWeek = d3.max(Object.values(_.groupBy(data, 'week')).map(d => d.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"prepData = (data) => _.values(_.groupBy(data, 'week')).map(d => d.map(game => {\n return [\n {\n 'team': game.teamANickname,\n 'success': game.teamASuccess,\n 'oppTeam': game.teamBNickname,\n 'oppTeamSuccess': game.teamBSuccess,\n 'week': game.week,\n 'idx': game.idx\n },\n {\n 'team': game.teamBNickname,\n 'success': game.teamBSuccess,\n 'oppTeam': game.teamANickname,\n 'oppTeamSuccess': game.teamASuccess,\n 'week': game.week,\n 'idx': game.idx\n }\n ]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"preppedData = prepData(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"colorMap = FileAttachment(\"colorMap.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"info\")\n .html(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"MATCH_WIDTH = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"import {select} from \"@jashkenas/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"