2b:null 2c:["$","title",null,{"children":"Player Replacement Finder for FIFA 22 | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:[{"id":"f5f2c14b727ed6b672e87e1c6fdb95c957bb49de8ab3fc01ed2f60a471262cfad2775e3c54a4d891e7713b55c08b36288a44da53573bd691df014f792524903d","href":"https://static.observableusercontent.com/files/f5f2c14b727ed6b672e87e1c6fdb95c957bb49de8ab3fc01ed2f60a471262cfad2775e3c54a4d891e7713b55c08b36288a44da53573bd691df014f792524903d","name":"players_22.csv","type":"text/csv","lastModified":1745275896979.514,"size":13621492}] 2f:{"id":"5c359884048c2c6e","slug":null,"title":"Player Replacement Finder for FIFA 22","thumbnail":"36d19b2027ed5257ca4a2f2c024a4fed162e8ac2a8ac4a0dde1d834be2eebc08","access_level":"public","create_time":"$D2025-04-21T22:48:27.718Z","update_time":"$D2025-04-22T06:15:01.344Z","view_time":null,"first_public_time":"$D2025-04-22T05:57:35.693Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":296,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c43a3832073d59e0","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/7236be39798128ec4d4f3c6f7847b6409a07099a3c87825dcc50c3ec2860644e","tier":null,"bio":""}],"members":[{"type":"individual","id":"c43a3832073d59e0","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/7236be39798128ec4d4f3c6f7847b6409a07099a3c87825dcc50c3ec2860644e","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Player Replacement Finder for FIFA 22","cells":[{"id":0,"value":"# Player Replacement Finder for FIFA 22","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"This is a tool to find a replacement for any player in FIFA 22. Choose the player to replace, select any filters that fit the description of the replacements you might be looking for and voilà, you have the best replacements and can also compare them visually with a bar chart!\n\nThis is a project done by [Jonathan Tarun Rajasekaran](https://observablehq.com/d/8586f881717414c5) from Northeastern University for the course - CS5010: Programming Design Paradigms, under Professor [John Alexis Guerra Gomez](https://johnguerra.co/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"## Choose the player you need a replacement for","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"viewof selectedName = Inputs.select(\n data.map(d => d.long_name),\n {label: \"Player:\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"## Adjust Filters for what you would like to see in your replacements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"viewof filteredPlayers = FilterWidget(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"## Choose what to qualities to include in computing similarity:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"viewof activeAttrs = Inputs.checkbox(\n allAttrs.map(d => d.key),\n {\n value: allAttrs.map(d => d.key),\n format: key => labelFor[key],\n label: \"Attributes to be used in calculating similarity:\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"## How many replacements?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"viewof numReplacements = Inputs.number({\n label: \"Number of Players:\",\n value: 5,\n min: 1,\n max: candidates.length,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"## Top Replacements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"Inputs.table(\n topReplacements.map((d, i) => ({\n Rank: i + 1,\n Name: d.long_name,\n Nationality:d.nationality_name,\n Positions: d.player_positions,\n Shooting: d.shooting,\n Passing: d.passing,\n Pace: d.pace,\n Height: d.height_cm,\n Age: d.age,\n Similarity: d.dist.toFixed(2)\n })),\n {\n layout: \"fixed\",\n width: {\n Rank: \"5%\",\n Name: \"25%\",\n Nationality:\"15%\",\n Positions: \"15%\",\n Shooting: \"7%\",\n Passing: \"7%\",\n Pace: \"5%\",\n Height: \"5%\",\n Age: \"5%\",\n Similarity: \"11%\"\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"## Visual Comparison Of The Top 3 Replacement Choices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"vl.markBar({ tooltip: true })\n .data(barChartData)\n .encode(\n vl.column().fieldN(\"attribute\").title(null).spacing(90),\n vl.y().fieldN(\"player\").title(\"Player\"),\n vl.x().fieldQ(\"value\")\n .title(\"Stat Value\"),\n vl.color().fieldN(\"player\").legend(null),\n vl.opacity().fieldN(\"isSelected\").scale({\n domain: [false, true],\n range: [0.6, 1]\n }),\n vl.strokeWidth().fieldN(\"isSelected\").scale({\n domain: [false, true],\n range: [0, 2]\n }),\n vl.stroke().value(\"black\")\n )\n .width(230)\n .height(200)\n .render();\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"### I have limited the number of players on this visualization to 3, just to keep it simple!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"## Problem Statement\n\nThis tool helps fantasy managers and FIFA enthusiasts find optimal substitutes for any chosen player by ranking candidates according to statistical similarity. It solves the real problem of maintaining team balance after transfers or injuries by computing Euclidean distances across key attributes like pace, shooting and passing on the [FIFA 22 dataset](https://www.kaggle.com/datasets/stefanoleone992/fifa-22-complete-player-dataset?select=players_22.csv) from Kaggle (19 k+ players, 100+ attributes)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"## How to use it?\n\n1. Select the player that you need to replace.\n\n2. Scroll to the Filter Controls.\n\n3. You’ll see sliders and checkboxes (your custom inputs) for things like:\n\n - Name\n - Nationality\n - Max Age\n - Height\n - Shooting, Pace and Passing range\n\n4. Adjust each control to narrow down the subset of players you’d like to consider as replacements.\n\n5. The reactive widget - [FilterWidget](https://observablehq.com/d/2ea3948c8ef330fe) - will output a new array of filtered players containing only those players matching your criteria.\n\n6. Choose what attributes you would like to consider when comparing similarities between players.\n\n7. Choose the number of replacements you would like to see.\n\n8. View the bar chart of the top 3 replacements for easy comparisons.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"## Custom Input\n\nThe custom input that I created was the [FilterWidget](https://observablehq.com/d/2ea3948c8ef330fe). It takes a dataset of players as input with specific attributes and creates a widget via which a user can apply some filters. Check out the link for a more detailed documentation of the same.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"## Resuable Function\n\nI wrote a function that computes the euclidean distance between two objects, given the attributes array on which we need to perform the computation. It is not specific to my project and can be used in any other project where computing the euclidean distance might be necessary. [Click here to check out my notebook on this function.](https://observablehq.com/d/9907c0223c41a513)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"## Demo Video\n\n[Click here to check out the demo video.](https://youtu.be/vGwxLBtBD4c)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"## Rubric Video\n\n[Click here to check out the video for the rubric.](https://youtu.be/2qNOdiQxJ8I)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"## Bluesky Post\n[Click here to view my Bluesky post.](https://bsky.app/profile/jonathantarun.bsky.social/post/3lneyttkjbk2y)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"comparisonData = [\n ...[\"shooting\",\"passing\",\"pace\"].map(attr => ({\n player: selected.long_name,\n attribute: attr[0].toUpperCase() + attr.slice(1),\n value: +selected[attr] // ← the “+” forces a Number (this conversion was suggested by ChatGPT)\n })),\n ...topThree.flatMap(p =>\n [\"shooting\",\"passing\",\"pace\"].map(attr => ({\n player: p.long_name,\n attribute: attr[0].toUpperCase() + attr.slice(1),\n value: +p[attr]\n }))\n )\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"barChartData = comparisonData.map(d => ({\n ...d, \n isSelected: d.player === selected.long_name\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"topThree = ranked.slice(0,3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"allPlayers = [selected, ...topThree]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"topReplacements = ranked.slice(0, numReplacements)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"ranked = candidates\n .map(d => ({\n ...d,\n dist: distance(selected, d, activeAttrs)\n }))\n .sort((a, b) => a.dist - b.dist)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"candidates = filteredPlayers.filter(d => d.long_name !== selectedName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"labelFor = Object.fromEntries(allAttrs.map(d => [d.key, d.label]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"activeAttrs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"selected = data.find(d => d.long_name === selectedName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"selectedName","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"allAttrs = [\n {key: \"shooting\", label: \"Shooting\"},\n {key: \"passing\", label: \"Passing\"},\n {key: \"pace\", label: \"Pace\"},\n {key: \"height_cm\", label: \"Height (cm)\"},\n {key: \"age\", label: \"Age\"}\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"filteredPlayers","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = FileAttachment(\"players_22.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {FilterWidget} from \"2ea3948c8ef330fe\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"import {distance} from \"9907c0223c41a513\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"