🥅

大規模グラフデータの可視化:Cosmographの紹介

テラーノベルで機械学習を中心に担当している川尻です。最近、グラフニューラルネットワーク(GNN)に注目しており、サーベイや検証をしております。以前にも以下の記事を書きました。
https://zenn.dev/tellernovel_inc/articles/8b9f405e7072ae

複雑なアルゴリズムを適用する前に、当たりをつけたり、結果を確認したりするためには、可視化が重要です。本記事では、いくつかあるグラフの可視化ツールの中でも、大規模なネットワークでも簡単に使えるCosmographを紹介し、テラーノベルのデータを使って可視化してみます。

Cosmographとは

グラフデータを可視化するツールはたくさんありますが、もっとも有名なのはgrapgvizです。graphvizにはsfdp[1]という大規模なデータに対応したアルゴリズムが用意されていますが、ノード数が10k以上のような大規模なグラフになると計算時間もかなりかかって、パラメータ調整も大変になります。

Cosmographは、WebGLを使用して大規模なグラフをレンダリングできるWebベースのアプリケーションです。100k以上のノードを持つグラフでも、計算しながらレンダリングすることができるため、パラメータ調整をインタラクティブに行うことができます。必要なデータがあれば、すぐに試すことができるため、非常に便利です。
https://cosmograph.app/

また、レンダリングエンジンは、cosmosというnpmパッケージとして公開されているため、自分でウェブアプリに組み込むことも可能です。
https://github.com/cosmograph-org/cosmos

comos自体が他の同様のライブラリと比較して速いようです。
https://www.youtube.com/watch?v=HWk78hP8aEE

実際に使ってみた

cosmographにはサンプルデータも用意されており、それを使ってすぐに試すことができます。しかし、今回は自分たちでデータを用意して試してみたいと思います。可視化するグラフは、小説とタグをノードとして、小説とタグの関係をエッジとしています。動作環境はApple M2 Maxを搭載したマシンです。

データ作成

cosmograph用のデータ形式は、以下のブログが詳しいので参考にしました。
https://nightingaledvs.com/how-to-visualize-a-graph-with-a-million-nodes/

エッジデータは、以下のような形式のCSVファイルで読み込めます。

source, target
node1, node2
node1, node3

また、ノードに対するメタデータも読み込ませることができ、次のような形式で作成します。メタデータを使わない場合は、ファイル自体なくても良いですし、使わないカラムはなくても大丈夫です。逆に、使わないカラムの情報があっても問題なく動きます。

id, color, size
node1, red, 10
node2, green, 20
node3, blue, 30

エッジは小説からタグの向きとして、小説は赤、タグは青の色をつけることにしました。BigQueryを使用して社内データを上記の形式にしたがって出力しました。細かいTipsですが、ファイルサイズが大きいので一回Driveに保存してから手元にダウンロードしています。また、すべての作品データを使用すると数Mノードとなってcosmographでも多すぎるため、ランダムに間引いて200k程度のノード数に調整しました。

cosmographへの読み込みとパラメータ

次に、作成したデータをcosmographで読み込みます。先程ダウンロードしたエッジデータとメタデータを選択します。読み込むときの設定は次のようにしました。

  • ノードサイズを「incoming/link」にし、多く使われるタグは大きく表示
  • 表示領域は最大の8192

シミュレーションが落ち着くまで眺めながら少し待ちます。今回はこれ以上パラメータの調整をしなくてもいい感じに表示されました。

実行環境のパフォーマンスやデータによっては、領域を小さくしないと遅くなる可能性があります。その場合は、領域内に収まるようにGravityやRepulsionなどのパラメータを調整する必要があるかもしれません。その時は、シミュレーションをリアルタイムに見ながら調整してみてください。

可視化結果と操作方法

続いて、可視化の結果を見ながら、簡単な操作方法を説明します。作品ノードは赤色で、タグノードは青色で表され、使用頻度が高いタグほど大きく表示されます。また、ノードIDも文字として表示されます。

全体は以下のようにレイアウトされました。いくつかクラスタが見られます。
全体

大規模なクラスタが気になるので、中心のタグをクリックしてみました。そうすると、繋がっているリンクとノードだけがハイライトされます。一番大きいクラスタには「恋愛」と「ホラー」の作品が集まっていることがわかりました。タグを中心に作品が集まるようなわかりやすい形になっています。

恋愛
ホラー

次にタグが中心に来ていない小さめのクラスタの作品ノードをクリックしてみます。すると「同級生」というタグから出ていました。

次に「同級生」タグを選択してみると、先程の他にもクラスタができています。

そのうちの一つをクリックしてみると、「同級生」と「恋愛」の両方のタグから出ている作品のクラスタのようです。

どういうタグのクラスタが大きいか、どのタグ同士が一緒に使われやすいかをぱっと見ることができます。

左側のパネルから接続するデータを参照したり、CSVファイルとして出力することもできます。
操作パネル

まとめ

今回の方法では、詳細な分析結果を直ちに提供することはできませんが、難しいグラフ解析/GNNを適用する前に、簡単な定性的な分析や大まかな傾向を把握するのに役立ちます。ノードの種類を変更または増やすと、他にも興味深い結果が得られるかもしれません。さらに、レンダリングエンジンのCosmosは、npmのライブラリとしても公開されているため、社内分析ツールを開発するのも面白いでしょう。

脚注
  1. 力学モデルをもとにしたモデルで、cosmographはじめ大規模なグラフ描画は同様のものを元にしている。 https://en.wikipedia.org/wiki/Force-directed_graph_drawing ↩︎

テラーノベル テックブログ

Discussion