Show HN: Alat visualisasi umpan sepak bola yang dibuat dengan Three.js

 (statsbomb-3d-viz.vercel.app)
1 poin oleh GN⁺ 2024-07-30 | 1 komentar | Bagikan ke WhatsApp
  • Tidak ada event yang dipilih
  • Terapkan filter
  • Hapus filter
  • Reset kamera
  • Alat visualisasi 3D StatsBomb
  • Tempel URL file data event StatsBomb
  • Muat data
  • Muat contoh
  • Contoh: @c_mnzs / gh: @carlos-menezes

Ringkasan GN⁺

  • Alat ini menyediakan kemampuan untuk memvisualisasikan data event StatsBomb dalam 3D
  • Pengguna dapat memuat data dengan memasukkan URL file data event
  • Fitur untuk menerapkan atau menghapus filter memungkinkan pemilihan data yang diinginkan
  • Fitur reset kamera memungkinkan data yang divisualisasikan dikembalikan ke keadaan awal
  • Alat ini dapat berguna bagi orang-orang yang tertarik pada analisis dan visualisasi data

Bacaan terkait

1 komentar

 
GN⁺ 2024-07-30
Komentar Hacker News

  • Selalu menyenangkan melihat orang membuat sesuatu yang keren dengan memanfaatkan data gratis. Kalau ingin mencobanya sendiri, ada ribuan data pertandingan sepak bola gratis
    https://github.com/statsbomb/open-data
    Di antara data sepak bola itu, ada juga yang mengumpulkan ulang semua pertandingan Lionel Messi, dan untuk football Amerika, pekerjaan serupa mulai dilakukan untuk Tom Brady
    https://github.com/statsbomb/amf-open-data

    • Sekitar tahun 2015, saya jadi mulai belajar pemrograman berkat StatsBomb dan jaringan Twitter yang lebih luas
    • Sangat menarik. Saya sudah mengerjakan sesuatu yang mirip dengan melacak sendiri semua touchdown Tom Brady, jadi saya rasa saya harus terus melihat data Tom Brady
      Untuk sisi visualisasi data saya butuh data yang lebih rinci, tetapi jumlah pekerjaannya cukup besar
      [1] https://tombradytds.com
      [2] https://tombradytds.com/viz.php

  • Antarmukanya luar biasa. Jika ingin mengganti ke yang lain, karena ada petunjuk dan JSON aslinya bisa dicari sendiri, akan bagus kalau ada satu contoh langsung yang disediakan
    Setelah saya memuatnya, saya kurang paham kenapa memakai three.js. Mungkin karena ketinggian operan juga ditampilkan sebagai heatmap. Jalur operan milik whoscored terlihat lebih intuitif

  • Sangat keren. Saya suka visualisasi 2D. Beberapa tahun lalu saya membuat https://pubg.sh, dan format telemetry-nya ternyata cukup mirip
    Saya tahu tim PUBG profesional memakai alat saya untuk analisis pascapertandingan, jadi saya penasaran apakah tim sepak bola profesional juga punya alat internal serupa. Sepertinya ada sangat banyak hal yang bisa dilacak dan divisualisasikan

    • Dulu saat saya sangat sering main PUBG, saya memakai aplikasi ini berkali-kali. Senang bertemu dengan Anda

  • Dibuat dengan bagus. Dari komentar lain, sepertinya salah satu alasan memilih proyek ini adalah untuk belajar three.js, tetapi deck.gl atau kepler.gl juga layak dipertimbangkan
    Keduanya menyediakan primitif visualisasi tingkat lebih tinggi dan dioptimalkan untuk performa pada dataset besar. Anda juga bisa lebih mudah mencoba berbagai jenis visualisasi atau menumpuk beberapa pendekatan
    Kedua paket itu memungkinkan pembuatan prototipe yang sangat cepat. kepler.gl bahkan mungkin bisa dipakai untuk membuat mockup kasar tanpa kode, jadi sepertinya tidak perlu banyak pekerjaan untuk menguji pendekatan ini

  • Keren sekali. Terima kasih sudah berbagi. Apakah bisa ditambahkan animasi berbasis waktu? Saya ingin melihat pertandingan berjalan seiring warna yang perlahan memudar
    Saya juga penasaran apa cara terbaik untuk mendapatkan insight dari data ini. Eksplorasi terasa seperti langkah pertama, tetapi akan sangat bagus kalau ada nilai tambah di atasnya

  • Saya penasaran warna-warnanya berarti apa. Sepertinya hanya operan yang berhasil, dan operan yang dipotong tidak dimasukkan? Menampilkan heatmap operan alih-alih vektor individual bisa memberi sudut pandang lain
    Saya juga penasaran apakah pernah dipertimbangkan untuk menandai arah operan dengan titik awal/akhir, atau dengan panah kalau tidak terlalu ramai. Saya juga penasaran apakah ada penanda kecepatan operan
    Ringkasan statistik per pemain atau per tim juga tampaknya memungkinkan. Misalnya jumlah operan, kecepatan rata-rata, tingkat keberhasilan, tingkat konsentrasi/penyebaran dalam skuad, pemain yang paling banyak/paling sedikit menerima bola, pemain yang menerima bola dari pemain terbanyak/paling sedikit, statistik per posisi, dan sebagainya. Ide saya sampai di sini. Visualisasi yang bagus

    • Mesin intinya sudah ada, jadi sekarang tinggal dikerjakan saja. Terima kasih atas idenya

  • Saya tidak tahu bagaimana warna garis ditentukan, tetapi saat difilter ke tim dan pemain tertentu, garisnya hampir tidak terlihat sampai harus dicari-cari sendiri

  • "Load Example" sangat membantu untuk memahami apa yang dilakukannya. Build yang keren. Saya juga setuju dengan permintaan untuk menjelaskan arti warna-warnanya
    Kalau digabungkan dengan video kamera pertandingan secara real-time, ini bisa jadi cukup kuat[0]. Misalnya untuk menyoroti detail selama pertandingan
    [0] https://x.com/skalskip92/status/1816461263829889238

  • Terlihat keren. Kalau operannya bisa diputar ulang berdasarkan urutan waktu, rasanya alur pertandingan akan lebih terasa

  • Saya mencoba memuat file tetapi gagal. Saya sudah mencoba beberapa format URL
    https://github.com/statsbomb/open-data/…
    https://github.com/statsbomb/open-data/…
    15956.json
    Akan bagus kalau contoh format yang diharapkan sudah terisi di kolom input, atau ada pesan error yang lebih jelas tentang kenapa file tidak bisa dimuat. Sulit tahu apakah masalahnya di URL saya atau di sisi internal
    Meski begitu, ini tetap demo yang sangat menarik, dan seperti yang disarankan airstrike(https://news.ycombinator.com/item?id=41096570), karena mesin intinya sudah ada, kalau filternya ditambah ini akan jadi jauh lebih menarik