Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

ray_ux

Advanced Sport Visualisations in Power BI

  • Animation based on time sequence
  • Visualising over 1000 metrics e.g., xG, shot direction, pass, goal,etc
  • Potential machine learning e.g., predict the next 10/20 second.

In this blog, we will cover how to build interactive graphs for sports analytics in Power BI, and I believe every sports data analyst should use BI tool over custom software as it's a lot better.

Why Power BI?
- Easy to maintain, modify and understand.
- No coding require (python, matplotlib, D3, etc)

- Use multiple data sources e.g., video, football data providers (statsbomb,opta,etc)

- AutoML

- User-friendly platform: Mobile, iPad (Power App), dashboard/report (Power BI)

Here is my basic football visualisation demonstrating the potential it has within Power BI.  Always start with the basic charts and understand how the SQL queries make up the visualisation as things can get tricky, once we start looking at the neural networks. 

https://community.powerbi.com/t5/Data-Stories-Gallery/Basic-Shot-Pass-Convex-Hull/td-p/2657544

 

T_interaction.gif


In any BI tools, we cannot simply drag and drop x1, x2, y1, and y2 values into a chart to visualise a line between two scatter points. This is because a line chart requires chronicle values such as distance or time, and a scatter chart can only take two variables.

ray_wu_0-1658929257208.png

 

As you can see, this data above is simply taking X and Y locations, which we can plot onto a graph. Each row represents the location of the data.

ray_wu_1-1658929269117.png


Green represents the start location and the orange end location. We can plot these data using a scatter plot but cannot connect them in a line chart.

Solution


A workaround is to append x1, x2, y1, and y2 and assign a unique ID column with value “S,E” (start, end point). In the Power Query editor, we can duplicate the data table twice, and then remove 2 columns from each copy(x1,y1 on one ; x2,y2 on the other). Make sure to rename the columns to be x and y and then append them together. Otherwise, the data won’t join together and need to reverse the step. Now, we can plot the new X and Y in a line chart and stack them on the scatter plot.

ray_wu_2-1658929319263.png

This technique is pretty good as we don’t need to use python,D3 or any programming languages to visualise. On the other hand, Power BI plotly custom visual follows a similar pattern by “stacking” on top of multiple charts to create new visualisations. However, I prefer to stick with Power BI standard visualisation as it's much easier to do.

Here is the final outcome of the visualisation showing the shot direction.

 

ray_wu_3-1658929428838.png

Advanced metrics involving time sequences, convex hull data

Convex hull can be easily created through a SQL script on the server side; all we need to do is join the table onto our database. The benefit of doing this is to ensure performance is always maintainable and at its best. We don't need to write any Dax calculation for these visualisations, however for dynamic cross-filtering and ranking would definitely require Dax.

Animation

 

For animation, I prefer to use a custom visual play axis as it's free and easier to use. For any graph visual we can simply drag timestamp onto the column but it would not be effective as we want to play all graphs simultaneously.

Aesthetic

ray_wu_4-1658929828478.png

Scatter Plot customising colour/size/type

ray_wu_5-1658929839941.png

Line chart customising line colour/line type

Make sure to fade the line to grey/fade to give a better overall UX and change all scatter plots to a certain colour (faded purple/blue, personal preferences). 

ray_wu_6-1658929857838.jpeg


Additional tips

 

  • For large data sources, I highly recommend filtering all these data to a usable level as there will be potential performance issues such as delay. Make sure to do this through the server side layer and not within dax calculation.
  • Always use the performance analyser in Power BI to make sure the visualisation is smooth. As more features are added on top of the visualisations, likely to have slower performance. Ideally, we want to make sure it's less than 2 seconds for the best user experience.

Other data viz galleries that I've created

Outcome analysis.

https://community.powerbi.com/t5/Data-Stories-Gallery/Football-outcome-analysis/td-p/2657537

Football heatmap of player movement.
https://community.powerbi.com/t5/Data-Stories-Gallery/heat-map-of-players-movement-in-the-field/td-p...

iPad Football dashboard.
https://community.powerbi.com/t5/Data-Stories-Gallery/Football-iPad-Dashboard/td-p/2657492

There will be a lot of interesting things we can do within BI sports visualisations, which I will be covering in later blogs.

Comments