FIFA 20 Player Statistics Analysis and Visualization
By: Nikhil Doifode
Tags: FIFA, Soccer, Football, Visualization, D3js

Introduction:

We aim to create a dashboard that will help visualize the data from FIFA 20 and help FIFA players make better decision about which players to purchase with the help of statistics. FIFA 20 is a simulation football (soccer) game where real-life players and teams are simulated. The game is known for its realistic design and usually considered a good parallel to the actual football world.

Football is the world’s biggest sport. More than half the world follows football very closely. Statistics are a big part of football and a driving force for this multi-billion dollar industry. The football statistics collection has been continuously improving thanks to companies like Opta and Squawka. Games like FIFA and PES do a great job of mapping these stats to their in-game player personas. eSports is gaining popularity especially at times like the COVID19 (link) crisis when the physical sports are at a complete standstill. A way to compare these in-game stats will be useful for the many thousands of fans around the world. Also in today’s football, transfer market has grown increasingly extreme. The fees paid for players often seem exaggerated, especially in recent years. The transfer fee for Neymar exceeded 222 million euros, which was the highest amount ever spent for a football player. Most of the club owners can’t pay such an outrageous price for a player. So we come up with a way that can help Club owners to make better decisions.

Approach:

The dataset has more than 60 attributes, like Player Name, Age, Nationality, Club, League, Wage, Value, etc., and also contains all player statistics for Attacking, Defending, Dribbling, Aggression, GK Skills, etc. We have selected all players from Top 5 football leagues i.e Premiere League, La Liga, Bundesliga, Serie A and Ligue 1. We will try to do visualizations as an exploration for the user of the FIFA 20 player statistics. We will have two views for the dashboard:

1. Set of players’ aggregate statistics by brushing over PCA plot

2. Individual player statistics by selection

On the first view of the dashboard as shown in Fig. 1 we will put up a 2D scree plot of all players using PCA. We will also add Parallel Coordinates for player comparison based on League, Player Type, Age, Overall Rating, Potential Rating, Wages, Transfer Value, Height and Weight. Users will also be able to select a part of the PCA scree plot and the selected players will be shown as a list. After selecting part of the PCA plot user will also be able to filter the selected players based range of values for all the attributes mentioned in the Parallel Co-ordinates.

Figure 1

Users can also view individual player statistics by clicking the player from the list shown in Figure 1. This is when we will load the second view of the dashboard as shown in Fig. 2.

Figure 2

On the second view of the dashboard, we will have the PCA plot at the same place as before to preserve continuity and smooth navigation. We will also show individual player statistics like age, height, weight, overall rating, wages, etc.

For this same player, we will also visualize his attacking strength, defensive strength, Goalkeeping strengths and other misc strengths in radar charts. Plot 3 as shown in Figure 2 will show Attacking/Goalkeeping stats depending on player selected. Plot 4 and 5 will show Defensive stats and Plysicality stats respectectivly. We will also add line graphs for Transfer Value and Player wages with percentile to compare him with all other players.

Implementation:

The project was implemented using a frontend of HTML, CSS and Javascript. The backend was deployed using Flask. The graphs were made using D3.js. We also used Bootstrap to simplify CSS elements and jQuery for additional requirements.

Design process:

1) The main graph when you land on the page is the scatterplot. The scatterplot contains all players from the top 5 leagues in Europe. The colors in the scatterplot represent the leagues.

2) When a user brushes over the scatterplot, he can see the list of the players in the brushed area in the table besides the scatterplot.

3) Below this is the Parallel coordinates chart of the same players listed in the table that have been brushed over. This completes the homogenous main page display where you can filter, compare and discover players.

4) Upon selection of a player in the table using a mouse click, a detailed view of the player opens up. The detailed view will give an in-depth view of the player stats and his financial records.

PCA Scatterplot:

