+40/͔Β ͪΐͬͱ͍͍ײ͡ͷ ωοτϫʔΫਤΛඳ͘ ίʔμϯεখౡ৻ଠ࿠ !DPEFPVU

࣮ݱ͍ͨ͜͠ͱ ネットワーク図 ほしいけど、
 描きたくない。 知らないところでやっといて。

ࠓ೔͸Ұา໨ { "nodes": [ { "name": "A" }, { "name": "B" }, ... ], "links": [ { "source": "A", "target": "B" }, ... ] } このくらいの
 ホント最低限の情報で ○ これを描いてくれ 配置は適当に やっといて http://www.interop.jp/2016/shownet/highlight.html

͏·͘഑ஔͯ͘͠Εͳ͍໰୊ まずはこれを⾒てほしい

͍ΖΜͳϥΠϒϥϦʔͰ
 ඳ͍ͯΈΑ͏ POP02-bb01 POP02-bb02 POP02-ag01 POP02-ag02 POP03-bb01 POP03-bb02 POP03-ag01 POP03-ag02 POP01-bb01 POP01-bb02 POP01-ag01 POP01-ag02

配置は適当に やっといて リロード → 配置が変わる graphviz d3.js (force layout) cytoscape ͍ΖΜͳϥΠϒϥϦʔͰ
 ඳ͍ͯΈΑ͏

͏·͘഑ஔͯ͘͠Εͳ͍໰୊ • 配置いまいち • リロードごとに変わる

ղܾํ๏ • 論⽂をあさった • グラフ理論 • オートレイアウト⼿法がある • 汎⽤的だが、パラメーター多い →複雑 • 学び • 配置のときに制約をつけると良いっぽい

੍໿ • ノードのグルーピング • 同じ拠点にあるノードは近くに • リンク距離 (ノード間の距離) • 似たノード間は短く

੍໿ڌ఺ผʹϊʔυΛάϧʔϐϯά • どうやってグループ定義する？ • ノード名から推定する
 (トライ中) • とりあえずの案 = 正規表現 • ノード名のうち、拠点名部分を指定 • 命名規則はそう変わらない /^([^\s-]+)-/ POP01-bb01 ^^^^^

੍໿ϦϯΫڑ཭ • グループ = 拠点内でも、似たノード 間は短く • 似たノード ?
 = 似たノード群に接続しているノード
 = 接続ノード集合 間の
 ジャッカード距離 が⼩さい

δϟοΧʔυڑ཭ https://en.wikipedia.org/wiki/Jaccard_index 1 2 3 4 5 6 ྫ ᶃ ᶅͷڑ཭ ᶃ͸<ᶅ ᶆ>ʹɺ
 ᶅ͸<ᶃ ᶄ ᶆ ᶇ>ʹ
 ͭͳ͕͍ͬͯΔ ࿨ू߹<ᶃ ᶄ ᶅ ᶆ ᶇ>
 ੵू߹<ᶆ> 0.8 0.67 1 ू߹ؒͷۙ͞Λදݱ

࣮૷ͲͷϥΠϒϥϦʔ • graphviz • ⾔わずと知れた⽼舗ライブラリー • 制約を実装しづらい • d3.js (force layout / cola.ja) • 物理演算 • ノード間を伸縮する棒(リンク) でつなぐ • svg 出⼒ • cytoscape • d3.js の 版 テキスト検索 できる

࣮૷০Γ෇͚ • ノードのアイコン変更 • メタデータを表⽰ • Javascript でON / OFF • リンク: ズーム時のみ表⽰

4IPX/FUͷ ωοτϫʔΫਤͰࢼ͢ • このあたりを
 JSON 化 • 定義するのは
 ノード + リンク
 のみ
 (メタデータは書く) http://www.interop.jp/2016/shownet/highlight.html

͍͍ͷͰ͸ ⽐較のため回転しています → http://www.interop.jp/2016/shownet/highlight.html

codeout/inet-henge https://github.com/codeout/inet-henge デモ: https://inet-henge.herokuapp.com/ TODO • ライブラリーとして整理する • API は変わるかも… • パラメーターの いいデフォルト値 • ネットワークにより ばらつきがある • 遅い → 演算の最適化 • いろんなネットワーク図 で試す