Show HN: Ferramenta de visualização de passes de futebol feita com Three.js

 (statsbomb-3d-viz.vercel.app)
1 pontos por GN⁺ 2024-07-30 | 1 comentários | Compartilhar no WhatsApp
  • Nenhum evento selecionado
  • Aplicar filtro
  • Limpar filtro
  • Redefinir câmera
  • Ferramenta de visualização 3D do StatsBomb
  • Cole a URL do arquivo de dados de eventos do StatsBomb
  • Carregar dados
  • Carregar exemplo
  • Exemplo: @c_mnzs / gh: @carlos-menezes

Resumo do GN⁺

  • Esta ferramenta oferece a capacidade de visualizar dados de eventos do StatsBomb em 3D
  • Os usuários podem carregar os dados inserindo a URL do arquivo de dados de eventos
  • É possível selecionar os dados desejados por meio das funções de aplicar ou limpar filtros
  • A função de redefinir câmera permite retornar os dados visualizados ao estado inicial
  • Esta ferramenta pode ser útil para pessoas interessadas em análise e visualização de dados

Leituras relacionadas

1 comentários

 
GN⁺ 2024-07-30
Comentários no Hacker News

  • É sempre bom ver alguém criando algo legal usando dados gratuitos. Se você quiser experimentar, há milhares de dados gratuitos de partidas de futebol disponíveis
    https://github.com/statsbomb/open-data
    Entre os dados de futebol, há também uma nova coleta de todas as partidas de Lionel Messi; no futebol americano, começaram o mesmo trabalho com Tom Brady
    https://github.com/statsbomb/amf-open-data

    • Por volta de 2015, graças à StatsBomb e a uma rede mais ampla no Twitter, acabei entrando na programação
    • Muito interessante. Eu já estava fazendo algo parecido, rastreando por conta própria todos os touchdowns do Tom Brady, então preciso continuar acompanhando esses dados do Tom Brady
      Para a parte de visualização de dados, eu precisava de dados mais detalhados, mas dá bastante trabalho
      [1] https://tombradytds.com
      [2] https://tombradytds.com/viz.php

  • A interface é excelente. Se quiser trocar por outra coisa, dá para seguir as instruções e encontrar o JSON original por conta própria, então seria bom fornecer um exemplo direto
    Depois de carregar, não entendi muito bem por que usar three.js. Até porque a altura dos passes também é mostrada como mapa de calor. As trajetórias de passe do whoscored parecem mais intuitivas

  • Muito legal. Gosto de visualização 2D. Alguns anos atrás criei https://pubg.sh, e o formato de telemetria é, na verdade, bem parecido
    Sei que equipes profissionais de PUBG usam minha ferramenta para análise pós-jogo, e fico curioso se clubes de futebol profissional também têm ferramentas internas semelhantes. Deve haver muita coisa que dá para rastrear e visualizar

    • Usei esse app várias vezes quando eu jogava PUBG com afinco. Prazer em te encontrar por aqui

  • Ficou bem feito. Pelo que vi em outro comentário, um dos motivos para escolher esse projeto parece ter sido aprender three.js, mas vale considerar também deck.gl ou kepler.gl
    Eles oferecem primitivas de visualização de nível mais alto e têm otimizações de desempenho para datasets grandes. Também fica mais fácil testar vários modos de visualização ou sobrepor diferentes abordagens
    Os dois pacotes permitem prototipagem muito rápida. Com o kepler.gl talvez seja possível criar um mockup aproximado sem código, então testar essa abordagem não deve exigir muito trabalho

  • Legal. Obrigado por compartilhar. Será que daria para adicionar animação baseada no tempo? Eu gostaria de ver a partida se desenrolando com as cores desaparecendo gradualmente
    Também fico curioso sobre qual seria a melhor forma de extrair insights desses dados. A exploração parece ser o primeiro passo, mas seria muito bom agregar valor em cima disso

  • Fico curioso para saber o que as cores significam. Parece que são apenas passes concluídos, e que os passes interceptados ficaram de fora? Mostrar um mapa de calor dos passes em vez de vetores individuais poderia dar outra perspectiva
    Também me pergunto se você considerou indicar a direção do passe com pontos de início/fim ou, se não ficar confuso demais, com setas. Também fico curioso se há alguma indicação da velocidade do passe
    Também parecem possíveis estatísticas resumidas por jogador ou por time: número de passes, velocidade média, taxa de sucesso, grau de concentração/dispersão dentro do elenco, jogadores que mais/menos recebem a bola, jogadores de quem mais/menos recebem a bola, estatísticas por posição etc. Vou parar por aqui com as ideias. É uma visualização muito legal

    • O motor principal já está aí, agora é só trabalhar. Obrigado pelas ideias

  • Não sei como as cores das linhas são definidas, mas ao filtrar por time e por um jogador específico, as linhas quase não aparecem, a ponto de ser preciso procurá-las manualmente

  • O "Load Example" foi muito útil para entender o que isso faz. Bela construção. Também concordo com o pedido para explicar o que as cores significam
    Combinado com imagens de câmera de uma partida ao vivo, isso poderia ser bem poderoso[0], destacando detalhes durante o jogo
    [0] https://x.com/skalskip92/status/1816461263829889238

  • Parece legal. Se fosse possível reproduzir os passes em ordem cronológica, acho que daria para sentir o fluxo da partida

  • Tentei carregar um arquivo, mas falhou. Testei vários formatos de URL
    https://github.com/statsbomb/open-data/…
    https://github.com/statsbomb/open-data/…
    15956.json
    Seria bom se o campo de entrada já trouxesse um exemplo do formato esperado, ou se a mensagem de erro explicasse melhor por que o arquivo não foi carregado. É difícil saber se o problema é minha URL ou algo interno
    Ainda assim, é uma demo muito interessante e, como o airstrike sugeriu (https://news.ycombinator.com/item?id=41096570), o motor principal já está pronto, então ficará muito mais interessante se houver mais filtros