fc2ブログ
    フリーソフトで3分で描くユークリッド原論の命題関連図/人文系のためのグラフ表現 フリーソフトで3分で描くユークリッド原論の命題関連図/人文系のためのグラフ表現 読書猿Classic: between / beyond readers このエントリーをはてなブックマークに追加
    の続きである。


    クリッカブルなチャートをつくる

    先の記事で消化した、グラフ(有向グラフとかダイアグラムとか)を記述するための言語、dot言語で書いたスクリプトの中にはURLを埋める事ができる。


     digraph{

     //ノードにリンクをつける

     孔子 [href="http://ja.wikipedia.org/wiki/孔子"];
     子路 [href="http://ja.wikipedia.org/wiki/子路"];

     //エッジにリンクをつける

     孔子 -> 子路 [label = "師弟関係", href="http://ja.wikipedia.org/wiki/師弟" ];

     }


    dot言語で書かれたスクリプトを、グラフに変換する(図示する)ソフトGraphvizで、描かれたダイアグラムをクリックすると、リンク先のサイトがブラウザで開かれる。
    またsvgかpdfで書き出したファイルでも、このリンクは生きている。



    このブログからだと直接飛べないようなので、上の画像をクリックして別窓で開いてから、図の中の「孔子」「子路」「師弟関係」をそれぞれクリックしてほしい。


     この機能を使えば、たとえば論文の参照関係を示す有向グラフに、それぞれの論文へのリンクをつけることが出来る。例は、オピオイド(モルヒネ様物質)受容体についての初期研究の参照関係を表すネットワーク図(原論文へのリンク付き)。

    (クリックで別窓にsvgファイルが開くので、そこでノードをクリックすると原論文が開く)



     前の記事の最後に書いた対戦型哲学史 対戦型哲学史 このエントリーをはてなブックマークに追加についても、クリッカブルなネットワーク図に、登場するすべての哲学者とその間の全対戦をまとめてみた。


    fight-map.png
    (上の図は一部。クリックで別窓に全体図が表示)


    哲学者の名前をクリックするとその哲学者が参加する全対戦リストが表示され、哲学者同士をつなぐエッジにつけられた対戦タイトル(たとえば老子とF.ベーコンとの間なら「技術とユートピア」というのがそれ)をクリックすると、当該対戦のカードが表示される。

     この機能をつかえば、
    これまで地上に現れたすべての思想ideasのつながりを1枚にまとめたインフォグラフィック 読書猿Classic: between / beyond readers これまで地上に現れたすべての思想ideasのつながりを1枚にまとめたインフォグラフィック 読書猿Classic: between / beyond readers このエントリーをはてなブックマークに追加
    で出てきた思想家マップに、はてブコメントにあった、各思想家からのWikpediaへのリンクをつけられそうだ。やってみたのが下のもの。

    AllInflu.png
    (上の図は一部。クリックで別窓にdocs.google.comにて全体図が表示)
    docs.google.comに上げてみたが、大きすぎるので、ちゃんと見るためには左上の↓をクリックしてpdfファイル(All Influences Wikipedia.pdf 1.4MB)をダウンロードした方がよい。思想家名からWikpediaへのリンクつき。検索が効いて思想家を探すこともできる。


    Graphviz自体には、思想家マップをつくるときにつかったGephiのような、結びつきの多寡に応じてノードの大きさを変えるような機能がない(やるならスクリプトの中で指示しなくてはならない)ので、あれほど見やすくは作れなかった。ネットワーク分析のソフトで解析した結果を使って、スクリプト自体を作るべきだろう。




    考える道具としてのdot言語 / Graphviz

     dot言語 / Graphvizをつかったダイアグラム作成は、Visioなどを使ったダイアグラム描きと、ネットワーク分析との、いわば中間に位置する。

     デザインの自由度やそのための操作性という点ではダイアグラム作成ソフトに劣る。
     またグラフの構造に関する指標に応じてノードを分類したり表示を変える機能に十分でなく、大量のデータを可視化することではネットワーク分析ソフトに比べて見劣りする。

     しかしダイヤグラム作成にかかる手間は最も少なく、ほとんど自動生成といっていいレベルにある。
     この特徴は、元になるデータに更新・修正がある場合に都合がよい。
     ソースコードを元にチャートをつくったり、動的データをダイヤグラムとして表示するケースなどがこれに当たる。

     今ここに自分のアタマから湧き出るアイデアもまた、更新・修正が繰り返されるデータの例に付け加えることができる。
     dot言語では、どの要素同士が結びつくかを列挙する形式(隣接リスト)で、グラフ構造を記述する。つまり要素の相互連関を分散的に記述でき、全体的にどうなるかを考える必要は無い。
     dot言語で書いたスクリプトをエディタで書き換えながら、Graphvizの上で更新されるチャートからフィードバックを得る。
     少数の要素を付け加えたり変更することで、グラフ構造の全体が(時に我々の直観を超えて)大きく変化することがあるが、どんなレイアウトにするかはコンピュータに丸投げできることで、可視化によるフィードバックを得ながら、要素を付け加えたり結びつけていくことができる。
     このとき、直観だけで扱うには複雑な構造について考えるための、すぐれた思考支援ツールを我々は使っていることになる。
     
     この「dot言語で書いたスクリプトをエディタで書き換え」というプロセスを、よりルック&フィールなインターフェイスに置き換えたものが、iPhone/iPadアプリの「Instaviz」である。


    Instaviz App

    カテゴリ: ビジネス

    価格: ¥850



     なにもないところに指先で丸を描けば丸い、四角を描けば四角のノードが生成される。
     ノードからノードへ指を滑らせれば、ノードの間にエッジで結ばれる。
     そして、それらのレイアウトは、ノード間の接続関係に基いて自動的に再配置される。
     下の動画にあるように、新たに要素を付け加えたり結びつけていくことで、リアルタイムでグラフ構造が組み替えられていく。
     もちろんdot言語をインポートでき、Graphvizのファイル形式(Graphviz GV)でエクスポートできる。




     
     Visioを使う人が伝えるべきことが伝わるようなレイアウトを工夫し、ネットワーク分析を行う研究者がデータの構造を掴み取ろうとして、それぞれ試行錯誤するように、dot言語/GraphvizあるいはInstavizに向かう者は、アイデアを生み出し結びつけ、自身の直観を超えた何かが組み上がることを目指して、試行錯誤する。

     それは〈発見的〉なものとでも言うべきものであり、つまりdot言語/GraphvizあるいはInstavizを使うのは、描こうとしているものが、どのようなものか分かっていない、むしろそれを知りたいという場合である。






    ※ Graphvizは、AT&T研究所が開発した、オープンソースのグラフ(ダイヤグラムや有向グラフ)描画ツール。
    dot言語で書かれたスクリプト(テキストファイル)からグラフをつくり、png、svgなどを生成するツール(出力できるフォーマットはこちら)。

      Graphviz本家のホームページのダウンロード http://www.graphviz.org/Download..php
        (Linux, Windows, Mac OS X用)


      日本語での解説は、
      Graphviz チュートリアル http://homepage3.nifty.com/kaku-chan/graphviz/
      dotを使ったグラフ描画 http://www.cbrc.jp/~tominaga/translations/graphviz/dotguide.pdf


     エウクレイデス(ユークリッド)『ストイケイア(原論)』の、命題間の関係を図に描け、というのが昔々宿題に出た。
     第一部だけだったが、すべて手で描いたから(どこにどの命題を配置すると分かりやすいのか、いろいろ試行錯誤して)、ひどくめんどくさかったことを覚えている。
     
     今ならパソコンでちょちょいのちょいだろうな、と昭和の言い回しで考えたが、長いこと実際にはやってみなかった。
     
     手で描くのが勉強になるのだと、またお目玉(これも近頃聞かなくなった)をくらいそうだが(今でもこんな宿題を出してくれる、素敵な先生ごめんなさい)、やってみたら3分でできた。

    euclid1.png
    (クリックで拡大)



     なんのことはないdot言語とGraphviz を使ったのだが、言語というほどの面倒も無い。


    ※ Graphvizは、AT&T研究所が開発した、オープンソースのグラフ(ダイヤグラムや有向グラフ)描画ツール。
    dot言語で書かれたスクリプト(テキストファイル)からグラフをつくり、png、svgなどを生成するツール(出力できるフォーマットはこちら)。

      Graphviz本家のホームページのダウンロード http://www.graphviz.org/Download..php
        (Linux, Windows, Mac OS X用)


      日本語での解説は、
      Graphviz チュートリアル http://homepage3.nifty.com/kaku-chan/graphviz/
      dotを使ったグラフ描画 http://www.cbrc.jp/~tominaga/translations/graphviz/dotguide.pdf




     aとbを繋ぎたいなら


      digraph{a -> b;}  





    とつなぎたいものを間に、-> を挟めばいい。
     
     たくさんのノードを繋ぎたいなら、graph {  }の間に、セミコロンで区切って何行でも書けばいい。


     digraph {
     
     公準3 -> 定理1;  
     公準1 -> 定理1;  
     定義15 -> 定理1;  
     公理1 -> 定理1;  
     公準1 -> 定理2;  
     ・・・・・
     (以下略)

     }




    下のように、チェーン状のつながりを1行にまとめることもできる。


     digraph{

     a -> b -> c -> d  

     }

      




    下のように{ }でくくってまとめてもよい。{ }内の要素はスペースで区切る。


     
     digraph {

     {公準3 公準1 定義15 公理1} -> 定理1;
     公理2 -> {定理2 定理3 定理5} ;

     }

    sample-dot.png







    これをテキストファイルとしてセーブすれば、人間がやることは完了である。

     あとはGraphvizに件のテキストファイルを渡してやればよい。
     各定理ごとにバラバラに入れていっても、うまくまとめたり配置したりして、さっきみたいなのを描いてくれる。


     あまりに楽だったので、スピノザに『エチカ』(幾何学的秩序にしたがって論証された倫理学 Ethica ordine geometrico demonstrata)の第1部(神について)についてもやってみた。

    Ethica1.png
    (クリックで拡大)




     昔作った「対戦型哲学史 対戦型哲学史 このエントリーをはてなブックマークに追加」の、すべての対戦関係を一枚にまとめた図もつくってみた。

     
    philofight.png
    (クリックで拡大)



     同じ哲学者の間を複数の線が結んでいるのは、いくつもの対戦が行われているからである。
     孤立しているのは、そのあたりの哲学者たちを結びつける対戦がまだ書けてないからである。
     新しい対戦を追加すれば、自動的に対戦相関図を更新する仕組みも、すぐに作れそうだが、今は取り掛かる時間がない。


    直観を超えた何かが組み上がることを目指して→考える道具としてのdot言語 / Graphviz 読書猿Classic: between / beyond readers 直観を超えた何かが組み上がることを目指して→考える道具としてのdot言語 / Graphviz 読書猿Classic: between / beyond readers このエントリーをはてなブックマークに追加へつづく)



    (関連記事)
    フリーソフトですべての思想ideasのつながりを1枚にまとめたインフォグラフィックがびっくりするくらい簡単に描けた 読書猿Classic: between / beyond readers フリーソフトですべての思想ideasのつながりを1枚にまとめたインフォグラフィックがびっくりするくらい簡単に描けた 読書猿Classic: between / beyond readers このエントリーをはてなブックマークに追加

    前回の記事

    これまで地上に現れたすべての思想ideasのつながりを1枚にまとめたインフォグラフィック 読書猿Classic: between / beyond readers これまで地上に現れたすべての思想ideasのつながりを1枚にまとめたインフォグラフィック 読書猿Classic: between / beyond readers このエントリーをはてなブックマークに追加

    の、少しだけ補遺。

     哲学者、文学者、芸術家やその他もろもろ、数千の思想家の間の影響関係をひとつのチャートにマッシュアップしたGraph of Ideas
     実は、これをつくったBrendan Griffenは、影響を与えた者と影響を受けた者をコンマで区切っただけのcsvファイルだけれど、元になったデータを公開してくれている。


    All Influences Wikipedia.csv

    さらにGriffenがつかったネットワーク可視化・分析ソフトGephiは、ほとんどマウス操作だけで、巨大/美麗なネットワークグラフが描けて、おまけにオープンソースソフトウェアで、日本語サイトやチュートリアルまである。


    Gephi

    ・本家サイト https://gephi.org/
    ・日本語サイト http://oss.infoscience.co.jp/gephi/gephi.org/
    (・ユーザーインタフェースの説明 ・サポートされているグラフ形式

    ・日本語チュートリアル クイックスタート ←まずはこれだけ
    (・日本語チュートリアル 可視化


    Gephiをダウンロード

     最新の安定版 Gephi 0.8 Alpha
     最新のベータ版(こちらはメニュー等日本語化されてる。後述のSemantic Web Import pluginを使うにはこちらが必要)
     Version 0.8.1-beta https://gephi.org/users/download/




    何かのフラグが立ったような気がしたので、Gephiをダウンロードして、件のcsvファイルを流し込んでみた。
    (・CSV データのインポート

     この記事は、ネットワーク可視化・分析ソフトの紹介ではなく、はじめてソフトに触った素人による、その敷居の意外な低さ(チュートリアルをみただけでできること)についての証言である。



    1 ファイルを取り込むとグラフが描かれる

     次のが、ただファイルメニューから「開く...」でcsvファイルを開いたところ。
    ノード数3594(これが思想家の数)、辺(エッジ)数5011(これが影響関係の数)のネットワークがとりあえず描けた。

    NetGraph1.png

    (クリックで拡大)



    2 メジャーな思想家を選び出す

     これだけだと配置はバラバラだし、ぎっしり詰め込んだだけなので、各ノードのラベル(思想家の名前)を表示しようものなら、とても読めない。
     各ノードをばらけさせようかと思ったが、所詮は絵に過ぎなかったZoom.Itとは違い、せっかくネットワーク・データを取り扱えるソフトに取り込んだのだから、いろいろいじってみることにする。

     まず他の多くの思想家と影響関係を取り結んでいるメジャー思想家だけをピックアップしてみよう。

     フィルタ機能をつかって、「トポロジ」の中の「出次数範囲」をドラッグしてクエリーにぶち込む。
    すると「出次数範囲 設定」というスライドバーが出るからこれを調整する。
     たとえば「出次数範囲20以上」を選んでフィルタボタンを押すと、20人以上の思想家に影響を与えている思想家だけが選び出される。
     するとノード数で24まで絞り込まれ、影響数の特に多い思想家24人が選び出される。

     思想家名を表示すると、文字の重なりがあって読みにくいから、「レイアウト機能」の「ラベルの調整」をつかって重ならないようにしよう。

    NetGraph2.png

    (クリックで拡大)



     そこそこのメンバーが選出された。
     ジョージ・カーリンとレニー・ブルース、それとスティーブ・マーティンとコメディアンたちが孤立しているが、気にせず次へ行こう。



    3 特定の思想家とつながりある者だけを表示する

    「ロールズがいない」とつぶやいていた人がいたので、John Rawlsと彼と影響関係がある思想家を「フィルター機能」の「エゴ・ネットワーク」で選び出そう。
     まずは画面上部の「データ工房」を押し、フィルタに「Rawls」と入力して、ノードに彼がいることを確認する。再び「概観」タブに戻り、「トポロジ」の中の「エゴ・ネットワーク」をドラッグしてクエリーにぶち込む。ノードのIDにはさっき確認した「John Rawls」を入力、深さを「1」にして、フィルタボタンを押す。すると、7つのノードが選ばれた。

    NetGraph3.png

    (クリックで拡大)



     これを深さを「2」にして、影響のある者とさらに影響がある者まで選ぶと、ノード数は一気に95まで増える。
     そのままだと肝心のロールズが埋もれてしまうので着色+大きさを拡大し、ロールズと直接関係がある者も着色した。

    NetGraph3-1.png



    4 すべての思想家を配置したマップを描く

    では、最後に各ノードを適当にバラけさせて、我々の思想家マップをつくってみよう。

    (1)まず結びつきの情報を使って、ノードを分類して色分けする。
    「統計」機能から「モジュラリティ」(コミュニティ検出)を実行する。そえから「パーティション」機能から、ノードタブを選んで、矢印が循環したマークの更新ボタンを押す。するとポップアップメニューがアクティブになってパーティションパラメータを選択できる。今、計算したModularity Classが選択でいるからこれを選んで、適用ボタンを押すと、ノードの色分けがなされる。

    NetGraph4.png

    (クリックで拡大)



    (2)レイアウト機能を使って、ノードをばらけさせて配置する。「レイアウトを選択」のポップアップメニューからForceAtlas2を選び、クラスタリングがより強くかかるLinLogモードにチェックを入れて実行ボタンを押すと、ノードが互いに遠ざかっていく。配置が落ち着いたら中止ボタンを押して止める。

    (3)ノードごとに軽重をつけよう。ランキング機能からノードタブを選び、ランクパラメータを選択というポップアップメニューから「次数」を選択。右から3番目の下向き▽のアイコンをクリックして、ノードの大きさを決める。最小サイズ10、最大サイズ200にして、適用ボタンを押す。

    (4)グラフウインドウの右下にある「T」を押すとラベル(ここでは思想家の名前)が表示される。中央の右側の「A」(サイズモード)からNode Sizeを選ぶと、大きなノードのラベルは大きく、小さいノードのラベルは小さく表示される。その右隣のスライドバーで、全体の文字の大きさが調節できる。

    (5)最後に画面上部の「プレビュー」を押すと、出力用のグラフが得られる。画面右下のエクスポートボタンで、SVG/PDF/PNGへ出力できる。

    NetGraph5.png

    *(おまけ)上のグラフのsvgファイルpdfファイル


     本当はもう少し手を加えて見やすくすべきだが、少ない手間でここまで描くことができる。



    ※ほんとはGephiでつくった(絵ではなく)インタラクティブなネットワーク図(ウェブ上で拡大したりドラッグできる)を公開できるのだが(たとえば、gexf-jsとかsigma.jsを使えば)ちょっとそこまでやれなかった。

    ・gexf-jsの例 ユーゴー「レ・ミゼラブル」の登場人物の相関関係
    ・sigma.jsの例 Hanzi Network / 汉字网



    (補遺の補遺)

     ここまで来れば、データさえあれば、思想家マップの日本語版だって簡単にできそうに思える。

     そう、データさえあれば。

     そういえばGriffen氏は、DBpedia(http://dbpedia.org/sparql)経由でWikipediaのデータを手に入れた、と書いていた(実はGephiには、DBpediaにも対応した、データを直接引っ張って来れるSemantic WebI mportというプラグインがある。データを得る具体的な方法は、次の記事How to Use Gephi to Visualize Related Entries in Wikipedia が参考になる。)。

    本家のDBpediaは主にWikipedia英語版を対象としているが、DBpediaならば日本語版(http://ja.dbpedia.org/)だってある。 これはWikipedia日本語版を対象としていたはずだ。

    すでに時間切れだが、http://ja.dbpedia.org/sparqlから、いろんな意味で最低限のQueryでもって、ウィキペディア日本語の「影響を与えた人物」の項があるものを引っ張ってきて、Gephiに流し込んでみたのが最後にあげたグラフ。


    J-LastGraph.png

    (クリックで拡大)