Scrapbox のページ間リンクを可視化するやつです。
Graphviz バージョン kondoumh.hatenablog.com
D3.js バージョン kondoumh.hatenablog.com
D3.js バージョンを半年ぶりにちょっと触りました。と言っても Visualization の方式を変えたとかではなく、ノードをフィルタリングする UI を追加してみたっていう内容です。
Scrapbox API でページ毎の views と linked のカウントが取れます。これをフィルタリングの指標とします。スライダーの UI コンポーネントで2つの数値の Range を調整するようにしました。
https://vuetifyjs.com/ja/components/range-sliders/vuetifyjs.com
views と linked を独立で調整できるようにしてます。
自分の Scrapbox プロジェクトを可視化してみたところです。
ハッシュタグのように使うページはやたらと 1-hop リンクが増えて行きます。文章内で言及されることによって自然とハブになるページとは違って、可視化した時はノイズに近いものになります。ハッシュタグかどうかの判定はデータからはできないので、リンク数で定量的に削る作戦です。Graph データを作るときにメタデータを出力するようにすれば UI でフィルターできそうですね。
個人 Scrapbox プロジェクトなので高々数100件しかありませんが、会社の Scrapbox は6000ページを超えており*1、全てのノードを描画するのは重すぎなので views で10件以上とかで絞り込めば閲覧に耐える速度になりました。
と言うことで、ノードの数を絞るのに views の Min を、ハッシュタグ的なノイズ的ページを隠すのに links の Max をうまく設定することでグラフ構造が浮き彫りになる感じです。
もっとピュンピュン動いて欲しいところですが、レンダリングアルゴリズムの見直しはまた今度。
*1:元データを作成するのに5分ぐらいかかります。(データ取得が大部分を占めていますが)。