[프로세싱(Processing) : 중급] 데이터 시각화와 인터랙티브 디자인

6. 데이터 시각화와 인터랙티브 디자인

 

6.1. 데이터 로드 및 가공

프로세싱에서 데이터를 로드하고 가공하는 방법을 학습합니다. CSV, JSON, XML 등 다양한 형식의 데이터를 불러오고 처리할 수 있습니다. loadTable, loadJSON, loadXML 등의 함수를 사용하여 데이터를 로드하고, 반복문과 조건문을 활용해 필요한 데이터를 추출 및 변환합니다.

 

Table data;

void setup() {
  data = loadTable("data.csv", "header");
  for (TableRow row : data.rows()) {
    int id = row.getInt("id");
    float value = row.getFloat("value");
    println("ID: " + id + ", Value: " + value);
  }
}

 

6.2. 2D 및 3D 데이터 시각화 기법

2D 및 3D 데이터 시각화 기법을 활용하여 데이터를 독창적으로 표현합니다. 간단한 막대 그래프, 원 그래프부터 3D 공간에서의 복잡한 시각화 기법까지 다룹니다. P3D 렌더러를 사용하여 3D 시각화를 구현할 수 있습니다.

 

void setup() {
  size(800, 600, P3D);
}

void draw() {
  background(255);
  translate(width / 2, height / 2);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, height, -PI, PI));
  
  for (int i = 0; i < data.getRowCount(); i++) {
    TableRow row = data.getRow(i);
    float value = row.getFloat("value");
    float z = map(value, 0, 100, -100, 100);
    pushMatrix();
    translate(0, 0, z);
    box(10, 10, 10);
    popMatrix();
  }
}

 

6.3. 인터랙티브 디자인 요소

사용자와 상호작용하는 인터랙티브 디자인 요소를 구현합니다. 마우스 및 키보드 입력, 터치 입력 등을 처리하고, 사용자의 행동에 따라 시각화 결과가 변경되도록 합니다. mouseClicked, keyPressed, touchStarted 등의 이벤트 함수를 사용하여 인터랙션을 처리합니다.

 

void mouseClicked() {
  println("Mouse clicked at " + mouseX + ", " + mouseY);
}

void keyPressed() {
  println("Key pressed: " + key);
}

 

6.4. 사용자 경험(UX) 고려

사용자 경험(UX)을 고려하여 인터페이스와 상호작용을 설계합니다. 사용자가 쉽게 이해하고 사용할 수 있는 시각화 및 인터랙션 요소를 만드는 방법을 배웁니다. 애니메이션, 효과, 색상, 배치 등의 디자인 요소를 효과적으로 활용하여 사용자가 직관적으로 이해할 수 있는 인터페이스를 구현합니다.

예를 들어, 사용자가 데이터 포인트에 마우스를 올렸을 때 툴팁이 나타나는 기능을 구현할 수 있습니다.

 

boolean showTooltip = false;
int tooltipX, tooltipY;
String tooltipText;

void draw() {
  background(255);
  
  // 데이터 포인트 그리기
  for (int i = 0; i < data.getRowCount(); i++) {
    TableRow row = data.getRow(i);
    int x = row.getInt("x");
    int y = row.getInt("y");
    float value = row.getFloat("value");
    fill(value);
    ellipse(x, y, 10, 10);
  }

  // 툴팁 그리기
  if (showTooltip) {
    fill(255);
    stroke(0);
    rect(tooltipX, tooltipY - 20, textWidth(tooltipText) + 10, 20);
    fill(0);
    text(tooltipText, tooltipX + 5, tooltipY - 5);
  }
}

void mouseMoved() {
  showTooltip = false;
  for (int i = 0; i < data.getRowCount(); i++) {
    TableRow row = data.getRow(i);
    int x = row.getInt("x");
    int y = row.getInt("y");
    float value = row.getFloat("value");
    float d = dist(mouseX, mouseY, x, y);
    if (d < 5) {
      showTooltip = true;
      tooltipX = mouseX;
      tooltipY = mouseY;
      tooltipText = "Value: " + value;
    }
  }
}

 

이렇게 사용자 경험(UX)을 고려한 인터랙티브 디자인을 통해 사용자에게 보다 직관적이고 편리한 인터페이스를 제공할 수 있습니다. 이러한 기술들을 응용하여 다양한 데이터 시각화 프로젝트를 구현해 보세요.