[javascript] Paper.js로 사용자 정의 데이터 시각화 차트 만들기

01 Dec 2023

javascript

Paper.js는 HTML5 캔버스를 기반으로 동작하는 벡터 그래픽 라이브러리입니다. 이 라이브러리를 사용하면 사용자 정의 데이터 시각화 차트를 만들 수 있습니다. 이번 블로그 포스트에서는 Paper.js를 이용하여 간단한 선 그래프를 그리고 데이터를 시각화하는 방법에 대해 알아보겠습니다.

Paper.js 설치하기

Paper.js를 사용하기 위해 먼저 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 Paper.js를 설치합니다.

npm install paper

Paper.js로 선 그래프 그리기

Paper.js를 사용하여 선 그래프를 그리려면 기본적으로 점과 선을 사용해야 합니다. 먼저 Paper.js를 HTML 문서에 추가합니다.

<script src="https://unpkg.com/paper"></script>

그런 다음 JavaScript 코드에서 Paper.js를 초기화하고 선 그래프를 그립니다.

var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

var data = [10, 20, 30, 40, 50];

// 변수들을 설정하고 선을 그리는 함수를 생성합니다.
function drawChart(data) {
    var startPoint = new paper.Point(50, 150);
    var path = new paper.Path(startPoint);
    var stepSize = 50;

    for(var i = 0; i < data.length; i++) {
        var nextPoint = startPoint.add([stepSize, -data[i]]);
        path.lineTo(nextPoint);
        startPoint = nextPoint;
    }

    path.strokeColor = 'black';
    path.strokeWidth = 3;
}

drawChart(data);

위의 코드에서 myCanvas라는 id를 가진 HTML 캔버스 요소에 그래프를 그리고 있습니다. data 배열은 그래프에 표시할 데이터를 나타냅니다. drawChart 함수는 data를 기반으로 그래프를 그리는 역할을 합니다. 각 데이터 포인트는 이전 데이터 포인트의 오른쪽으로 stepSize만큼 이동한 위치에 그려집니다.

Paper.js로 데이터 시각화하기

Paper.js를 사용하여 데이터를 시각화하는 방법은 다양합니다. 선 그래프 외에도 막대 그래프, 원 그래프 등 다양한 형태로 데이터를 표현할 수 있습니다. Paper.js에서는 다양한 도구와 메서드를 사용하여 원하는 시각화를 구현할 수 있습니다.

예를 들어, 다음과 같이 원 그래프를 그릴 수 있습니다.

var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

var data = [10, 20, 30, 40, 50];

// 변수들을 설정하고 원 그래프를 그리는 함수를 생성합니다.
function drawChart(data) {
    var center = new paper.Point(150, 150);
    var radius = 100;
    var startAngle = -90;

    var sum = data.reduce(function(acc, val) {
        return acc + val;
    });

    var currentAngle = startAngle;

    for(var i = 0; i < data.length; i++) {
        var percentage = data[i] / sum;
        var angle = percentage * 360;

        var path = new paper.Path.Circle({
            center: center,
            radius: radius,
            fillColor: 'blue',
            strokeColor: 'black',
            strokeWidth: 2,
            startAngle: currentAngle,
            endAngle: currentAngle + angle
        });

        currentAngle += angle;
    }
}

drawChart(data);

위의 코드는 myCanvas라는 id를 가진 HTML 캔버스 요소에 원 그래프를 그리고 있습니다. data 배열은 그래프에 표시할 데이터를 나타냅니다. drawChart 함수는 data를 기반으로 원 그래프를 그리는 역할을 합니다. 각 데이터 포인트는 데이터의 비율에 따라 원 그래프에 나타납니다.

결론

Paper.js는 사용자 정의 데이터 시각화 차트를 만들기 위한 강력한 도구입니다. Paper.js를 사용하면 간단하게 선 그래프, 막대 그래프, 원 그래프 등 다양한 형태로 데이터를 시각화할 수 있습니다. Paper.js의 다양한 기능과 메서드를 활용하여 원하는 시각화를 구현해보세요!

참고문헌: