proce55ing-gr02 - ninja22 @ ウィキー

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);
    }
  }
 

---