[javascript] P5.js에서 데이터를 시각화하는 방법을 알려주세요.

04 Dec 2023

javascript

P5.js는 데이터 시각화 작업을 수행하는 데 매우 효과적인 JavaScript 라이브러리입니다. 이 블로그 포스트에서는 P5.js를 사용하여 데이터를 시각화하는 방법에 대해 알아보겠습니다.

데이터 가져오기

P5.js에서 데이터 시각화 작업을 시작하기 전에 데이터를 가져와야 합니다. 즉, API 호출 또는 로컬 파일에서 데이터를 로드해야 합니다. 일반적으로 preload() 함수를 사용하여 데이터를 가져옵니다.

let data;

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

캔버스 설정

P5.js의 setup() 함수를 사용하여 시각화에 사용할 캔버스를 생성하고 초기 설정을 수행합니다.

function setup() {
  createCanvas(800, 600);
  // 캔버스 설정 및 초기화 작업
}

데이터 시각화

P5.js에서는 draw() 함수를 사용하여 데이터를 시각화합니다. 이 함수는 프레임마다 호출되므로 데이터가 실시간으로 업데이트되는 동적 시각화에 적합합니다.

function draw() {
  // 데이터 기반의 시각화 작업
}

시각화 작업은 두 가지 주요 방법으로 수행됩니다.

기본 도형 그리기

P5.js에서는 다양한 기본 도형을 생성하고 조작할 수 있습니다. 예를 들어, rect(), ellipse(), line()과 같은 함수를 사용하여 도형을 그릴 수 있습니다. 이러한 함수는 데이터에 따라 색상, 크기 및 위치 등을 동적으로 결정할 수 있습니다.

function draw() {
  background(0);
  
  for (let i = 0; i < data.length; i++) {
    let x = map(data[i], 0, 100, 0, width); // 데이터를 캔버스의 너비 범위로 변환
    let y = map(i, 0, data.length - 1, 0, height); // 인덱스를 캔버스의 높이 범위로 변환

    fill(255);
    ellipse(x, y, 10, 10);
  }
}

위의 예제는 데이터를 사용하여 캔버스에 원을 그리는 간단한 시각화를 보여줍니다.

그래프 그리기

데이터를 시각화하는 일반적인 방법 중 하나는 그래프를 그리는 것입니다. P5.js에서는 line() 함수를 사용하여 각 데이터 포인트를 연결하여 그래프를 그릴 수 있습니다.

function draw() {
  background(0);
  
  stroke(255);
  strokeWeight(2);
  
  for (let i = 1; i < data.length; i++) {
    let x1 = map(i - 1, 0, data.length - 1, 0, width);
    let y1 = map(data[i - 1], 0, 100, height, 0);
    let x2 = map(i, 0, data.length - 1, 0, width);
    let y2 = map(data[i], 0, 100, height, 0);

    line(x1, y1, x2, y2);
  }
}

위의 예제는 데이터를 사용하여 캔버스에 선 그래프를 그리는 방법을 보여줍니다.

실행하기

P5.js 코드를 실행하려면 HTML 파일에서 스크립트 태그를 사용하여 P5.js 라이브러리와 스크립트 파일을 로드해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

위의 HTML 코드에서 sketch.js는 위에서 작성한 P5.js 코드가 있는 파일입니다.

결론

P5.js를 사용하여 데이터 시각화를 수행하는 방법에 대해 알아보았습니다. 이제 데이터를 가져오고 캔버스를 설정하여 데이터를 시각화할 수 있습니다. P5.js는 다양한 도형 및 그래프 기능을 제공하여 데이터를 효과적으로 시각화할 수 있습니다. 추가적인 기능과 예제에 대해서는 P5.js 공식 문서를 참조하세요.

참고 문서

P5.js 공식 웹사이트