ChatGPT로 Chart.js 알아보기 (7):버블 차트(Bubble Chart)

ChatGPT로 Chart.js 알아보기 (7):버블 차트(Bubble Chart)

이번 포스트에서는 버블 차트(Bubble Chart)를 Chart.js로 생성하는 방법에 대해서 알아보고자 한다.
ChatGPT로 버블 차트가 무엇인지, Chart.js로 생성하는 방법에 대해 출력해달라고 했으며, 해당 내용을 정리해 보았다.

버블 차트(Bubble Chart)란?

버블 차트는 각 데이터 포인트를 원 또는 '버블'로 나타내는 3차원 그래프 형태이다.

이 도표는 각 버블의 x좌표, y좌표, 그리고 버블의 크기 세 가지 요소를 사용해 데이터를 표현한다.
x좌표와 y좌표는 각각 두 가지 다른 수치 변수를 나타내고, 버블의 크기는 세 번째 변수를 나타낸다.
이 세 가지 변수는 동시에 비교하고 해석할 수 있어 다양한 관계를 한눈에 파악할 수 있다.

버블 차트의 추가적인 차원을 활용하여 추가적인 정보를 표시할 수도 있다.
예를 들어, 버블의 색상을 다르게 하여 네 번째 변수를 나타낼 수 있다.

일반적으로, 버블 차트는 경제학, 비즈니스, 사회 과학 등 다양한 분야에서 많은 양의 데이터를 쉽고 직관적으로 이해하고 비교하기 위해 사용된다.
예를 들어, 국가별 GDP, 인구, 기대 수명 등을 비교하는 데 사용할 수 있다.

그러나 이해하기 어렵거나 과잉해석될 수 있는 위험이 있으므로 버블 차트의 사용은 주의가 필요하다.
적절한 스케일링과 설명 없이는 각 버블의 크기를 잘못 해석할 수 있다.
또한, 너무 많은 버블이나 변수가 포함되면 그래프가 혼란스러워질 수 있다.

Bubble Chart 생성

버블 차트를 생성하려면 Chart 객체의 type을 bubble로 설정하면 된다.

type: 'bubble'

그리고 다른 Chart type과는 다르게 data가 x 좌표, y 좌표, 반지름을 뜻하는 r을 갖는 객체의 배열로 입력되어야 한다.

data: [
    { x: 20, y: 30, r: 15 },
    { x: 40, y: 10, r: 10 }
]

위에서 출력한 버블 차트의 코드는 아래와 같다.

<div style="max-width: 600px;">
    <canvas id="bubbleExample"></canvas>
</div>

const exampleCtx = document.querySelector('#bubbleExample').getContext('2d');

const bubbleChartExample = new Chart(exampleCtx, {
    type: 'bubble',
    data: {
        datasets: [
            {
                label: 'First Dataset',
                data: [
                    { x: 20, y: 30, r: 15 },
                    { x: 40, y: 10, r: 10 },
                    { x: 15, y: 20, r: 40 }
                ],
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                borderColor: 'rgb(255, 99, 132)'
            },
            {
                label: 'Second Dataset',
                data: [
                    { x: 10, y: 20, r: 5 },
                    { x: 15, y: 10, r: 35 },
                    { x: 20, y: 20, r: 20 }
                ],
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: 'rgb(75, 192, 192)'
            }
        ]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            },
            x: {
                beginAtZero: true
            }
        }
    }
});

위 코드는 두 개의 데이터 세트를 나타내는 버블 차트를 만든다.
label은 데이터 세트의 이름을 나타내며, backgroundColor와 borderColor는 버블의 배경색과 테두리색을 설정한다.

예시

버블 차트를 활용한 예시를 보면서 다른 옵션들도 함께 알아보자.

버블 차트를 이용하여 각 회사의 판매 수량, 이익, 그리고 판매한 제품의 종류를 한 눈에 볼 수 있다.
x축에 판매 수량, y축에 이익을 위치시키고, 버블의 크기를 판매한 제품의 종류 수로 설정하면 각 회사의 판매 성과를 직관적으로 비교할 수 있다.

