Created during February 2020

FIFA 19 Visualization

CLIENT

Work Assignment

TOOLS

d3.js

React

Data

Kaggle

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. 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.

This was originally a mockup of a data dashboard done as a Data Visualization Specialist at ST Electronics (Info-Software Systems). However, for data privacy reason, I have repurposed the dashboard with FIFA 19 dataset.

The Radar Scatter Plot

Features

As there are many individual graphic elements on the chart, I have chosen to provide another view with scores binned. 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.