An Interactive Dashboard for Searching and Comparing Soccer Performance Scores

An interactive dashboard for searching and comparing soccer performance scores

Paolo Cintia∗ Giovanni Mauro [email protected] [email protected] University of Pisa, Italy University of Pisa, Italy

Luca Pappalardo∗ Paolo Ferragina [email protected] [email protected] ISTI-CNR, Italy University of Pisa, Italy

ABSTRACT 2019). ACM, New York, NY, USA, 4 pages. https://doi.org/10.1145/ The performance of soccer players is one of most discussed 1122445.1122456 aspects by many actors in the soccer industry: from support- ers to journalists, from coaches to talent scouts. Unfortu- 1 INTRODUCTION nately, the dashboards available online provide no effective Nowadays many actors in the soccer industry, from televi- way to compare the evolution of the performance of players sion broadcasters to scouts and professionals in soccer clubs, or to find players behaving similarly on the field. Thispa- are increasingly relying on data-driven scores to rank play- per describes the design of a web dashboard that interacts ers, find promising talents, and increase fan engagement via APIs with a performance evaluation algorithm and pro- [2, 4, 5]. Several online platforms, such as wyscout.com or vides graphical tools that allow the user to perform many whoscored.com, allow for searching players in a database tasks, such as to search or compare players by age, role or and show aggregated statistics of their performance. Unfor- trend of growth in their performance, find similar players tunately, these tools provide no intuitive way to compare based on their pitching behavior, change the algorithm’s the evolution of performance of players or suggest players parameters to obtain customized performance scores. We behaving in a similar manner. also describe an example of how a talent scout can interact In this paper we describe a web dashboard for searching with the dashboard to find young, promising talents. and comparing data-driven performance scores of soccer CCS CONCEPTS players. The dashboard provides the user with a graphical interface to interact with the PlayeRank algorithm [6] that • Human-centered computing → Information visual- offers a principled evaluation of the performance of players ization. based on data describing all the spatio-temporal events (e.g., passes, shots, etc.) that occur during a match. Several actors KEYWORDS in the sports industry may benefit from our dashboard: sports analytics, data visualization • a talent scout, who searches for promising talents that ACM Reference Format: meet specific constraints (e.g., age or role); Paolo Cintia, Giovanni Mauro, Luca Pappalardo, and Paolo Ferrag- • a coach, who needs to visualize the evolution of the arXiv:2105.04293v2 [cs.HC] 11 May 2021 ina. 2018. An interactive dashboard for searching and comparing performance of their players to select the team’s lineup soccer performance scores. In Proceedings of CIKM 2019 (CIKM in the next match; • a sports journalist, who wants to comment in an article Permission to make digital or hard copies of all or part of this work for about the performances in a recent match; personal or classroom use is granted without fee provided that copies are not • a soccer enthusiast, who wants a support to set up the made or distributed for profit or commercial advantage and that copies bear lineup of their fantasy football team. this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with The design of the dashboard is hence motivated by the credit is permitted. To copy otherwise, or republish, to post on servers or to need of providing these actors with: (i) a way to visualize redistribute to lists, requires prior specific permission and/or a fee. Request the evolution of the performance of a player in time; (ii) a permissions from [email protected]. compact way to compare the performance of two or more CIKM 2019, Novembre 03–07, 2018, Beijing, CN © 2018 Association for Computing Machinery. players; (iii) the possibility to search players by role and to ACM ISBN 978-x-xxxx-xxxx-x/YY/MM...$15.00 filter them according to specific constraints (e.g., age, trend https://doi.org/10.1145/1122445.1122456 of growth of their performance, matches played); (iv) the CIKM 2019, Novembre 03–07, 2018, Beijing, CN Cintia et al. possibility to change the parameters of the PlayeRank al- The upper part of the layout (Navbar) is a navigation bar gorithm to obtain tailored evaluations of performance. A containing two search dropdowns (Figure 2a, c) with their demo-video of the web dashboard is available at the follow- corresponding buttons (Figure 2b, d). The dropdowns are ing link: youtu.be/SzrDRKucRjE, while an online version will associated with callbacks that: (i) call the API to retrieve all be available soon at playerank.d4science.org. players having the name or role typed by the user (Figure 2); (ii) highlight on the pitch part the selected role; (iii) add the 2 DASHBOARD ARCHITECTURE selected players in the players table. The second part of the layout (Pitch & Settings) contains web dashboard two elements: the visualization of a soccer pitch that high- lights the roles selected in the navigation bar; and the settings URL callbacks API panel (Figure 2g) that, when its filters are modified, updates JSON the boxplot visualizing the distribution of the players’ per-