이 예시에서는 x축, y축에는 title을 추가해주고, tooltip 옵션을 사용해서 마우스를 hover 했을 때의 텍스트를 변경해보았다.
그리고 최상단에 '회사별 판매 데이터'라는 title을 추가해보았다.

const companyCtx = document.querySelector('#companyChart').getContext('2d');
const companyBubbleChart = new Chart(companyCtx, {
    type: 'bubble',
    data: {
        datasets: [
            {
                label: '회사 1',
                data: [
                        { x: 115, y: 50, r: 15 },
                        { x: 120, y: 75, r: 30 },
                        { x: 130, y: 60, r: 25 },
                        { x: 110, y: 40, r: 10 },
                    ],
                backgroundColor: 'rgb(255, 99, 132, 0.6)',
                borderColor: 'rgb(255, 99, 132)'
            },
            {
                label: '회사 2',
                data: [
                    { x: 200, y: 80, r: 20 },
                    { x: 180, y: 65, r: 40 },
                    { x: 190, y: 45, r: 50 },
                    { x: 160, y: 70, r: 30 }
                ],
                backgroundColor: 'rgb(75, 192, 192, 0.6)',
                borderColor: 'rgb(75, 192, 192)'
            },
            {
                label: '회사 3',
                data: [
                    { x: 150, y: 60, r: 25 },
                    { x: 170, y: 30, r: 5 },
                    { x: 165, y: 40, r: 30 },
                    { x: 180, y: 50, r: 20 },
                ],
                backgroundColor: 'rgb(40, 130, 237, 0.6)',
                borderColor: 'rgb(40, 130, 237)'
            },
        ]
    },
    options: {
        scales: {
            x: {
                title: {
                    display: true,
                    text: '판매 수량'
                }
            },
            y: {
                title: {
                    display: true,
                    text: '이익'
                }
            }
        },
        plugins: {
            title: {
                display: true,
                text: '회사별 판매 데이터'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const xLabel = context.dataset.data[context.dataIndex].x;
                        const yLabel = context.dataset.data[context.dataIndex].y;
                        const rLabel = context.dataset.data[context.dataIndex].r;
                        return `판매 수량: ${xLabel}, 이익: ${yLabel}, 제품의 종류 수: ${rLabel}`;
                    }
                }
            }
        }
    }
});

✔ scales
scales는 차트의 X축과 Y축을 제어한다.
x는 X축의 설정을 담당하며, title은 X축의 제목을 설정할 수 있다.
display는 제목을 보여줄지 여부를 설정하고, text는 제목의 내용을 설정할 수 있다.
y는 Y축의 설정을 담당하며, x와 동일하게 설정 가능하다.

✔ plugins
options에서 plugins는 차트의 여러 가지 추가적인 기능을 제어 가능하다.
title은 차트의 제목을 설정하며,
tooltip은 차트의 각 데이터 포인트에 마우스를 올렸을 때 나타나는 툴팁의 내용을 설정할 수 있다.

ChatGPT로 간단하게 버블 차트에 대해서 알아보았다.
이번 샘플 코드 및 샘플 데이터의 경우 ChatGPT가 출력해 주는 건 뭔가 좀 이상해서 별도로 많이 수정해서 진행했다.
다른 샘플 코드들도 출력해달라고 했더니 영 도움 안 되는 내용들 밖에 없었다...
그나마 options 들에 설정할 수 있는 여러 매개변수들에 대해서 알 수 있어서 좋았다.
다만, 무엇이 잘못된 건진 몰라도 차트가 비정상적으로 크게 나와서 제대로 출력되지 않을 때가 있었는데, 아마 반지름 r이 너무 커서 그런 것 같다.
다른 데이터는 뭔가 알아서 잘 맞춰주는데 반지름만 계산을 안 해주는 느낌...?
지금 당장은 시간이 없어서 이 부분은 나중에 알아봐야겠다...

커피 한 잔으로
저를 응원해주세요!