ページの繋がりの視覚化 (daiiz)
当日のこの発表について、倉下忠憲.iconさんが記事にしてくださいました。
こんばんは
Scrapbox実験コーナー
バックナンバー
今日はScrapboxプロジェクト内のページの繋がりを視覚化します
視覚化の簡単なルール
pageの繋がり
pageをnode、page動詞の参照関係をedgeとしたグラフ構造を考える
https://gyazo.com/d5b9429dcd5b97ebc7771399bbd603e4
pageの参照数、被参照数の合計
＝ 矢印の本数の合計
＝ 3
矢印の候補
[文中リンク]
#ハッシュタグ
空ページへの参照も含む
オレンジ色のリンク
存在しないけど関連ページは通るページ
ざっくり雰囲気
上下キーを押して、矢印数の閾値$ N (左下の数字) を変化させながらグラフを観察する様子
→ $ N個以上の繋がりを持つnodeを描画できる
https://gyazo.com/9bf7d7ffa1237d18f18e5bcf3221d25e
nodeをつまんで振ってみる
繋がっているページが大まかにわかる
摘んでいるpageに到達した人は、ページ内リンクや関連ページUIを辿っていれば繋がりの末端まで行ける、ということが大事 https://gyazo.com/4425b6fed312cb82b4e4086adc422365
のちほど実演
nodeをダブルクリックしてページを開ける
漠然と眺めてページを見つける体験
https://gyazo.com/27ef0dc910fdbd465be10456e2fb1b26
デモ
誰でも試せます🎉🎉🎉🎉🎉
昨日頑張った daiiz.icon
手順. 1
プロジェクトのページのjson dataをダウンロード
https://gyazo.com/6b7a5bbc1b297229d50b9eb37217b289
または、Settings > Page data画面から
https://gyazo.com/7591a3355bd0261eb4f444c0ea7e176c
手順. 2
Google Chromeでscrap graph を開く
先程入手したページデータを読み込む
グラフを描画するまでの処理はすべてclientで完結
network通信しないのでprivate projectも安心して試せる
https://gyazo.com/cf11bbb877101c23b5304d83085241b9
手順. 2
ページが多いプロジェクトでも (いまのところ) 問題なし
4900ページを与えても動いたので大丈夫
読み込み〜加工〜描画の待ち時間はConsoleを眺めていると退屈しない
https://gyazo.com/abd398b221ab87ea529f9878e979a526
デモ
https://gyazo.com/750fcfca435be7c85e384ea47a7d9723
デモで見えてくるもの
まだ繋がっていないページ
ランドマーク的なページ
いろんなpageと繋がっているページは大きな円 (ハブページ?)
複数人利用ケースと、個人利用ケースでのグラフの見た目の違い
アクティブな書き手ごとにクラスターができるイメージ
リンク、ハッシュタグを別々に見る
https://gyazo.com/dfa9bba9e3a1dd81117b13dc1bf18fdc
リンク
https://gyazo.com/19aa7010cf2dece28e8c026904ff6e5f
https://gyazo.com/939e1be136483ead63361983c36e4c9e
数個のハブページ
長く繋がっているパスが多い
小さい円同士も繋がっている傾向あり
ハッシュタグ
https://gyazo.com/77b7c700a4bf0aeccf4681aa557c72b1
https://gyazo.com/0bc8cf9b5b82229286f6443b63e8fa72
繋がりに広がりがない
ハッシュタグによる繋がりに頼るとハブページが孤立しやすい
まとめ
ハッシュタグ
ある程度のグループを作るのは得意
だが、それら同士は繋がりにくい
そのページに辿り着いても遠くまでは行けない
最初に思いついた小さな枠組みの中で無意識に分類しようとしている
無意識にページ内のタグ数を減らす方向に働く
所属グループをパッと思いつかないときはハッシュタグを書かなくなる
→ ページは繋がらなくなる
まとめ
リンク
深く考えずにページの文脈上キーワードや出来事を[リンク]で書いていくと
結果として繋がりやすい
文中リンクを使おう
文中リンクを使う方がよいという話
これらの裏付け的な図になったかも？
おもろそうjgs.icon