Show HN: A football/soccer pass visualizer made with Three.js | Hacker News Reader

Show HN: A football/soccer pass visualizer made with Three.js

statsbomb-3d-viz.vercel.app

182 pointscarlos-menezes34 comments

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.

Open articleView on HN

Always nice to see people doing cool stuff with our free data! If anyone else wanted to play there’s thousands of free soccer games at:

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

Thank you for your efforts!

Statsbomb and the wider network of people on twitter circa 2015 was what got me into programming. Thanks!

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.

[1] https://tombradytds.com [2] https://tombradytds.com/viz.php

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.

Oh wow! I've used your app multiple times back when I was avidly playing PUBG. Nice to meet you!

Small world!

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.

Good luck!

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)

OK, I'll stop brainstorming :-) Cool visualization!

The main engine is in place, now I just gotta get to work! Thanks for the ideas! :D

cool/warm palletes per team could be a good way to understand what team dominated the field at a glance.

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.

"Load Example" was very helpful to get a sense of what this does. Awesome build. +1 to the other comment wanting a breakdown of what the colors mean.

Also, combining this with real-time in-game camera play could be really powerful, too[0]. Like illuminating details during the game.

[0] https://x.com/skalskip92/status/1816461263829889238

Looks cool, would be great to be able to replay the passes in time order, then I think you could get a feel for the game.

I am trying to load a file but it fails. I tried different URL formats:

    - https://github.com/statsbomb/open-data/blob/master/data/events/15956.json
    - https://github.com/statsbomb/open-data/raw/master/data/events/15956.json
    - 15956.json

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.

Hey!

https://raw.githubusercontent.com/statsbomb/open-data/master...

This should work!

I'm interested in seeing the World Cup final in this app, but I'm not sure how to find the correct file. Any pointers?

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!

Would love if there was a way to instantly see an example url

Like a “try example button”

Lower friction to test

You can use the "Load Default" button!

Maybe rename it to "Load an Example" or something. Not a clear name.

Agreed. Fixed! Thank you.

Very interesting! Also, never heard about statsbomb. Crazy how much data can now be gleaned from a simple football game.

I get a CORS error when the page tries to GET the github link, with both Chrome and Firefox. Even the "example" button hits that issue.

Are others working around this somehow or is it just an issue for me with two browsers for some reason?

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?

Interesting to see some score about how this passes contribute to the game. Great work!

Very cool. Is there a tutorial where we can learn to make such visuals?

I did this as a way to get started with RTF + Three.js.

love this; would have to have an example of how the example URL would look like.

https://raw.githubusercontent.com/statsbomb/open-data/master...

This works!

Really impressive work

Thank you!

Reply on news.ycombinator.com