Scrapbox プロジェクトのグラフ構造可視化 - その後

Scrapbox のページ間リンクを可視化するやつです。

Graphviz バージョン blog.kondoumh.com

D3.js バージョン blog.kondoumh.com

D3.js バージョンを半年ぶりにちょっと触りました。と言っても Visualization の方式を変えたとかではなく、ノードをフィルタリングする UI を追加してみたっていう内容です。

Scrapbox API でページ毎の views と linked のカウントが取れます。これをフィルタリングの指標とします。スライダーの UI コンポーネントで2つの数値の Range を調整するようにしました。

vuetifyjs.com

views と linked を独立で調整できるようにしてます。

f:id:kondoumh:20201220220645p:plain

自分の Scrapbox プロジェクトを可視化してみたところです。

scrapbox.io


Scrapbox graph visualization

ハッシュタグのように使うページはやたらと 1-hop リンクが増えて行きます。文章内で言及されることによって自然とハブになるページとは違って、可視化した時はノイズに近いものになります。ハッシュタグかどうかの判定はデータからはできないので、リンク数で定量的に削る作戦です。Graph データを作るときにメタデータを出力するようにすれば UI でフィルターできそうですね。

個人 Scrapbox プロジェクトなので高々数100件しかありませんが、会社の Scrapbox は6000ページを超えており*1、全てのノードを描画するのは重すぎなので views で10件以上とかで絞り込めば閲覧に耐える速度になりました。

と言うことで、ノードの数を絞るのに views の Min を、ハッシュタグ的なノイズ的ページを隠すのに links の Max をうまく設定することでグラフ構造が浮き彫りになる感じです。

もっとピュンピュン動いて欲しいところですが、レンダリングアルゴリズムの見直しはまた今度。

*1:元データを作成するのに5分ぐらいかかります。(データ取得が大部分を占めていますが)。