JSON からちょっといい感じのネットワーク図を描く

ネットワークの成長にあわせ，構成図を更新することはネットワーク運用の重要なタスクです．しかしながら 手動でやるせいで実際とズレてしまうケースは少なくありません．今回は JSON = ネットワーク構成情報 をもとに，ちょっといい感じに，しかも自動でネットワーク図を描く方法について紹介します．

必要なデータは「ノードA とノードB があります」「ノードA とノードB は繋がっ ています」程度の情報です．

Transcript

1. +40/
   ͔Β
   ͪΐͬͱ͍͍ײ͡ͷ
   ωοτϫʔΫਤΛඳ͘ ίʔμϯε
   খౡ
   ৻ଠ࿠
   !DPEFPVU
2. ࣮ݱ͍ͨ͜͠ͱ ネットワーク図 ほしいけど、
 描きたくない。 知らないところでやっといて。
3. ࠓ೔͸Ұา໨ { "nodes": [ { "name": "A" }, { "name": "B" }, ... ], "links": [ { "source": "A", "target": "B" }, ... ] } このくらいの
 ホント最低限の情報で ◦ これを描いてくれ 配置は適当に やっといて http://www.interop.jp/2016/shownet/highlight.html
4. ͏·͘഑ஔͯ͘͠Εͳ͍໰୊ まずはこれを⾒てほしい
5. ͍ΖΜͳϥΠϒϥϦʔͰ
 ඳ͍ͯΈΑ͏ POP02-bb01 POP02-bb02 POP02-ag01 POP02-ag02 POP03-bb01 POP03-bb02 POP03-ag01 POP03-ag02 POP01-bb01 POP01-bb02 POP01-ag01 POP01-ag02
6. 配置は適当に やっといて リロード → 配置が変わる graphviz d3.js (force layout) cytoscape ͍ΖΜͳϥΠϒϥϦʔͰ
 ඳ͍ͯΈΑ͏
7. ͏·͘഑ஔͯ͘͠Εͳ͍໰୊ • 配置いまいち • リロードごとに変わる
8. ղܾํ๏
   • 論⽂をあさった • グラフ理論 • オートレイアウト⼿法がある • 汎⽤的だが、パラメーター多い →複雑 • 学び • 配置のときに制約をつけると良いっぽい
9. ੍໿
   • ノードのグルーピング • 同じ拠点にあるノードは近くに • リンク距離 (ノード間の距離) • 似たノード間は短く
10. ੍໿
    ڌ఺ผʹϊʔυΛάϧʔϐϯά • どうやってグループ定義する？ • ノード名から推定する
 (トライ中) • とりあえずの案 = 正規表現 • ノード名のうち、拠点名部分を指定 • 命名規則はそう変わらない /^([^\s-]+)-/ POP01-bb01 ^^^^^
11. ੍໿
    ϦϯΫڑ཭ • グループ = 拠点内でも、似たノード 間は短く • 似たノード ?
 = 似たノード群に接続しているノード
 = 接続ノード集合 間の
 ジャッカード距離 が⼩さい
12. δϟοΧʔυڑ཭ https://en.wikipedia.org/wiki/Jaccard_index 1 2 3 4 5 6 ྫ
    
    ᶃ
    ᶅ
    ͷڑ཭
    ᶃ
    ͸
    <
    ᶅ
    ᶆ
    >
    ʹɺ
 ᶅ
    ͸
    <
    ᶃ
    ᶄ
    ᶆ
    ᶇ
    >
    ʹ
 ͭͳ͕͍ͬͯΔ
    ࿨ू߹
    <
    ᶃ
    ᶄ
    ᶅ
    ᶆ
    ᶇ
    >
 ੵू߹
    <
    ᶆ
    >
    
    
    
     0.8 0.67 1 ू߹ؒͷ
    ۙ͞
    Λදݱ
13. ࣮૷
    ͲͷϥΠϒϥϦʔ
    • graphviz • ⾔わずと知れた⽼舗ライブラリー • 制約を実装しづらい • d3.js (force layout / cola.ja) • 物理演算 • ノード間を伸縮する棒(リンク) でつなぐ • svg 出⼒ • cytoscape • d3.js の<canvas> 版 テキスト検索 できる
14. ࣮૷
    ০Γ෇͚ • ノードのアイコン変更 • メタデータを表⽰ • Javascript でON / OFF • リンク: ズーム時のみ表⽰
15. 4IPX/FU
    
    ͷ
    ωοτϫʔΫਤͰࢼ͢ • このあたりを
 JSON 化 • 定義するのは
 ノード + リンク
 のみ
 (メタデータは書く) http://www.interop.jp/2016/shownet/highlight.html
16. ͍͍ͷͰ͸
    
    
    ⽐較のため回転しています → http://www.interop.jp/2016/shownet/highlight.html
17. codeout/inet-henge https://github.com/codeout/inet-henge デモ: https://inet-henge.herokuapp.com/ TODO • ライブラリーとして整理する • API は変わるかも… • パラメーターの いいデフォルト値 • ネットワークにより ばらつきがある • 遅い → 演算の最適化 • いろんなネットワーク図 で試す