FIFA 19 Visualization

Visualizing data from the football simulation video game 'FIFA 19'

Tools: React, D3.js

Detailed attributes for all 18,207 player registered in football simulation video game 'FIFA 19' is made available on the website sofifa.com. Players are scored according to 6 categories representing their abilities. An overall score is formulated for each player based on these category scores (ie. sub-score) amongst other parameters.

Click here to go directly to the interactive visualization.

The layout choice

Initially, I wanted to visualize each sub-score per player in a radar chart. This caused clutter as each player has 6 times the number of elements to render. Hence, I decided that it would more useful to only show one node per player and place that node in the category which he has the highest score in. Hence, the 'radar scatter' chart was conceptualized to visualize a player's highest sub-score alongside his overall score.

Features

As there are many individual graphic elements on the chart, I have chosen to provide another view with scores binned. It is also possible to see broader patterns in the data through binning, such as which sub-category had the most number of high overall scoring players.

However, I still wanted to keep the individual elements to enable the user to locate a player on the chart and easily see his statistics. Hence, the toggle buttons enable the user to switch between the two views, with a transition effect created to make 'individual' nodes appear to coalesce into 'binned' nodes.

The players visualized on the plot can be narrowed down using a slider which filters the players by their overall score. The toggle buttons are 'aware' of the updated state and when clicked, the filtered range of nodes transition accordingly. I have decided to pre-set a filter of players with overall scores above 0.7.

To see a detailed view of a player's statistics and connections (other players on the same team), hover over his node. A player can also be searched for using the search bar.