formance score per role (Figure 2f). output triggering PlayeRank The third part (Table & Settings) contains a set of sliders layout (Figure 2h, i, l) that allow the user to filter the players by age, trend of performance growth and number of matches

Dash app played. Sliders are associated with a callback that updates soccer-logs the players table, a component that visualizes the names of the selected players, as well as other information like age and role, average performance score and trend of performance user growth (Figure 2m). The fourth part (Trend) contains a line chart (Figure 2n) Figure 1: Schema of the communication between the web visualizing the evolution of the performance scores of the dashboard and the API. players that have been selected in the players table. Finally, the last part (Cards) contains some cards that show The web dashboard is designed in Python as a Dash [1] further information about the selected players and, in addi- app that communicates with the PlayeRank algorithm [6] tion, it shows other players that are similar according to the (Figure 1). The communication channel is realized through an way they have pitched on the soccer field (Figure 2p). API that implements the exchange of data in two directions: In the next sections we describe in detail some of the layout (i) the web dashboard sends a request for aggregated data components of the web dashboard, in order to explore its through the HTTP protocol, using an URL containing the functionalities, and refer the interested reader to the demo- parameters of the request; (ii) the API returns the desired video available at the following link: youtu.be/SzrDRKucRjE. aggregated data using JSON format. A Dash app consists of two parts: the layout and the set Pitch Plot of callbacks (Figure 1). In the layout, all the components of The soccer pitch component (Figure 3) is linked to the “Search the graphical interface are specified, each having a unique by role” dropdown in the navigation bar. When the value and unambiguous identifier. This identifier is the connection of the dropdown changes, a callback is triggered, drawing point to the callbacks part, a dynamic section that specifies the corresponding role data on the soccer pitch component. the actions to be executed when an event occurs on a layout The role is drawn by highlighting the positions of the pitch component (e.g., the user clicks on a button or changes the associated with that role. Figure 3 shows how the soccer pitch value in a dropdown). The callbacks are the part that actually components looks like when three roles (left CB, right CB and communicates with the API functions. This communication central FW) are selected in the “Search by role” dropdown. is transparent to the user, who can only interact with the layout part of the dashboard. Settings panel In general, PlayeRank [6] computes a player’s performance 3 DASHBOARD LAYOUT score in a match as a scalar product between a vector of Figure 2 shows the components in the layout of the web features describing their performance (e.g., number of shots, dashboard and the callbacks associated with each graphical number of cards, expected goals, etc.) and a vector of weights component. The design of the layout has been guided by the specifying the important of each feature. The web dashboard Visual Exploration Paradigm [3], consisting in a three-step allows the user to recalibrate the feature weights of the Play- process, called the Information Seeking Mantra: overview, eRank algorithm so as to obtain tailored evaluations of per- zoom and filter, and details-on-demand. formance. An interactive dashboard for searching and comparing soccer performance scores CIKM 2019, Novembre 03–07, 2018, Beijing, CN

callbacks add_selected_player: add the player to the trend plot and create a card (a) NAVBAR (a) (b) (c) (d) callbacks Search by name Go! Search by role Go! (1) select_data: populate the players table (e) PITCH & SETTINGS (f) (2) update_columns: update the players table

callbacks draw_role: draw the selected role on the pitch (g) callbacks Weights The yellow button updates the update_weights: weight of the goal, while the set the feature weights and update the upper boxplot green one updates all the other (b) weights. TABLE & FILTERS (h) Matches (i) Age (l) Trend (c)

Name Playerank Trend (m) C.Ronaldo 0.7 +6.7 (d) M.Icardi 0.7 -5.4

P.Cutrone 0.5 +0.5

F.Totti 0.65 -5.0 (e) callbacks TREND (o) trend_plot: (n) trend short select the type of trend trend long to be displayed

CARDS (p)

Figure 4: Illustration of the Settings panel Figure 2: Graphical components in the dashboard’s layout. The boxes list the callbacks that are triggered when the user panel implies changing the visualization of the performance interacts with a layout component. scores in the trend plot (Figure 5) as well.

