※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

Processingでgraph 02


『ビジュアライジング・データ Processingによる情報視覚化手法』


を見ながらグラフを書いてみようと思います。
参考:pp.239-245



使うもの: Processing


  • ここでは、ハックルベリーフィンの物語に用いられている単語を視覚化します。単語と単語が隣同士の場合に、エッジを描きます。
出来上がりはこんなんです。ゴチャゴチャしています。

  • 作り方
(1) http://www.benfry.com/writing/graphlayout/huckfinn.txtからダウンロードしたテキストを、
(2) 「Sketch」>「Add file...」で選択します。
(3) 前回のプログラムにちょっと変更を加える。
→プログラムはこちら

  • はまりやすい?エラー
"phrase"を"phrases"と書いてるのに気付かなかった…



◆ ◆ ◆

  • 次に、ノードを四角の中に単語名を記述するのではなく、単なる丸で表現します。こんなんなります。シンプル、だけど何を表しているのやら。

  • 作り方
(1) 先ほどのプログラム中、Nodeクラスのdraw() を以下のように書き換えます。これは一番下にあります。
void draw(){
  fill(nodeColor);
  stroke(0);
  strokeWeight(0.5);
  ellipse(x, y, 6, 6);
}
 



◆ ◆ ◆

  • 単なる丸で表現したのでは、何が何だかなので、クリックしたところだけ単語を表示することにしますと、こんなんなりました。(ちなみに右クリックで固定解除)
意外とモゾモゾしてておもろいです。

  • 作り方
(1) 同様に先ほどのプログラム中、Nodeクラスのdraw() を以下のように書き換えます。
void draw(){
    if (fixed){
      fill(nodeColor);
      stroke(0);
      strokeWeight(0.5);
 
      rectMode(CORNER);
      float w = textWidth(label) + 10;
      float h = textAscent() + textDescent() + 4;
      rect(x - w/2, y - h/2, w, h);
      fill(0);
      textAlign(CENTER, CENTER);
      text(label, x, y);
    } 
    else {
      fill(nodeColor);
      stroke(0);
      strokeWeight(0.5);
      ellipse(x, y, 6, 6);
    }
  }