29:null 2a:["$","title",null,{"children":"Project Report - CS 725/825, Spring 2022 | Adeniyi | Observable"}] 2f:T11be,# Visualization In total there were 6 major charts that were visualized each with different attributes that helped culminated the useful importance of scouting new players that could potentially be new players for a team. These individual charts will further be explained below. ## 1. Number of Players on "Selected " Club vs Position (Row Position 1, Column Position 1) This chart uses a horizontal bar chart to describe players' information on selected teams. On the vertical axis, it shows the positions of players bear on the team while on the horizontal axis shows the number of players that play in that position. There is also a color tooltip that helps indicate which position a selected player plays at. This information points out in-depth information about the team to any manager about his team. ## 2. "Selected Player" Attributes vs Z-scores (Row Position 1, Column Position 2) This chart was a negative bar chart. A negative bar chart is a chart that also shows negative values of bars indicated on the chart. This chart on the horizontal axis describes the attributes of selected players in a club. While on the vertical axis, a pre-computed z-scores of the player with respect to the overall club players is displayed. This chart basically interprets where a player's core strengths and weaknesses are. ## 3. Age Distribution "Selected Team" vs Counts of Records (Row Position 2, Column Position 1) This chart utilizes a horizontal bar chart, to express further detailed analysis of selected club player age distribution. The horizontal axis gives the age of the players in the club, while the horizontal axis gives the number of players with the same age value. This information is really vital because if the team strongly had older experienced players in other for the team to survive for the next coming decade to maintain a good status they need to start scouting new younger players. This helps with balancing and introducing younger talents to players with their older counterparts. Overall benefits the club's growth in the long term. There is no chart interaction on the chart, only tool-tip showing the age. ## 4. Age Distribution "Selected Percentile Ranking" vs Counts of Records (Row Position 2, Column Position 2) This chart is a vertical bar chart, that gives the age distribution of other players that are not in the selected club. It further subcategorizes these players into a percentile ranking. The chart is also a subcategory of the positions players are at meaning when any of the positions - Forward, MidFielders, Defenders, and Goalkeeper - is chosen compiles the selected options age distribution for the specified position. The chart has an interaction to it that uses a brush or selectInterval, where only by selected ages of player can be picked from. This affects chart 5 interactively. ## 5. Top 50 "percentile category chosen" player names vs meanZscore (Row Position 3, Column Position 1) This is a bar chart of the top 50 player names in each percentile category chosen - Very Poor, Poor, Average, and Excellent Player given. The horizontal axis gives the names of these players while the vertical axis gives the average/mean z-scores of the scores of player attributes - pace, defending, dribbling, goalkeeping, physical, and shooting. The interaction of chart 4 selects only players whose ages are within the selected interval range of value. This selection fades out bar charts that are not with the age span and other players within this group have a steel-blue color. ## 6. Player characteristics vs average capability (Row Position 3, Column Position 2) This chart is a mark-circle chart that plots two-layered mark circles using two different data variables. On the horizontal axis are the average capabilities or characteristics - meaning the average of pace, defending, dribbling, goalkeeping, physical, and shooting - being plotted while on the vertical axis is the characteristic score itself. In interpreting this chart, a dot that is on the topmost right corner has a better attribute scale. Some of the interactive features include zooming in and out of the chart. Color-wise, the displayed players in the top 50 have a steel-blue color, while a grey color is associated with other players in the selected team. Whenever a given player is selected the color coding is red, to indicate the position where the player is on the marked circle. Whenever a bar is selected in the 5 charts, it only indicates the steel-blue color only with the selected player 30:T1853, # Design Decisions The design decisions that were made in various aspects of the development ## Z-score data transformation One important thing about the visualization of this chart is the data transformation for a selected team player. Since vega-lite plotting Arquero table columns almost are impossible to plot individual columns in the table as attributes. I had to first single out the chosen player information as row data and convert it to an object. In this format, all the specified attributes names will be on a column called Attribute and all the associated z-score will be in a column also called Zscores. The ```formatZfunction()``` helps to make this object classification possible. The next goal was to read it back into an Arquero table, using the Arquero function ```toArrow``` and ```fromArrow``` helps to digest the previous output and give an Arquero table that is easy and ready to be plotted by vega lite. ``` zScorePlot = aq.fromArrow( aq.toArrow( formatZFunction( teamAnalysisZscore .filter(aq.escape(d => d["Name"] === playerName)) .select("PaceZscore", "DribblingZscore", "ShootingZscore", "PassingZscore", "DefendingZscore","PhysicalZscore", "GoalKeepingZscore") .object() ) ) ``` ## Percentile Category The percentile Category is another major feature that I gradually developed in the process to tie the use case and how it could be featured on the dashboard. ### Part One The first process was filtering out all players that were in the selected team drop-down menu. ### Part Two The second process required in-depth research on where player positions were and their abbreviations. The four categories of position I group were Forward, Midfielders, Defenders, and Goalkeepers. Samples of these associated grouping for example forwards comprises of strikers (ST), and forwards - this could be Left Forwards(LF), Right Forwards(RF), and center Forwards(CF), etc. I was also able to get the distinct positions that were in other clubs so I can fully categorize these positions into their appropriate groups. ### Part Three The third process for the percentile category was to filter out all players in the selected position category. In this process, I was able to use the function ```SelectPositionVariable()``` to spit out the chosen selected position abbreviations and put them in a set. ```positionSet = new Set(SelectPositionVariable(positionSelect,Forwards,MidFielders,Defenders,GK))``` ``` filtedByPosition = otherClubs .filter(aq.escape(d => positionSet.has(d["Position"]))) .reify() ``` ### Part Four In this part, I easily replicated the calculations for the z-scores for the selected position categories and of each attribute characteristic of the players. I was still confused about what to do with these data. Later on, I decided to rank all the players on the list according to their mean z-scores of all attributes and finally put these rankings as a percentile. For the ranking in Arquero, after sorting the mean z-score in ascending order I used the Arquero function to create a new column ```op.rank()``` that does the ordinal ranking of values. ``` percentRank = pickFromAnalysisZscore.derive({ "rank": op.rank(d=> d["meanZscore"]) }).reify()``` Finally created the percentile column by using the this formula Percentile Rank = [n /N] x 100 Where, n =ordinal rank of a given value N = number of values in the data set - the code ```totalSelected = pickFromAnalysisZscore.numRows()``` produces the total row data of the number of players in the selected filter positions for the calculation of percentile ranking, P = Percentile This was applied in the code in this format and sorted in descending order mean Z-score. ``` descPercentRank = percentRank.derive({ "percentile": aq.escape(d => d["rank"]/totalSelected) }).orderby(aq.desc("meanZscore")).reify()``` ### Part Five Range-based Picking after fully compiling the percentile rank column. The next step was to subcategorize these percentiles into Very Poor(0-25 percentile), Poor (25-50 percentile), Average (50-75 percentile), and excellent (75-100 percentile) players. ``` percentRankCategory = descPercentRank .filter(aq.escape(d =>(d["percentile"] > percentInterval.start))) .filter(aq.escape(d =>(d["percentile"] <=percentInterval.finish))).reify() ``` ### Part Six This part was to test out a bar chart to plot the data. I later discovered there was so much data to display so I sliced the data to just get the top 50 players. After the slice was done the chart came out very nice. I was happy with it and I definitely wanted to put this plot on the final dashboard. ``` top50perpentile = percentRankCategory.slice(0,50).reify() ``` ## Age Filtering (Row 2, Column 2) and (Row 3, Column 1) Age filtering was one of the major use cases that I always had in my mind while I developed the project. The ability of a manager to keep his team young strong and vibrant as the years' progress. Building an interactive connection between the age distribution of players with the top 50 players' bar chart was an Idea that directly tied strongly to the original use case of the project for the age filtering. The code application for plotting the chart was combining opacity vega-lite function that has condition values that determine how transparent the colors of the bar chart is within the range of the brush interval. ``` vl.opacity().if(brush, vl.value(0.75)).value(0.05) ``` ## Player filtering (Row 3, column 1 & 2) This part is mostly connecting a single point selected player name from the bar chart to indicate the player color coding on the chart with attributes - Pace, Dribbling, Shooting, Defending, Goalkeeping, Passing, and Physical - and avgCapability ## Labelling The final part is getting the appropriate label to indicate and reference the appropriate data for the visualization. This further provides and communicates to the user which player they are dealing with and the team. In the chart itself, some of the axises titles of the chart are dynamic as you change some of the drop-down characteristics. This helps for a better interpretation of what is being viewed accurately. `31:T568,# Development Process Overall the project took me 10 days to complete. The major obstacle was figuring out what the project use case would be from the dataset gotten. I spent 1-2 days researching what to do with attributes scores, that was when I choose z-score computation. I always had in mind to plot the graph by itself one after the other after a well-prepared data organization. The biggest hiccup for me was instead of using mark circles to represent the attributes, I was thinking of layered line charts that compare the selected player -the drop-down- with the interactive bar chart select point. This design was too complicated I got stuck on it for 4 days. Until I was able to come up with a metric that would encompass the average of all attributes to a single attribute. This made a smooth connection for the final important chart. Finally, the chart arrangement into columns was a new discovery for me. After playing with a lot of hconcat and vconcat, I finally discovered it could be very easy to line all charts using ```concate()``` function and specify just 2 columns this will automatically arrange the chart in a tidy fashion. All I had to do was just adjust the heights of each chart. ``` return vl.concat(teamAnalysisbarchart,zscore,teamAnalysisAge,ageDistribution, zscoreTop50players,lineChartTurnedPoint).spacing(8).columns(2).render(); ```32:[] 2d:{"id":"f3ddf789249502a3","slug":"project-report-cs-725-825-spring-2022","title":"Project Report - CS 725/825, Spring 2022","thumbnail":"7e0e3c60aad4788f6f00e2046a4c0cc70d989c9a320a56a3193b335298da909d","access_level":"public","create_time":"$D2022-04-14T01:25:25.911Z","update_time":"$D2022-04-15T23:40:23.922Z","view_time":null,"first_public_time":"$D2022-05-31T22:10:53.718Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9c5cd9cf6b78af1c","login":"aaden001","name":"Adeniyi ","avatar_url":"https://avatars-next.observableusercontent.com/912b43f093c0aa354f0975eec9937fcfc34be3b20b6e10453c04605142abe64e","tier":"starter_2024"},"version":154,"publish_version":154,"role":null,"authored":false,"authors":[{"type":"individual","id":"94d2e0b182ec1917","login":"aaden001","name":"Adeniyi ","avatar_url":"https://avatars-next.observableusercontent.com/912b43f093c0aa354f0975eec9937fcfc34be3b20b6e10453c04605142abe64e","tier":null}],"members":[{"type":"individual","id":"94d2e0b182ec1917","login":"aaden001","name":"Adeniyi ","avatar_url":"https://avatars-next.observableusercontent.com/912b43f093c0aa354f0975eec9937fcfc34be3b20b6e10453c04605142abe64e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Project Report - CS 725/825, Spring 2022","cells":[{"id":0,"value":"# [Project Report](https://observablehq.com/d/e8beb7504f6a9215) - CS 725/825, Spring 2022\nName: Adeniran Adeniyi
\nTitle: English Premier League Recruiting/Scouting Dashboard
\nDue: April 19th, 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"# Introduction \n\n As a fan of football and as the love of watching my favorite English football club, Manchester United, this Project definitely gives a deep dive analysis to visualize patterns that help managers or football enthusiasts to scout or possibly recruit better players to improve the Team.\n\n This project also helps people who virtually play FIFA build a strong team in career mode on FIFA. Apart from the career mode, it strongly helps improve gameplay because strategically understanding player positions with their characteristic gives the player a better chance to win than just randomly selecting any player.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"# Data\n\nIn this project, there were two data sources used in the development of the project.\n\nThe first data source was from a [Kaggle dataset](https://www.kaggle.com/datasets/karangadiya/fifa19?datasetId=73041&searchQuery=dashboard&select=data.csv) that was scrapped data from [Sofifa.com](https://sofifa.com/), you can also find the data on [github](https://github.com/4m4n5/fifa18-all-player-statistics/blob/master/2019/data.csv). The name of the attached file name was called data.csv\n\nThe second data source was from [FootyStats](https://footystats.org/download-stats-csv). This data was just used primarily to get all the names of English Premier League Clubs. The name of the attached file name for this data was called england-premier-league-players-2018-to-2019-stats.csv","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"# References\n\n\n1.https://www.includehelp.com/code-snippets/how-to-access-an-object-having-spaces-in-the-objects-key-using-javascript.aspx
\n2.https://uwdata.github.io/arquero/api/#loadArrow
\n3.https://observablehq.com/@mahog/vega-tutorial-1-lets-make-a-bar-chart
\n4.https://stackoverflow.com/questions/68805413/how-do-i-highlight-specific-bar-s-using-vega-lite
\n5.https://www.youtube.com/watch?v=WTB6peagZR8
\n6.https://observablehq.com/@uwdata/interaction
\n7.https://vega.github.io/vega-lite/docs/selection.html
\n8.https://observablehq.com/@weiglemc/virginia-covid-status-pcr-pos-cases
\n9.https://observablehq.com/@weiglemc/cs725-s22-interaction-in-vega-lite
\n10.https://observablehq.com/d/7f389cfac50b5726","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"