1 of 8

Project 1 Final Presentation

Vincent Zhu

2 of 8

Wiki Contributions

  • Guide to use StatsBomb open sports data
  • Guide to use StatsBomb Python API
  • D3.js tutorial for DOM manipulation, data binding and visualization in Observable
  • Update A-Frame tutorial
  • Tutorial for making animation in A-Frame, and how to update animation dynamically
  • Tutorial for customizing controller support for Quest2

3 of 8

2D Visualization

4 of 8

VR Visualization

5 of 8

What I’ve Learned

  • Dynamically manipulate data in DOM with D3.js
  • Make simple data visualization and animate them with D3.js
  • Complex animation in A-Frame
  • Customize VR controller in A-Frame

6 of 8

Challenges

  • Had the wrong idea about how A-Frame will work with D3.js to bring things into VR
    • D3.js is used to easily and dynamically update the data in A-Frame 3D object (instead of A-Frame bringing the D3.js 3D visualization into VR)
  • Schedule too much time on D3.js

​

​

  • StatsBomb free data does not has all the information of every player for every frame, depending on the camera coverage when collecting the data
  • Some complex animation does not render on Observable!

7 of 8

Ideas for Second Project

  • Visualize structural analysis
  • Building implosion

​

Presentation Title

7

3/15/23

8 of 8

Thank you