Trend plot The trend plot (Figure 5) allows the user to compare the evolution in time of the performance scores of soccer players based on PlayeRank. For instance, Figure 5 compares three top players in the Italian first division season 2018/2019: Mauro Icardi (FC Internazionale), Cristiano Ronaldo (Juven- tus FC) and Lorenzo Insigne (SSC Napoli). The striking im- Figure 3: Drawing of three roles on the soccer pitch plot: left pact of Cristiano Ronaldo (the orange curve) on the Italian central back (left CB), right central back (right CB) and cen- league is immediately recognizable from the plot: after a tral forward (central FW). shaky start, probably due to adaptation to a new league, the performance scores of C. Ronaldo shortly overtake the ones of renowned strikers in the league, like Icardi and Insigne. As an instance, the user can change the importance of By using a proper dropdown (Figure 5b) the user can scoring a goal into the player evaluation (using the slider in choose among two types of trends: (i) trend_long, calcu- Figure 4c), so to reward more the players who score goals. lated taking equally into account all matches’ scores; (ii) Similarly, the weight associated with each performance fea- trend_short which weights more the player’s score in the ture can be changed by the corresponding slider (Figure most recent matches. The trends specified by the user in the 4e), which triggers a callback that in turn asks the API to dropdown are drawn, via a dedicated callback and for each recompute the performance scores with the new weights. player, in the trend plot. The boxplot in Figure 4a provides a visual summary of the distribution of performance scores per role. It is updated 4 THE TALENT SCOUT USE SCENARIO every time a feature weight is changed by the corresponding To demonstrate the usefulness of our web dashboard, we slider, i.e., the two buttons in Figure 4b-d activate a callback consider a crucial task in the soccer industry such as talent that re-draw the boxplot with the new performance scores. scouting. The main purpose of a talent scout is searching for Note that changing the feature weights from the Settings promising talents, i.e., young and unknown players who show CIKM 2019, Novembre 03–07, 2018, Beijing, CN Cintia et al.

(a) (b)

selectedPlayers trendSelect (d) dropdown dropdown (c)

Figure 5: Comparing the performance scores of Icardi, Ronaldo and Insigne (blue, orange and green curves, respectively). a good and a positive trend in their performance. A scout (a) (b) can achieve this goal using the web dashboard as follows. The scout first searches for players of specific roles (e.g., (c) central forward or central midfielder) using the “Search by role” dropdown. Then, s/he uses the age slider (Figure 6a) to select young players (< 22 yo). To focus on players who promise a bright future, the scout selects a positive trend of growth using the trend slider (Figure 6c). The scout sorts the resulting players by trend of growth (column TrendPercentage in Figure 6), by age and finally by average performance score (column PlayeRankMean). Figure 6 shows the players table resulting from the above described operations. Note that a player can appear in several rows because he can play different roles in different matches. Figure 6: Players table resulting from the interaction of the For example Kean occurs twice in the ordered list, once as talent scout with the web dashboard. central MF and once as central FW. The scout can eventually select some players in the table by using the appropriate check boxes, hence visualizing the ACKNOWLEDGMENTS evolution of their performance in a specific trend plot. Refer- This work has been partially funded by EU project SoBigData ring to the example shown in Figure 6, the talent scout selects RI, grant #654024. Kean, Mancini and Cassata as the most promising young talents in the Italian first division and asks the interface toshow REFERENCES their performance plot. [1] [n.d.]. Introduction to Dash. https://dash.plot.ly/introduction. [2] L. Bornn, D. Cervone, and J. Fernandez. 2018. Soccer analytics: Unrav- elling the complexity of the beautiful game. Significance 15, 3 (2018), 5 CONCLUSIONS 26–29. [3] J. Du, I. Spence, and M.J. McGuffin. 2010. Visual guidance in the ex- In this paper we presented a web dashboard for searching ploration of large databases. In Procs of the 2010 Conf of the Center for and comparing soccer performance scores. Through a set of Advanced Studies on Collaborative Research. IBM Corp., 128–138. API endpoints, the web dashboard can retrieve data about [4] J. Gudmundsson and M. Horton. 2017. Spatio-Temporal Analysis of Team Sports. Comput. Surveys 50, 2 (2017). performances and players. Users can search for players by [5] L. Pappalardo and P. Cintia. 2017. Quantifying the relation between name or roles, getting an immediate comparison of selected performance and success in soccer. Advances in Complex Systems 20, 4 players and their performance evolution. Users can also (2017). https://doi.org/10.1142/S021952591750014X search for players behaving similarly in the previous played [6] L. Pappalardo, P. Cintia, P. Ferragina, E. Massucco, D. Pedreschi, and games. If we consider that player scouting in soccer is a high- F. Giannotti. 2018. PlayeRank: data-driven performance evaluation and player ranking in soccer via a machine learning approach. arXiv consuming task, our dashboard can help scouts in saving a preprint arXiv:1802.04987 (2018). considerable amount of time, hence partially automating the complex process of finding promising talents.