2b:null 2c:["$","title",null,{"children":"538 NFL Chances | pembeci | Observable"}] 31:Tb92, chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); function validNode(node) { return !hasNaN(node) && node.value >= 0; } const {nodes, links} = sankey(data); nodes.forEach(d => { d.name = d.name.split("_")[0]}); const filteredNodes = nodes.filter(node => validNode(node)) const filteredLinks = links.filter(d => (d.source.name != d.target.name) && validNode(d.source) && validNode(d.target)) svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(filteredNodes) .enter().append("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .append("title") .text(d => `${d.name}\n${format(d.value / 100)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.7) .selectAll("g") .data(filteredLinks) .enter().append("g") .style("mix-blend-mode", "multiply"); if (edgeColor === "path") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x2", d => d.source.x1) .attr("x1", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value / 100)}`); const labelNodes = filteredNodes.filter(d => d.value > 5); svg.append("g") .style("font", "10px sans-serif") .selectAll("text.team") .data(labelNodes) .enter().append("text") .attr("class", "team") // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("x", d => (d.x0 + d.x1) / 2) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "-0.30em") .attr("text-anchor", "middle") // d => d.x0 < width / 2 ? "start" : "end") .text(d => `${d.name}`) svg.append("g") .style("font", "9px sans-serif") .selectAll("text.chance") .data(labelNodes) .enter().append("text") .attr("class", "chance") // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("x", d => (d.x0 + d.x1) / 2) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.90em") .attr("text-anchor", "middle") // d => d.x0 < width / 2 ? "start" : "end") .text(d => `${format(d.value / 100)}`) return svg.node(); }32:T8c1,links = { const links = []; let week = 0; const teams = teamsData[division]; while (week < weekLast) { const teamNames = Object.keys(teams).sort((t1,t2) => teams[t1][week] - teams[t2][week]); teamNames.forEach((t,i) => { if (teams[t][week] < 1) { const dist = teams[t][week] / (teamNames.length-i-1); for (let j=i+1; j teams[t][week] >= 1) .map(t => ({team: t, give: teams[t][week] })) .sort( (d1,d2) => d2.give - d1.give); const bars2 = teamNames.filter(t => teams[t][week+1] >= 1) .map(t => ({team: t, want: teams[t][week+1] })) .sort( (d1,d2) => d2.want - d1.want); bars1.forEach(team1 => { bars2.forEach(team2 => { if (team1.team == team2.team) { if (team2.want >= team1.give) { links.push({source: team1.team + "_" + week, target: team2.team + "_" + (week + 1), value: team1.give}); team2.want -= team1.give; team1.give = 0; } else { links.push({source: team1.team + "_" + week, target: team2.team + "_" + (week + 1), value: team2.want}); team1.give -= team2.want; team2.want = 0; } } }) }) bars1.forEach(team1 => { if (team1.give == 0) return; bars2.forEach(team2 => { if (team1.team != team2.team && team1.give > 0 && team2.want > 0) { if (team2.want >= team1.give) { links.push({source: team1.team + "_" + week, target: team2.team + "_" + (week + 1), value: team1.give}); team2.want -= team1.give; team1.give = 0; } else { links.push({source: team1.team + "_" + week, target: team2.team + "_" + (week + 1), value: team2.want}); team1.give -= team2.want; team2.want = 0; } } }) }) week++; } links.forEach(link => { link.value = +(link.value.toFixed(3)) }) return links.filter(link => link.value >= 0); } 33:[] 2f:{"id":"6df1c164dbee5670","slug":"538-nfl-chances","title":"538 NFL Chances","thumbnail":"2f14033139820a465e4529e52525f15eb24b8d5f5273b74cc40ca7f3fba3a478","access_level":"public","create_time":"$D2018-11-10T23:12:00.617Z","update_time":"$D2019-01-23T22:10:16.134Z","view_time":null,"first_public_time":"$D2018-11-11T04:58:30.609Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"88abc8fecdeb7811","login":"pembeci","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f1ff548c862bdb114171e430f5632b7bea66b973a6a092c53b86ecf9211ca9a0","tier":"starter_2024"},"version":240,"publish_version":240,"role":null,"authored":false,"authors":[{"type":"individual","id":"d703748563fe201b","login":"pembeci","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f1ff548c862bdb114171e430f5632b7bea66b973a6a092c53b86ecf9211ca9a0","tier":null}],"members":[{"type":"individual","id":"d703748563fe201b","login":"pembeci","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f1ff548c862bdb114171e430f5632b7bea66b973a6a092c53b86ecf9211ca9a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"538 NFL Chances","cells":[{"id":0,"value":"md`# 538 NFL Chances`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"viewof edgeColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"viewof division = {\n const options = Object.keys(teamsData).sort().map(divName => html``)\n return html``\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"md`How 538 predictions for ${division} division winner changed week by week.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"format = d3.format(\".1p\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"sankey(data).nodes.filter(node => hasNaN(node))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":" function hasNaN(node) {\n return isNaN(node.x0) || isNaN(node.y0) || isNaN(node.x1) || isNaN(node.y1);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"data = ({ nodes: nodes, links: links})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"// let's verify our link totals\nnotebookTotals = {\n const weeklyTotals = {};\n for (let w=1; w<=weekLast; w++) {\n weeklyTotals[w] = d3.sum(links.filter(link => link.target.split(\"_\")[1] == w).map(link => link.value))\n }\n return weeklyTotals;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"nodes = {\n const nodes = [];\n Object.entries(teamsData[division]).forEach(([teamName, weeks]) => {\n nodes.push(...(Object.keys(weeks).map(w => ({name: teamName + \"_\" + w})))); \n })\n return nodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"// let's verify 537 weekly totals\n_538Totals = {\n const weeklyTotals = {};\n Object.entries(teamsData).forEach( ([divName, divData]) => { \n for (let w=0; w<=weekLast; w++) {\n weeklyTotals[divName + \"_\" + w] =d3.sum(Object.keys(divData).map(team => divData[team][w]))\n }\n })\n return weeklyTotals;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"teamsData = {\n const data = {} \n forecasts.forEach(w => {\n w.teams.forEach(row => {\n data[row.division] = data[row.division] || {};\n data[row.division][row.name] = data[row.division][row.name] || {};\n data[row.division][row.name][w.week] = 100 * row.win_division; // make_playoffs \n })\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"weekLast = 17 // d3.max(forecasts, d => d.week)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"forecasts = json538.weekly_forecasts.forecasts","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeWidth(30)\n .nodePadding(2)\n .nodeId(d => d.name)\n .extent([[1, 1], [width - 1, height - 3]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"height = 480","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"width = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"json538 = await d3.json(\"https://projects.fivethirtyeight.com/2018-nfl-predictions/data.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"