Depicting La Liga race with an animated line chart and statistics with a Plotly dashboard
"Attack wins you games, defence wins you titles."
As an avid FC Barcelona fan, I can’t help but agree with the above statement by Sir Alex Ferguson (former Manchester United manager), especially in the context of current club football. FC Barcelona once completely dominated the domestic league and European football in their golden era. However, the club has not reached the UEFA Champions League final since the 2015/16 season. After losing the La Liga title to their arch-rival, Real Madrid last season, Barcelona also got kicked out of the title race on the penultimate matchday of this season after losing to Celta Vigo. Atletico Madrid, on the other hand, clinched their 11th La Liga title inspired by their lead scorer, Luis Suarez, who moved from Barcelona to Atletico last summer.
La Liga has largely been considered as a three-horse race especially in recent years since only Barcelona, Real Madrid, and Atletico Madrid have won the league in the past decade or have been the top contenders for the same. In this post, I am going to discuss the competition and basic statistics of these three clubs in La Liga this season using an animated Plotly line chart race and a very basic dashboard. The code and data is available in this GitHub __ repository. Let’s get started.
La Liga 2020/21 race in an animated Plotly line chart
First, I aim to visualize how the La Liga race looked like for the top three teams throughout the season. I start by importing the three required packages, which are pandas, numpy, and plotly.graph_objects in this case. The data for this purpose is available in this repository, which I created by tracking the win, loss and draw in each match day for each club based on FcTables.com. The dataframe consists of cumulative points of the three top teams in La Liga after each match day, which looks like the image shown below.
The plotly.graphobjects comprises data and layout elements to display the figure. I start by defining numOfFrames,_ which is equivalent to the number of rows in dataframe. I create a trace of scatter type called initial_data, which represents the data in the first row of the dataframe.
In order to get an animated line chart race, it’s a prerequisite to capture the frame at each instantaneous point of time such that the first frame captures the data in the first row, the second frame captures the data in the first and second row, and so on. A nested for-loop is created for this purpose such that frames __ appends the instances of each current_frame__ towards the end.
By passing the initial_data for data and frames for layout, I get an animated line chart depicting the total points after each match day for the top three clubs in the league as follows:
Analysis
As shown in the gif image above, Barcelona had a very shaky start to the season until the first ten games. This was one of their worst starts in so many seasons that the club reached as low as 13th position in the league table after accumulating only 11 points in the first eight matches. In contrast, Atletico Madrid had a much better start. Atletico made a steady rise in the league creating a gap of 10 and 13 points against Real Madrid and Barcelona respectively by the mid of the season in January 2021.
After the first ten games, Barcelona moved up a gear and went on in a continuous winning streak for several games even overtaking Real Madrid at some points and closing the gap with the league leader. Atletico Madrid, on the other hand, dropped several points after the mid-season and reduced their lead from more than 11 points to a few points only. Towards the last quarter of the season, both Barcelona and Real Madrid dropped several crucial points and even missed the chance of going to the top of the table. On the final matchday of the season, all three clubs won their games, however, it was Atletico Madrid, which emerged as the ultimate winner of the La Liga 2020/21 season.
Plotly Dashboard
In this section, I intend to create a very basic interactive dashboard to visualize the La Liga 2020/21 statistics and discuss them. The packages I use for this purpose are the same as the ones used for the line chart race above. The data used for this purpose is available here, which is openly available from fbref.com. The dataframe looks as follows:
Next, I initialize the figure and create a dictionary of the indicators I want to present in the dashboard. The keys in my dictionary represent points, goals scored, goals conceded, goal difference, matches won, matches drawn and matches lost. Each key of this dictionary is linked to the corresponding subset of original dataset.
#create a figure from the graph objects (not plotly express) library
fig=go.Figure()#Create dictionary for ease of access
df_dict={"points":df[["Squad","Pts"]],
"goal_difference":df[["Squad","GD"]],
"goals_scored":df[["Squad","GF"]],
"goals_conceded":df[["Squad","GA"]],
"matches_won":df[["Squad","W"]],
"matches_drawn":df[["Squad","D"]],
"matches_lost":df[["Squad","L"]]}Dropdowns list
In this step, I need to create a list of buttons for the dropdown menu. For this purpose, I initialize an empty list called dropdowns _ and a counter i. Using a for-loop, I create a button object called `dropdown_ for each indicator. The button also comprises a list of booleans (True/False) calledargs`, which tells which trace to show based on True value.
All the button objects are appended into the dropdowns list. As shown in the image below, for the first dictionary, only the first item in the list is visible when updated. For the second dictionary, it is the second item in the list that is visible and so on.
Finally, to update the layout of the plot, I specify the (x,y) coordinates, where I want the dropdowns buttons, and the direction in which I want the menu to pop up.
I get a basic interactive dashboard, which looks as follows.
Analysis
After a total of 38 matches in La Liga 2020/21, Atletico Madrid emerged as the winner with 86 points. Real Madrid came close second with 84 points, and Barcelona was third with 79 points. The top three clubs won 26, 25, and 24 matches respectively. With 85 goals, Barcelona scored the most goals in the league while both the winner and runner-up scored 67 goals each. However, Barcelona was also the worst among the three in terms of defence conceding 38 goals in as many games. While Barcelona had the best goal difference among the three clubs, losing seven matches and drawing seven matches proved very expensive for the club.
Conclusion
In this post, a simple analysis of the La Liga competition and basic statistics was performed with the help of an animated line chart race and dashboard using Plotly. The interactive features of Plotly are very useful to get the exact information from the plot besides having a holistic picture of the data. The interactive features, maps, animations, etc. that are possible to integrate with Plotly in Python could be accessed via its open source graphing library.
