Show HN: A football/soccer pass visualizer made with Three.js (statsbomb-3d-viz.vercel.app)

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

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

Like a “try example button”

Lower friction to test

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.

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?

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.

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.

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!

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

Really impressive work

"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

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.

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

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.

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

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

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?

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!

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.

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!