Show HN: Three.jsで作られたサッカーのパス可視化ツール

 (statsbomb-3d-viz.vercel.app)
1 ポイント 投稿者 GN⁺ 2024-07-30 | 1件のコメント | WhatsAppで共有
  • イベントが選択されていません
  • フィルターを適用
  • フィルターをクリア
  • カメラをリセット
  • StatsBomb 3D可視化ツール
  • StatsBombイベントデータファイルのURLを貼り付け
  • データを読み込む
  • サンプルを読み込む
  • 例: @c_mnzs / gh: @carlos-menezes

GN⁺の要約

  • このツールは、StatsBombのイベントデータを3Dで可視化する機能を提供する
  • ユーザーはイベントデータファイルのURLを入力してデータを読み込める
  • フィルターを適用またはクリアする機能によって、必要なデータを選択できる
  • カメラをリセットする機能によって、可視化されたデータを初期状態に戻せる
  • このツールは、データ分析や可視化に関心のある人にとって有用である可能性がある

関連記事

1件のコメント

 
GN⁺ 2024-07-30
Hacker Newsのコメント

  • 無料データを使って面白いものを作っているのを見るのはいつも良い。自分で試してみたいなら、無料のサッカー試合データが数千件ある
    https://github.com/statsbomb/open-data
    サッカーデータには、Lionel Messiの全試合を改めて収集したものもあり、アメリカンフットボールではTom Bradyについて同じ作業を始めている
    https://github.com/statsbomb/amf-open-data

    • 2015年ごろ、StatsBombとTwitter上のより広いネットワークのおかげでプログラミングを始めるきっかけになった
    • 本当に興味深い。すでにTom Bradyの全タッチダウンを自分で追跡する似たような作業をしているので、Tom Bradyデータは見続けたい
      データ可視化の側にはもっと詳細なデータが必要だったが、作業量はかなり大きい
      [1] https://tombradytds.com
      [2] https://tombradytds.com/viz.php

  • インターフェースが素晴らしい。別のものに変えたい場合は案内を見て元のJSONを自分で探せるので、すぐ試せる例を1つ用意するとよさそう
    読み込んでみた後でも、なぜthree.jsを使っているのかはよく分からない。パスの高さもヒートマップで示しているからだ。whoscoredのパス経路の方が直感的に見える

  • とても素晴らしい。2D可視化が好きだ。数年前にhttps://pubg.shを作ったが、テレメトリ形式は実際かなり似ている
    プロのPUBGチームが自分のツールを試合後の分析に使っているのは知っているが、プロサッカーチームにも似たような内部ツールがあるのか気になる。追跡して可視化できる要素は本当に多そうだ

    • 昔PUBGを熱心にやっていたとき、このアプリを何度も使った。会えてうれしい

  • よくできている。他のコメントを見ると、このプロジェクトを選んだ理由の1つはthree.jsの学習だったようだが、deck.glやkepler.glも検討する価値がある
    これらはより高レベルの可視化プリミティブを提供し、大規模データセットでの性能最適化もされている。複数の可視化手法をより簡単に試したり、いくつかの手法を重ねて見たりすることもできる
    どちらのパッケージも非常に高速にプロトタイピングできる。kepler.glならコードなしでも大まかなモックアップを作れる可能性があるので、このアプローチを試すのに大きな作業量はかからなさそうだ

  • いいね。共有してくれてありがとう。時間ベースのアニメーションを追加できるだろうか？色が徐々に消えていくような形で、試合が進行していく様子を見たい
    また、このデータから洞察を得る最善の方法が何なのかも気になる。探索が最初のステップのように感じるが、その上に価値を足せると本当に良さそうだ

  • 色が何を意味しているのか気になる。完了したパスだけで、ブロックされたパスは入っていないように見える？個々のベクトルではなくパスのヒートマップを見せると、別の視点になり得る
    パス方向を始点/終点の点で示したり、複雑になりすぎないなら矢印で表したりすることも検討したのか気になる。パス速度の表示があるのかも気になる
    選手別やチーム別の要約統計も可能そうだ。パス数、平均速度、成功率、スカッド内での集中/分散の度合い、最も多く/少なくボールを受ける選手、最も多く/少なくボールを受ける相手、ポジション別統計などがある。アイデアはここまでにしておく。素晴らしい可視化だ

    • コアエンジンはできているので、あとは作業するだけ。アイデアありがとう

  • 線の色をどう決めているのかは分からないが、チームと特定の選手でフィルタすると線がほとんど見えず、自分で探さなければならないほどだ

  • 「Load Example」が何をするものなのかを理解するのにとても役立った。素晴らしいビルドだ。色が何を意味するのか説明してほしいという要望にも同意する
    リアルタイムの試合カメラ映像と組み合わせるとかなり強力かもしれない[0]。試合中の細部を強調するような形だ
    [0] https://x.com/skalskip92/status/1816461263829889238

  • 良さそうに見える。パスを時系列で再生できれば、試合の流れを感じられそうだ

  • ファイルを読み込もうとしたが失敗した。いくつかのURL形式を試した
    https://github.com/statsbomb/open-data/…
    https://github.com/statsbomb/open-data/…
    15956.json
    入力欄に期待される形式の例があらかじめ入っているか、ファイルがなぜロードされなかったのかをエラーメッセージでもっと分かりやすく知らせてくれるとよい。自分のURLの問題なのか内部の問題なのか分かりにくい
    それでも非常に興味深いデモで、airstrikeが提案したように（https://news.ycombinator.com/item?id=41096570）、コアエンジンはできているのでフィルタがもっと増えればずっと面白くなりそうだ