The scatterplot is made by using PCA over certain curated attributes of the players from the dataset. The scatterplot gives a visual representation of what we can call a player space. In the player space, players with similar attributes can be found nearby. The best players are far and sparse on the right. The taller players which happen to be keepers and defenders are also clustered together. This view gives a very easy way of selecting a type of players using the brushing.

The scatterplot is implemented in D3.js and uses the brush feature in D3.js as shown in Figure 3. The brushing is linked with the table and the Parallel co-ordinates.

Figure 3

Player List Table:

The table gives a dynamic list of players that have been brushed. The list is updated by using both the brushes on the PCA scatterplot as well as the brushable axes of parallel co-ordinates chart. The table is the central visualization that binds everything together.

The table also provides a click feature where if you click on any row then the information of that player pops up. This is what we refer to as the Player Details view. As we can see in the Figure 4 below the selected players are displayed in the table beside it.

Figure 4

Parallel Coordinates for comparison:

Parallel Coordinates provide a way to compare the selected players for different attributes. We selected few attributes to compare like League, Player Type (Forward, Midfielder, Defender or Goalkeeper), Age, Overall Rating, Potential Rating, Wages in Euros, Transfer Value in Euros, Height (cm) and Weight (kg) as shown in Figure 5.

Figure 5

We can also the filter the players shown in the parallel coordinates for specific range in different attributes. You can have filtering in all attributes in all at once to have higher degree in comparison.

We have added two way binding between the player list table displayed above and the parallel coordinates meaning if you hover over the table, the current player is highlighted in the parallel coordinates and if you filter the parallel coordinates based on certain range for different attributes the table gets update with those selected player. As you can see Figure 6 we have filtered players based on Player Type (Goalkeeper) and Potential rating (85+) and the table is also updated. You can also see each player in Parallel Coordinates by hovering over the table and the selected line get highlighted. We have shown that in practice in the demo video linked in the demo section.

Figure 6

Individual Player View:

After clicking on the Player from the table we load our 2nd view to show individual player statistics as shown in Figure 7.

· Player card: The player view is summarized by the player card that replaces the table from the main view. This player card gives us the details about a player such as his nationality, age and the club for which he plays. Also, the point that represents the player is highlighted in the scatterplot so we can locate him easily.

· Radar charts: Radar charts in the player view tell us the detailed characteristics of a player and are grouped together using our football knowledge of which attributes are the most likely to go together.

The Radar charts are implemented in D3 and have hover functions enabled to make it look good and provided detail on demand. The radar charts give a pictorial representation of a player’s attributes and it is much easier to remember the shapes of a radar chart than remembering the number for a user using the webpage.

· Area charts: The area charts give us an idea where the player ranks with respect to all the other players in terms of the Transfer value and Weekly wages that he earns. This data is served by the Flask backend as it can reduce the loading time of the page. The area charts are dynamically refreshed for each player depending on his ranking in the charts.

Figure 7

Demo and Code:

https://github.com/nikhildoifode/fifa_20_players_visualization

Future Scope:

As a future implementation, we want to add a search field where user can search for particular player or a team instead of looking for him in the PCA plot.

We want to add feature for comparison of two players either from selection from PCA plot or list of players in table or search field.

In addition, we also want to put up a third view in the dashboard where we will have the PCA plot at the same place as before for the entire team selected. We will also show Parallel coordinates to show the comparison between different team statistics like average age, average height, average weight, average rating, overall wages, etc. against teams from the same league or against all other teams. For the current team, we will also visualize teams strengths in build-up play, chance creation, and defense using spider charts as shown in Fig. 8.

Figure 8

Conclusion:

The dashboard being created visualized the statistics collected by FIFA for their latest release of the game. It has also presented a way to analyze players individually and visually compare how they stack up against one another. This will help eSports players choose the players they want using Visual Analytics.

The dashboard also gives comparison for fans of the game to see how their favorite players are represented and can become a good metric when players are being compared.

References:

https://sofifa.com/

Authors:

Nikhil Doifode

Neeraj Ganu