심화 개념 1 — map()으로 데이터를 시각 요소에 매핑하기

map() 복습

5주차에서 한 번 만났던 함수입니다.

map(value, start1, stop1, start2, stop2)

한 범위의 숫자를 다른 범위로 환산하는 함수입니다. 5주차에선 mouseX(0~400)를 색상값(0~255)으로 바꿨습니다. 마우스를 오른쪽으로 보내면 색이 밝아지는 구조였습니다.

오늘 바뀌는 것은 입력값 하나뿐입니다. mouseX 대신 데이터의 숫자를 넣습니다.

데이터 매핑이 뭔지 한 표로

첫 번째 시각화 — 인구로 원 크기 결정

1교시에서 만든 data.json을 그대로 사용합니다. 이번엔 콘솔이 아니라 화면에 그립니다.

let cityData;

function preload() {
  cityData = loadJSON("data.json");
}

function setup() {
  createCanvas(500, 400);
  background(240);
  noLoop();

  let cities = cityData.cities;
  for (let i = 0; i < cities.length; i++) {
    let city = cities[i];

    let x = map(i, 0, cities.length - 1, 80, width - 80);
    let y = height / 2;
    let size = map(city.population, 0, 10000000, 20, 150);
    let bright = map(city.population, 0, 10000000, 100, 255);

    fill(bright, 100, 150, 200);
    noStroke();
    ellipse(x, y, size);

    fill(0);
    textAlign(CENTER);
    textSize(12);
    text(city.name, x, y + size / 2 + 18);
  }
}

구조는 1교시 for문 그대로입니다. let city = cities[i]로 i번째 도시를 받고, 안에서 map을 세 번 부르는 형태입니다.

핵심 줄을 짚어 봅니다.

• x = map(i, 0, cities.length - 1, 80, width - 80) — 인덱스 → 가로 위치. 5개 도시가 화면에 균등 분포
• size = map(city.population, 0, 10000000, 20, 150) — 인구 → 원 크기. 서울은 거의 150, 광주는 40 근처
• bright = map(...) — 인구 → 빨강 성분. 인구가 많을수록 붉은빛이 강해짐
• noLoop() — 정적 시각화이므로 draw() 반복을 멈춤. 한 번만 그리고 끝

실행하면 5개 도시가 인구 크기에 따라 다른 원으로 일렬 배치됩니다. 서울이 압도적으로 큰 것이 한눈에 보입니다. 이것이 데이터 시각화의 가장 기본 형태입니다.

심화 개념 2 — CSV로 막대 차트 만들기

이번엔 CSV 데이터를 막대 그래프로 그립니다. 같은 데이터, 다른 표현입니다.

왜 막대 차트인가

원 크기로 표현하면 직관적이긴 하지만, 정확한 비교는 어렵습니다. ’서울이 광주의 몇 배인지’는 원 크기만으로 잘 잡히지 않습니다. 막대는 길이가 곧 수치라서 비교가 더 명확합니다.

코드 — 막대 차트 전체

let table;

function preload() {
  table = loadTable("data.csv", "csv", "header");
}

function setup() {
  createCanvas(500, 400);
  background(240);
  noLoop();

  let rowCount = table.getRowCount();
  let slot = width / (rowCount + 1);

  for (let r = 0; r < rowCount; r++) {
    let name = table.getString(r, "name");
    let pop = table.getNum(r, "population");

    let x = (r + 0.5) * slot;
    let barHeight = map(pop, 0, 10000000, 0, height - 100);
    let barWidth = slot * 0.6;

    fill(70, 130, 180);
    noStroke();
    rect(x, height - 40 - barHeight, barWidth, barHeight);

    fill(0);
    textAlign(CENTER);
    textSize(11);
    text(name, x + barWidth / 2, height - 22);
    textSize(9);
    text(nf(pop, 0, 0), x + barWidth / 2, height - 48 - barHeight);
  }

  fill(0);
  textSize(16);
  textAlign(CENTER);
  text("한국 주요 도시 인구", width / 2, 30);
}

핵심 짚기

이전 코드와 비교해서 새로 들어온 것이 두 가지입니다.

(1) 슬롯 폭 계산.

