Show HN: Herramienta de visualización de pases de fútbol hecha con Three.js
(statsbomb-3d-viz.vercel.app)- Ningún evento seleccionado
- Aplicar filtro
- Borrar filtro
- Restablecer cámara
- Herramienta de visualización 3D de StatsBomb
- Pega la URL del archivo de datos de eventos de StatsBomb
- Cargar datos
- Cargar ejemplo
- Ejemplo: @c_mnzs / gh: @carlos-menezes
Resumen de GN⁺
- Esta herramienta ofrece la capacidad de visualizar datos de eventos de StatsBomb en 3D
- El usuario puede cargar los datos ingresando la URL del archivo de datos de eventos
- Se pueden aplicar o borrar filtros para seleccionar los datos deseados
- La función de restablecer cámara permite volver los datos visualizados a su estado inicial
- Esta herramienta puede ser útil para quienes están interesados en el análisis y la visualización de datos
1 comentarios
Comentarios en Hacker News
Siempre da gusto ver que alguien haga algo genial usando datos gratuitos. Si quieres probarlo tú mismo, hay miles de datos gratuitos de partidos de fútbol
https://github.com/statsbomb/open-data
Entre los datos de fútbol, incluso hay una recopilación de todos los partidos de Lionel Messi, y en fútbol americano comenzaron a hacer lo mismo con Tom Brady
https://github.com/statsbomb/amf-open-data
Para la parte de visualización de datos necesitaba datos más detallados, pero es bastante trabajo
[1] https://tombradytds.com
[2] https://tombradytds.com/viz.php
La interfaz está excelente. Si quieres cambiarlo por otra cosa, puedes seguir las instrucciones y encontrar tú mismo el JSON original, así que estaría bien ofrecer un ejemplo directo
Después de cargarlo, no me queda muy claro por qué usar three.js. Supongo que es porque también muestra la altura del pase como mapa de calor. Las trayectorias de pase de whoscored se ven más intuitivas
Está muy bueno. Me gustan las visualizaciones 2D. Hace unos años hice https://pubg.sh y el formato de telemetría en realidad es bastante parecido
Sé que equipos profesionales de PUBG usan mi herramienta para análisis postpartido, y me da curiosidad si los equipos profesionales de fútbol también tienen herramientas internas similares. Debe haber muchísimas cosas que se pueden rastrear y visualizar
Bien hecho. Por otros comentarios, parece que una de las razones para elegir este proyecto fue aprender three.js, pero también podría valer la pena considerar deck.gl o kepler.gl
Ofrecen primitivas de visualización de más alto nivel y están optimizados en rendimiento para datasets grandes. También podrías probar más fácilmente distintos tipos de visualización o superponer varios enfoques
Ambos paquetes permiten prototipado muy rápido. kepler.gl incluso podría permitirte hacer un mockup aproximado sin código, así que no parece que probar este enfoque requiera demasiado trabajo
Está genial. Gracias por compartirlo. ¿Se podría agregar animación basada en el tiempo? Me gustaría ver el partido avanzar con los colores desvaneciéndose poco a poco
También me pregunto cuál sería la mejor forma de extraer insights de estos datos. La exploración se siente como el primer paso, pero sería muy bueno añadir valor encima de eso
Me pregunto qué significan los colores. Parece que solo están los pases completados y que los pases interceptados quedaron fuera. Mostrar un mapa de calor de pases en lugar de vectores individuales podría dar otra perspectiva
También me pregunto si consideraste marcar la dirección del pase con puntos de inicio/fin o, si no se vuelve demasiado recargado, con flechas. También me pregunto si hay una indicación de la velocidad del pase
Tal vez también se podrían sacar estadísticas resumidas por jugador o por equipo: cantidad de pases, velocidad promedio, tasa de éxito, qué tan concentrada o distribuida está la posesión dentro del plantel, qué jugadores reciben más/menos el balón, de quién reciben más/menos el balón, estadísticas por posición, etc. Hasta ahí llegan mis ideas. Muy buena visualización
No sé cómo se decide el color de las líneas, pero al filtrar por equipo y por jugador las líneas casi no se ven, hasta el punto de que hay que buscarlas a simple vista
"Load Example" fue muy útil para entender qué hace. Muy buena implementación. También coincido con la petición de explicar qué significan los colores
Combinado con video en tiempo real de la cámara del partido, podría ser bastante potente[0], por ejemplo para resaltar detalles durante el juego
[0] https://x.com/skalskip92/status/1816461263829889238
Se ve muy bien. Si se pudiera reproducir los pases en orden cronológico, creo que se sentiría mejor el flujo del partido
Intenté cargar un archivo, pero falló. Probé varios formatos de URL
https://github.com/statsbomb/open-data/…
https://github.com/statsbomb/open-data/…
15956.json
Estaría bien que el campo de entrada ya trajera un ejemplo del formato esperado, o que el mensaje de error explicara mejor por qué no se cargó el archivo. Es difícil saber si el problema es mi URL o algo interno
Aun así, es una demo muy interesante y, como sugirió airstrike(https://news.ycombinator.com/item?id=41096570), ahora que ya está el motor principal, con más filtros se volvería mucho más interesante
Esto debería funcionar