5 ms·
Show HN: A football/soccer pass visualizer made with Three.js
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.
- transformi 2y agoInteresting to see some score about how this passes contribute to the game. Great work!
- navis05 2y agoWould love if there was a way to instantly see an example url Like a “try example button” Lower friction to test
- carlos-menezes 2y agoYou can use the "Load Default" button!
- kanche 2y agoMaybe rename it to "Load an Example" or something. Not a clear name.
- carlos-menezes 2y agoAgreed. Fixed! Thank you.
- 6451937099 2y ago[dead]
- Brechreiz 2y ago[dead]
- chaosprint 2y agoGreat 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.
- bilekas 2y agoThis 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?
- vessenes 2y agoThis 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.
- SushiHippie 2y agoI 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.
- airstrike 2y agoWhat 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!
- carlos-menezes 2y agoThe main engine is in place, now I just gotta get to work! Thanks for the ideas! :D
- amne 2y agocool/warm palletes per team could be a good way to understand what team dominated the field at a glance.
- tacker2000 2y agoVery interesting! Also, never heard about statsbomb. Crazy how much data can now be gleaned from a simple football game.
- deanrtaylor 2y agoReally impressive work
- carlos-menezes 2y agoThank you!
- rocauc 2y ago"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 https://x.com/skalskip92/status/1816461263829889238
- luispauloml 2y agoI 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 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.
- carlos-menezes 2y agoHey! https://raw.githubusercontent.com/statsbomb/open-data/master/data/events/15956.json https://raw.githubusercontent.com/statsbomb/open-data/master... This should work!
- alejoar 2y agoI'm interested in seeing the World Cup final in this app, but I'm not sure how to find the correct file. Any pointers?
- 0xrandom 2y agolove this; would have to have an example of how the example URL would look like.
- carlos-menezes 2y agohttps://raw.githubusercontent.com/statsbomb/open-data/master/data/events/15956.json https://raw.githubusercontent.com/statsbomb/open-data/master... This works!
- andy_ppp 2y agoLooks 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.
- thom 2y agoAlways 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 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 https://github.com/statsbomb/amf-open-data
- carlos-menezes 2y agoThank you for your efforts!
- walthamstow 2y agoStatsbomb and the wider network of people on twitter circa 2015 was what got me into programming. Thanks!
- oo0shiny 2y agoOh 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 https://tombradytds.com [2] https://tombradytds.com/viz.php https://tombradytds.com/viz.php
- akudha 2y agoVery cool. Is there a tutorial where we can learn to make such visuals?
- carlos-menezes 2y agoI did this as a way to get started with RTF + Three.js.
- freedomben 2y agoI 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?
- mhalle 2y agoNice 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!
- apazzolini 2y agoVery cool! I love 2D visualizations. I built https://pubg.sh 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.
- carlos-menezes 2y agoOh wow! I've used your app multiple times back when I was avidly playing PUBG. Nice to meet you!
- apazzolini 2y agoSmall world!
- heffer 2y agoInteresting 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!