networkxとd3.jsでグラフを描画するwebサービス

目次

イントロ

こちらのサイトを見て、すごくいいなぁと思ったので似たようなのを作りました。
デザインや機能などは完全に劣化しています。でも楽しかったのでここにまとめようと思います。

使用言語：python、JavaScript
ライブラリ：networkx、d3.js、JQuery
フレームワーク：bottle

大まかな流れ

networkxとd3.jsがJSON形式で上手いこと連携とれるようになっていてとても便利。
d3.jsの描画能力がとても高いので使いこなせばかっこいいやつが作れそう。

実物

芋いが許してくれ・・・

頂点数、グラフの種類を選択して[showGraph]ボタンを押すと

はいドーン。

コード

gitに置いてます。
参考：
d3.js関係(グラフ描画に関するコードはほぼこちらのコードを使わせて頂きました。)
D3.jsのForce Layout (力学モデルでグラフ描画するレイアウト)を動かしてみた - カタカタブログ
JQuery関係
http://dotinstall.com/lessons/basic_jquery_v2
bottle関係
Pythonの軽量WebサーバBottleの使い方 - MyEnigma
Pythonの軽量Webフレームワーク「Bottle」 - Symfoware
networkx
NetworkX documentation — NetworkX 2.0.dev20161010012513 documentation(公式)

今後

• 公開する。
• twitterのアカウントからソーシャルグラフを描画する機能を実装する。
• 一回ボタン押すと以降反応してくれない不具合があるので、修正する。
• 描画したグラフで何か遊ぶ機能(ランダムウォークとか、そんな感じの)
• デザインをかっこよくする。