let slot = width / (rowCount + 1)로 캔버스 가로를 6등분(=행 5개 + 여백 1)했습니다. 각 막대는 자기 슬롯의 60%만 차지하니까 사이 간격이 자동으로 생깁니다.

(2) nf() — 숫자 포맷팅.

nf(pop, 0, 0)은 숫자를 보기 좋게 출력하는 함수입니다. 9736027을 그대로 다루면 읽기 부담이 있는데, 소수점 없이 정수 형태로 깔끔하게 표시해줍니다. 세 자리 콤마는 아직 안 들어가지만, 데이터 시각화에서 자주 쓰는 유틸입니다.

막대 높이 계산도 다시 봅니다. barHeight = map(pop, 0, 10000000, 0, height - 100). 인구 0이면 막대 길이 0, 1000만이면 height-100까지. 막대는 화면 아래(height - 40)에서 시작해서 위로 자랍니다. 그래서 rect(x, height - 40 - barHeight, ...)로 좌상단 좌표를 빼주는 것입니다.

실행하면 막대 5개가 도시 순서대로 나란히 그려집니다. 서울의 인구가 다른 도시보다 훨씬 크다는 점이 길이로 확연히 보입니다. 원 크기로는 잘 안 보였던 비교가 막대에서는 또렷해집니다.

심화 개념 3 — 같은 데이터, 예술적으로 — 나선 배치

지금까지는 데이터를 정보 전달 목적으로 시각화했습니다. 이번엔 같은 데이터를 느낌으로 표현합니다. 막대 차트처럼 정확한 비교가 목적은 아니지만, 이미지의 인상이 더 강하게 남는 표현입니다.

아이디어 — 나선 위에 도시 배치

5개 도시를 가로로 줄 세우는 대신, 원형으로 둘러서 배치합니다. 9주차 sin()/cos() 기억나죠? 그때 원 위의 점 좌표를 구했었습니다.

x = centerX + cos(angle) * radius
y = centerY + sin(angle) * radius

각 도시마다 angle을 다르게 주면 원 둘레에 점이 찍힙니다. 거기에 radius도 도시마다 다르게 주면, 원이 아니라 나선처럼 흩어집니다.

코드 — 나선 데이터 아트

let cityData;

function preload() {
  cityData = loadJSON("data.json");
}

function setup() {
  createCanvas(500, 500);
  background(20);
  noLoop();
  colorMode(HSB, 360, 100, 100, 100);

  let cities = cityData.cities;
  let centerX = width / 2;
  let centerY = height / 2;

  for (let i = 0; i < cities.length; i++) {
    let city = cities[i];

    let angle = map(i, 0, cities.length, 0, TWO_PI);
    let radius = map(city.area, 500, 1100, 60, 200);
    let size = map(city.population, 0, 10000000, 20, 100);
    let hue = map(i, 0, cities.length, 0, 360);

    let x = centerX + cos(angle) * radius;
    let y = centerY + sin(angle) * radius;

    stroke(hue, 70, 90, 40);
    strokeWeight(1);
    line(centerX, centerY, x, y);

    noStroke();
    fill(hue, 70, 90, 60);
    ellipse(x, y, size);
  }
}

핵심 짚기

한 줄 한 줄 매핑이 데이터에서 시각으로 어떻게 번역되는지 봅니다.

colorMode(HSB, 360, 100, 100, 100) — 색상을 RGB가 아니라 HSB(색조·채도·명도)로 다루겠다고 선언하는 줄입니다. hue를 각도(0~360)로 직접 다룰 수 있어서 무지개 그라데이션이 쉽습니다.

중심에서 점까지 선 그리기 — line(centerX, centerY, x, y). 데이터가 중심에서 뻗어나가는 줄기처럼 보이게 해주는 시각 장치입니다.

실행하면 어두운 배경 위에 다섯 색의 원이 나선처럼 흩어지고, 중심에서 가는 선이 뻗어 나옵니다. 같은 인구 데이터인데, 막대 차트와는 완전히 다른 인상입니다. 정확한 비교는 어렵지만, 보고 있으면 ’서울이 무겁고 색이 강하다’는 느낌이 남습니다. 이것이 데이터 아트에 가까운 표현입니다.