I've been working on a football pass visualiser for the past week.
It uses open data from StatsBomb to analyse and visualise passing patterns, allowing users to explore and filter the data by pass distance, team and players.
Part of the soccer data is us going back and collecting every Lionel Messi game, and we started doing the same for Tom Brady in American football here:
Oh this is fascinating. I'll have to keep an eye on the Tom Brady data since I was already doing something similar by hand for tracking all of his TDs [1]. I've wanted more detailed data for the data visualization piece of it [2] but it's a lot of work.
Great interface. Maybe provide a direct example, if I want to change to something else, I will find the raw json myself through the guidance you provided.
After loading it, I don’t quite understand why you use threejs. Because you also use a heat map to show the height of the pass. The passing route on whoscored seems more intuitive.
Very cool! I love 2D visualizations. I built https://pubg.sh many years ago; the telemetry format is quite similar actually. I know that professional PUBG teams use my tool for post-match analysis, I wonder if professional soccer teams have anything similar in-house, there's all sorts of things that you could track and visualize.
Nice work. From another comment I see that you chose this project in part to learn three.js, but you might also consider using deck.gl or kepler.gl.
They provide higher level visualization primitives and are optimized for performance with large datasets. They would also allow you to try out different visualization methods more easily, or even overlay multiple ones.
Both packages allow for very fast prototyping (with kepler.gl, you might be able to mock up something with no code at all), so trying out this approach shouldn't involve an enormous amount of work.
This is cool, thanks for sharing it. Any chance you could add a time-based animation? I'd love to see a game play out, maybe with some fading colors.
Also, I wonder what the best way to get insights out of this data is -- feels like exploration is the first step, but adding value on top would be really great.
What do the colors mean? I assume this is complete passes only, not intercepted ones? How about displaying some heatmap of passes instead of individual vectors for a different view? Have you considered denoting the direction of the pass with a dot for the start/end or an arrow if not too busy? Is there any indication of the speed of the pass? How about summary stats for each player, team, etc? # of passes, average speed, % complete, how concentrated vs. distributed they are over the squad, which players receive the ball most/least often, which players receive the ball from most players/fewer players, same for positions (individually or grouped by defenders/midfielders/attackers)
I don't know how you decide the colors for the lines, but when I filter by a team and a specific player I need to search for the lines as they are basically invisible.
None of them worked. It would be good if the field already had an example filled in with the expected format, or maybe a better hint in the error message indicating why the file was not loaded. Was it my URL or another internal problem?
Still, it is a very interesting demo, and just like airstrike suggested (https://news.ycombinator.com/item?id=41096570), now that the main engine is in place, more filters would be make this even more interesting. Well done.
Interesting to see how much (or little) the positions of the players in the lineup are reflected in the play.
As someone that was born in Leverkusen I can appreciate you using a Bayer Leverkusen vs. Werder Bremen match for the example ;-) Nice work!
This is great to see.. A few friends do a lot of player statistics and analytics for fun mostly and this would be an amazing addition. Any documentation on what the week process went and challenges that you ran into?
https://github.com/statsbomb/open-data
Part of the soccer data is us going back and collecting every Lionel Messi game, and we started doing the same for Tom Brady in American football here:
https://github.com/statsbomb/amf-open-data