5.1.
2 Comparison of Metrics makes sure these colors are more on the background than the brighter
In the Comparison of Metrics screen, shown in figure 3, users can orange and blue. This differentiation is crucial for clarity and ease
explore four grouped bar charts comparing average age, possession, of interpretation, as it allows users to quickly identify and compare
goals, and assists between the Netherlands and the selected opponent. the performance of the selected opponent and the Netherlands. The
Additionally, a stacked bar chart compares the percentage of passes selected team and the Netherlands’s markers are also bigger than the
completed of all passes given for both teams. other teams. The size and color of the markers are used to represent
The use of orange for the Netherlands and blue for the selected different teams, following Munzner’s channel rankings that prioritize
opponent ensures high contrast and aligns with the national color of position and size for quantitative data
the Netherlands, making it easy to differentiate between the teams. Scatter plots are particularly suitable for displaying relationships
For the passes chart, green is used to indicate passes completed, and between two continuous variables, and the trendline provides a quick
red for passes failed, which are universally understood as indicators visual reference for correlation. This choice aligns with Tufte’s prin-
of success and failure. ciples of data presentation, focusing on clarity, precision, and effi-
Grouped bar charts are effective for straightforward comparison ciency [7]. Dropdown menus enhance interactivity by allowing users
across categories, following best practices in comparative visual- to select different variables for analysis, making the visualization
ization as discussed by [4]. The stacked bar chart, on the other highly customizable.
hand, efficiently represents part-to-whole relationships, supporting Design Choices:
the analysis of team performance on passing accuracy.
Hover functionality is incorporated to provide detailed informa- • Scatter Plot: Chosen for its ability to show relationships
tion on demand, enhancing interactivity and user engagement while between two quantitative variables. Scatter plots are effective
maintaining a clean and uncluttered visualization. This design choice for revealing correlations and patterns, as noted by Munzner
adheres to the principle of maximizing the data-ink ratio by revealing [4].
detailed data only when needed [7].
Design Choices: • Color and Shape Encoding: Different teams are represented
by distinct colors and shapes, enhancing the visual separation
• Side-by-Side Bar Charts: This layout facilitates direct com- and making it easier to identify trends and outliers based on
parison between two teams across various metrics. Bar charts Munzner’s channel rankings [4].
are utilized because they encapsulate two attributes: the hor-
izontal spatial position channel represents the categorical at- • Trend Line: Adding a trend line helps users quickly grasp
tribute, and the vertical spatial position channel with line marks the general direction of the data, aiding in the interpretation of
represents the quantitative attribute [4]. complex multivariate relationships.
• Color Differentiation: Orange is used for the Netherlands and • Gestalt Principles: The principle of connection is used here,
blue for different opponents, which not only aligns with the where the trend line visually connects the data points to show
national color of the Netherlands but also ensures a clear con- the overall pattern [2].
trast. This choice follows the principles of color differentiation
to enhance discriminability [4].
• Stacked bar chart We follow the Gestalt principle of simplic-
ity by employing a single bar chart with stacked parts, which
helps viewers perceive patterns without the complication of
dual encodings.
Figure 5: Player performance metrics
Figure 4: Multivariate analysis
5.2.1 Performance Metrics
On the Performance Metrics screen, a radar chart compares per-
5.2 Multivariate Analysis formance metrics such as goals, assists, expected goals (xG), and
The Multivariate Analysis screen presents a scatter plot comparing expected assists (xA) for the top five players of the selected oppo-
an x-feature and y-feature, which can be chosen in the drop-down nent, see figure 5. The top 5 players are based on the most amount of
menu, complemented by a trendline to illustrate the relationship goals. Besides that, a dropdown is used where the user can choose a
between the two variables. This visualisation is shown in figure 4. metric and it shows a sorted bar chart for all players on the selected
Different colors and shapes are used for team markers: orange opponent’s team and it will highlight the chosen player, as can be
circles for the Netherlands, blue circles for the selected opponent, seen in figure 6.
and gray circles for other teams. The colors for the Netherlands Different colors are assigned to each player in the radar chart to fa-
and the opponent are consistent across all visualizations and grey cilitate easy differentiation. Radar charts are effective for displaying
[3] S. R. Midway. Principles of effective data visualization. Patterns,
1(9):100141, 2020. doi: 10.1016/[Link].2020.100141
[4] T. Munzner. Visualization Analysis and Design. AK Peters Visualization
Series. CRC Press, 2015.
[5] C. Perin, R. Vuillemot, and J.-D. Fekete. Soccerstories: A kick-off
for visual soccer analysis. IEEE Transactions on Visualization and
Computer Graphics, 19:2506–2515, 2013. doi: 10.1109/TVCG.2013.
192
[6] A. Rusu, D. Stoica, E. Burns, B. Hample, K. McGarry, and R. Russell.
Dynamic visualizations for soccer statistical analysis. In 2010 14th
International Conference Information Visualisation, pp. 207–212, 2010.
doi: 10.1109/IV.2010.39
[7] E. R. Tufte. The visual display of quantitative information. Graphics
press, 1983.