2025年9月6日土曜日

Casey Primozic の “Music Galaxy” は、Spotifyの「関連アーティスト」から巨大グラフを作り、node2vecで埋め込んでThree.jsで3D表示するプロジェクト

  1. データ取得：Spotify APIの“Related Artists”（各アーティスト最大20件）をクローリングし、約140万ノードの関係グラフを構築。可視化用には人気度で約7万に間引き。 Casey Primozic

  2. 埋め込み：node2vecでグラフ埋め込み。p（復帰）高め、q（探索）低めで密度差とクラスターが明瞭に。必要に応じてPCAで3次元へ。 Casey Primozic

  3. 検証：関連エッジの平均距離、K-POPクラスター等の妥当性を目視＋簡易統計で確認。 Casey Primozic

  4. 可視化：Three.jsでInstanced Rendering（20万+本の線を1ドロー）、Web Workerでデコード、CDN配信のバイナリチャンク、動的品質調整。 Casey Primozic

  5. 体験：スペーシャルオーディオ、再生中ノードのパルス表示（WebAudio）。Spotifyアカウント連携で自分の「星座」を重ねられる。 Casey Primozic

  6. 制約：エッジの重みがAPIで取れない（類似度の強さ不明）、関連は最大20件。 Casey Primozic+1

再現レシピ（最短ルート）

  • 収集：/v1/artists/{id}/related-artists をBFSでクロール→networkxで無向グラフ化。 Casey Primozic

  • 前処理：活動実体の薄いノードを人気度で除外、巨大連結成分に限定。 Casey Primozic

  • 学習：node2vec（実装は公式/派生）で埋め込み→ハイパラ（特に p↑, q↓）をグリッドサーチ→PCAで3D化。 Casey Primozic+1

  • 配信：位置・エッジをバイナリで分割保存しCDN配信。クライアントでWeb Workerに渡して展開。 Casey Primozic

  • 描画：Three.js BufferGeometry/InstancedMesh、ラベルの可視域制御、透明合成の帯域ボトルネック回避（色をfloat→u8）。 Casey Primozic

参考・類似

  • Music Galaxy（公式解説・デモ）：プロセス全体（データ→埋め込み→可視化）が詳述。 Casey Primozic+1

  • Every Noise at Once：Spotify起源のジャンル散布図。2023年末以降データ更新停止の経緯も要注記。 Wikipedia

投稿者