Processing Example - Hierarchies

폴더의 Hierarchy 를 시각화하는 것이 필요해져서 급 찾아봤던 예제.

지금 HCI 특강을 듣고 있는 ㄱㄱ의 한 마디 덕분에 다시 들여다보게 되었다.

논문의 방향이 계속 바뀌고 있기 때문에 지금 시점에서는 사용중이지 않지만 (ㅜㅜ....) 제법 흥미로운 계층 시각화 예제 두 개.

Processing Example

Books > Visualizing Data > 

ch07-hierarchies > equator_03b

< equator_03b.pde >

import treemap.*;    // 트리맵 라이브러리 임포트

Treemap map;    // 트리맵 객체

void setup() 

{

  size(1024, 768);

  smooth();

  strokeWeight(0.25f);

  PFont font = createFont("Serif", 13);

  textFont(font);    // 폰트 추가는 생각보다 간단함

  WordMap mapData = new WordMap();    // 월드맵 클래스 참고

    

  String[] lines = loadStrings("equator.txt");    // equator.txt 파일에는 단어들이 엔터를 기준으로 구분되어 있음

  for (int i = 0; i < lines.length; i++)    // equator.txt 파일의 줄 수에 따라(엔터를 기준으로) 구분하여 애드워드!!

 {    

    mapData.addWord(lines[i]);

  }

  mapData.finishAdd();

    //Different choices for the layout method

    //MapLayout algorithm = new SliceLayout();

    //MapLayout algorithm = new StripTreemap();

    //MapLayout algorithm = new PivotBySplitSize();

    //MapLayout algorithm = new SquarifiedLayout();

  map = new Treemap(mapData, 0, 0, width, height);

  // only run draw() once

  // draw() 부분을 한 번만 실행시킬 때 필요한 부분

  noLoop();

}

void draw()

{

  background(255);

  map.draw();

}

< WorldMap.pde >

class WordMap extends SimpleMapModel 

{    

  HashMap words;    // HashMap = Array 와 유사한 개념

    

  WordMap()   

 {

    words = new HashMap();    // WordMap 객체 생성과 동시에 해시맵도 생성됨

  }

    

  void addWord(String word) 

  {

    WordItem item = (WordItem) words.get(word);

    if (item == null) 

   {

      item = new WordItem(word);    // 비어 있으면 word 넣기

      words.put(word, item);

    }

    item.incrementSize();    // 뭐지

  }

    

  void finishAdd() 

 {

    items = new WordItem[words.size()];

    words.values().toArray(items);

  }

}    

< WorldItem.pde >

class WordItem extends SimpleMapItem 

{

  String word;

  WordItem(String word) 

 {

    this.word = word;

  }

  void draw() 

 {

    fill(255);

    rect(x, y, w, h);

    fill(0);

    if (w > textWidth(word) + 6)    // 공간이 넉넉하면 단어를 적어주렴

   {

      if (h > textAscent() + 6) 

     {

        textAlign(CENTER, CENTER);

        text(word, x + w/2, y + h/2);

      }

    }

  }

}

트리맵에서 공간 분할이 어떻게 돌아가는지는 모르겠으나 재밌는 결과인듯

내 마음대로 수정

Processing Example

Books > Visualizing Data > 

ch07-hierarchies > filetreemap_06b

내 폴더를 읽어서 그 크기(확인)에 따라 화면을 분할해준다.

사실 이런 시각화는 꽤 보편적. 하지만 내 폴더로 하니 새롭게 느껴진다.

Travel_Backup 선택

또 하나의 폴더 선택

내부 이미지들