31:T6b0,magicNumberTable = htl.html` ${teamData.map((row, i) => html``)} ${teamData.map( (row, i) => html` ${teamData.map( (col, i) => html`` )} ` )}

POS	TEAM		PTS	${row.displayName}
${i + 1}		${row.displayName}	${row.points}	${magicNumber(row, col)}${ magicNumber(row, col) != "-" ? html`If ${ row.abbreviation } earns ${magicNumber(row, col)} points and/or ${ col.abbreviation } fails to earn ${magicNumber(row, col)} points, ${ row.abbreviation } will finish above ${col.abbreviation}` : "" }

`32:T448,async function getTeamStatistics(teams) { try { const teamsWithStats = await Promise.all( teams.map(async (team) => { const statsResponse = await axios.get( team.statistics.$ref.replace("http://", "https://") ); const generalStats = statsResponse.data.splits.categories.find( (cat) => cat.name === "general" ).stats; team.stats = generalStats; team.wins = generalStats.find((stat) => stat.name === "wins").value; team.losses = generalStats.find((stat) => stat.name === "losses").value; team.draws = generalStats.find((stat) => stat.name === "draws").value; team.points = 3 * generalStats.find((stat) => stat.name === "wins").value + generalStats.find((stat) => stat.name === "draws").value; team.recordString = team.wins + "-" + team.draws + "-" + team.losses; return team; }) ); return teamsWithStats.sort((a, b) => b.points - a.points); } catch (error) { console.error("Error fetching team statistics:", error); throw error; } }33:[] 2f:{"title":"NWSL Magic Numbers","cells":[{"id":422,"value":"# NWSL Magic Numbers\n\nUsing in-browser data scraping (see below for full implementation). Based on [In-Browser Data Scraping](https://observablehq.com/@bsaf/in-browser-data-scraping) and informed by the [ESPN Hidden API Docs](https://gist.github.com/akeaswaran/b48b02f1c94f873c6655e7129910fc3b). _Code last updated January 16, 2024._","pinned":false,"hidden":false,"mode":"md"},{"id":693,"value":"viewof selectedSeason = Inputs.select(\n seasons.map((d) => d.year),\n { label: \"Season\", format: (d) => d }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"_Note: Seasons before 2021 may not work due to inconsistencies in the ESPN API._","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"Questions? Comments? [Find me in the forums.](https://talk.observablehq.com/t/sports-data-analysis-through-the-espn-api/7084)","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"## What is a magic number?\nIn sports, a [magic number](https://en.wikipedia.org/wiki/Magic_number_%28sports%29) is the number of wins (or points, in soccer) that Team A needs to guarantee it will finish ranked above Team B. It can be calculated by taking Team A's current wins/points, subtracting Team B's current wins/points, and then subtracting the total remaining wins/points that Team B could get in the remainder of the season.","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"seasonLength = 22","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"function magicNumber(teamA, teamB) {\n // return nothing if both arguments are the same team\n if (teamA == teamB) {\n return \"\";\n }\n // calculate possible points remaining and magic number\n let pointsRemainingA =\n (seasonLength - teamA.wins - teamA.losses - teamA.draws) * 3;\n let pointsRemainingB =\n (seasonLength - teamB.wins - teamB.losses - teamB.draws) * 3;\n let num = teamB.points - teamA.points + pointsRemainingB + 1;\n // if number is unachievable, replace with a hyphen\n if (num > pointsRemainingA + pointsRemainingB) {\n return \"-\";\n }\n if (num <= 0) {\n return \"-\";\n }\n // otherwise, return the number\n return num;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"## In-Browser Web Scraping\n\nThe rest of this page is dedicated to explaining how I pulled in the data necessary to create the above table.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"First, start with a URL you want to scrape from:","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"urlSeasons = \"https://sports.core.api.espn.com/v2/sports/soccer/leagues/usa.nwsl/seasons/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"async function getSeasonsData(urlSeasons) {\n try {\n const seasonsResponse = await axios.get(urlSeasons);\n const seasonsData = await Promise.all(\n seasonsResponse.data.items.map(async (season) => {\n const seasonData = await axios.get(season.$ref.replace(\"http://\", \"https://\"));\n return seasonData.data;\n })\n );\n return seasonsData;\n } catch (error) {\n console.error(\"Error fetching seasons data:\", error);\n throw error; // Rethrow to allow error handling by the caller\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":921,"value":"seasons = await getSeasonsData(urlSeasons)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"urlTeams = \"https://sports.core.api.espn.com/v2/sports/soccer/leagues/usa.nwsl/seasons/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"async function getTeamsData(url, selectedSeason) {\n const urlTeams = `${url}${selectedSeason}/teams/`;\n try {\n const teamsResponse = await axios.get(urlTeams);\n const teamsData = await Promise.all(\n teamsResponse.data.items.map(async (team) => {\n const teamData = await axios.get(\n team.$ref.replace(\"http://\", \"https://\")\n );\n return teamData.data;\n })\n );\n return teamsData;\n } catch (error) {\n console.error(\"Error fetching teams data:\", error);\n throw error;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":924,"value":"teams = await getTeamsData(urlTeams, selectedSeason)","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"Output our results as a table:","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"teamTable = htl.html`\n\n \n ${teams.map(\n (row, i) =>\n html``\n )}\n \n

${row.displayName}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"Get the stats for each team:","pinned":false,"hidden":false,"mode":"md"},{"id":787,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"teamData = await getTeamStatistics(teams)","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"Now we can easily construct a much more detailed table:","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"htmlTable = htl.html`\n\n \n \n \n \n ${teamData.map((row, i) => {\n return html`\n \n \n \n `;\n })}\n \n

	Team Name	Record (W-D-L)	Points
	${row.displayName}	${row.recordString}	${row.points}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"The above table uses HTML with an eye toward embedding the table within a website in the future. However, sometimes it's easier to use Observable's built-in [Table Input](https://observablehq.com/@observablehq/input-table). One downside to this approach is that the formatting is somewhat less flexible. In this case, we need to prep the data by extracting nested properties first.","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"teamDataFlat = teamData.map((d) => {\n let dflat = new Object(d);\n dflat.nameLink = d.name.link(d.links[1].href);\n return dflat;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"Now we can create a table. This ultimately ended up being rather verbose, but can be much simpler if your data set is simpler.","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"observableTable = Inputs.table(teamDataFlat, {\n // specify which properties of the data objects to turn into columns\n columns: [\"logos\", \"nameLink\", \"recordString\", \"points\"],\n // some examples of different ways to load things\n format: {\n // load an image from a url using an html literal\n logos: (x) => htl.html`

`,\n // create a link by adding a div to the DOM\n nameLink: (x) => {\n let div = document.createElement(\"div\");\n div.innerHTML = x;\n return div;\n },\n // map to a property of the object\n record: (x) => x.items[0].summary,\n // wrap the map in a sparkbar function\n points: sparkbar(d3.max(teamDataFlat, (d) => d.points))\n },\n // specify what to label the columns as\n header: {\n logos: \"\",\n nameLink: \"Team Name\",\n recordString: \"Record (W-D-L)\",\n points: \"Points\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md `### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"import { sparkbar } from \"@observablehq/input-table\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}