1 of 11

Interactive Soccer Data Visualization in VR

Vincent Zhu

2 of 11

Motivation

  • Video Assistant Referee (VAR) in soccer now widely used
  • Semi-automated Offside technology & tracking device introduced in World Cup 2022
  • Tracking vests for training
  • In-game analysis for tactical changes

​

3 of 11

Motivation

4 of 11

Dataset

  • StatsBomb
    • Single player / team aggregated
    • Key passes
    • Off-the-ball positioning of a player to find space (xSpace)
    • Expected goals (xG)
    • Pressure
    • …
  • How to combine some of these in VR to take advantage of the 3D information?
    • Study a team’s performance
    • Study a player’s decision

5 of 11

Overview

3D

  • With the VR, user will be able to “stand” at a position to visualize the data
  • Simulate the field of view

Interactive & Dynamic

  • User will be able to manipulate / highlight the position or timestamp depending on the type of data:
    • Data from the whole team
    • Data of a player

Collaborative

  • Multiple users will be able to visualize the same data at different positions

6 of 11

Inspirations

7 of 11

Tools

  • Tableau & statsbombpy - for preprocessing/previsualize data
  • D3.js - for interactive visualization
  • A-Frame - for building VR experience on web

8 of 11

Schedule

Date

Goal

Documentation for Wiki

2/14

Pick some interesting dataset to be used from StatsBomb data collections; Find frameworks/tools for visualizing the dataset in VR

Guide to access StatsBomb sports data

2/16

Learn to use d3.js with a small dataset; Learn how to setup A-Frame environment and the website

Tutorial for d3.js

2/23

Preprocess and manipulate the dataset for visualization using statsbombpy and Tableau; Previsualize the dataset and have a draft visualization in 2D; Continue learning how to setup the web

Short guide for using Tableau

2/28

Implement different styles of visualization with the dataset: colored dots, arrow lines, heatmap…

Tutorial for different styles of visualization in d3.js

3/2

In-class activities

​

3/7

Improve the visualization based on in-class feedback; Make the visualization accessible in VR with A-Frame

Comparing different visualization methods

3/9

Finish up the project

​

9 of 11

In-Class Activities

  • In group of 3 or 4, each person in the group visualize two datasets in one style of visualization; for example, person A visualize passes & off-the-ball positioning of the attacker using color dots and lines, person B visualize those using heatmap…
  • Everyone share what the datasets tell them about
  • Fill out a Google form

10 of 11

Wiki Contributions

  • An interactive visualization tool in VR to analyze soccer data
  • Tutorials on how to use d3.js for VR visualization

11 of 11

Thank you