29:null 2a:["$","title",null,{"children":"NWSL Magic Numbers | Philip Mathieu | Observable"}] 2f: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}` : "" }

`30: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; } }31:[] 2d:{"id":"1cd54e4c590ebf16","slug":"nwsl-magic-numbers","title":"NWSL Magic Numbers","thumbnail":"bc3886e0fdf7f5f6298ae5b3c7dc0747a68e60702c1053e2c09434dbbcdbae93","access_level":"public","create_time":"$D2022-09-28T23:48:57.767Z","update_time":"$D2024-01-16T20:08:11.941Z","view_time":null,"first_public_time":"$D2022-09-29T19:25:58.425Z","has_unpublished_edits":null,"fork":{"id":"509049955bf1e6e3","slug":"in-browser-data-scraping","title":"In-browser data scraping","owner":{"id":"c677b775e28e0727","login":"bsaf","name":"Basil"}},"stars":4,"starred":false,"owner":{"type":"team","id":"87b30b5eafbc2191","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":"starter_2024"},"version":971,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"78e7f3c5039127cf","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":null}],"members":[{"type":"individual","id":"78e7f3c5039127cf","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":null,"role":"editor"}],"comments":[{"id":"7a83c752458b041d","reply_to_id":null,"content":"Would be cooler if we can sort by 'pts'","create_time":"$D2022-09-30T16:12:12.797Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"46d2f558159e3520","login":"rodroadl","name":"rodroadl","avatar_url":"https://avatars-next.observableusercontent.com/3310ff4d9e5dcddf8db248c8a423d2fa5135fffc15c626c2190c798e3a01f061","tier":null}},{"id":"28fa7b9f698c2c76","reply_to_id":null,"content":"TODO: Find a way to get this number from the API.","create_time":"$D2024-01-16T20:07:18.244Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"78e7f3c5039127cf","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":null}},{"id":"321d8de726d8928d","reply_to_id":null,"content":"TODO: Make mobile compatible","create_time":"$D2024-01-16T20:07:49.823Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"78e7f3c5039127cf","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a935bb791f3be2c1","slug":"portfolio","title":"Portfolio","owner":{"id":"87b30b5eafbc2191","login":"philipmathieu","name":"Philip Mathieu"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"_Note: Seasons before 2021 may not work due to inconsistencies in the ESPN API._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"seasonLength = 22","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"First, start with a URL you want to scrape from:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"urlSeasons = \"https://sports.core.api.espn.com/v2/sports/soccer/leagues/usa.nwsl/seasons/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"seasons = await getSeasonsData(urlSeasons)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"urlTeams = \"https://sports.core.api.espn.com/v2/sports/soccer/leagues/usa.nwsl/seasons/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"teams = await getTeamsData(urlTeams, selectedSeason)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"Output our results as a table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"Get the stats for each team:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"teamData = await getTeamStatistics(teams)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"Now we can easily construct a much more detailed table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md `### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"import { sparkbar } from \"@observablehq/input-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"