▶ JavaScript Graphics

JavaScript Plotly

JavaScript Plotly: 인터랙티브 데이터 시각화를 위한 라이브러리

Plotly는 데이터 시각화를 위한 JavaScript 라이브러리로, 간편하게 다양한 유형의 차트와 그래프를 만들 수 있습니다. Plotly는 상호작용이 가능한 시각화를 제공하며, 특히 과학적 데이터 및 통계적 데이터를 시각화하는 데 유용합니다. 이 가이드는 Plotly를 사용하여 JavaScript에서 데이터 시각화를 구현하는 방법을 설명합니다.

1. Plotly 소개

Plotly는 데이터 시각화를 위한 강력한 도구로, 다음과 같은 특징을 가지고 있습니다:

인터랙티브한 시각화: 사용자가 그래프와 차트를 조작하고 탐색할 수 있는 기능을 제공합니다.
다양한 차트 유형: 산점도, 꺾은선형 차트, 막대 차트, 히스토그램 등 다양한 유형의 차트를 지원합니다.
웹 기반: HTML 및 JavaScript를 사용하여 웹 애플리케이션에 통합할 수 있습니다.
오픈 소스: Plotly의 JavaScript 라이브러리는 오픈 소스이며, 사용이 자유롭습니다.

2. Plotly 사용하기

2.1. Plotly 라이브러리 포함하기

Plotly를 사용하기 위해서는 Plotly.js 라이브러리를 HTML 문서에 포함해야 합니다. 다음과 같은 방법으로 포함할 수 있습니다.

<script src="<https://cdn.plot.ly/plotly-latest.min.js>"></script>

2.2. 기본 차트 만들기

다음은 간단한 산점도 차트를 만드는 예제입니다.

2.2.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly Example</title>
    <script src="<https://cdn.plot.ly/plotly-latest.min.js>"></script>
</head>
<body>
    <div id="myPlot" style="width: 100%; height: 100%;"></div>
    <script src="script.js"></script>
</body>
</html>

2.2.2. JavaScript 코드 (script.js)

// 데이터 준비
const trace1 = {
    x: [1, 2, 3, 4, 5],
    y: [2, 3, 5, 1, 4],
    mode: 'markers',
    type: 'scatter',
    name: 'Data Points'
};

// 레이아웃 설정
const layout = {
    title: 'Simple Scatter Plot',
    xaxis: {
        title: 'X Axis'
    },
    yaxis: {
        title: 'Y Axis'
    }
};

// 차트 그리기
const data = [trace1];
Plotly.newPlot('myPlot', data, layout);

3. 다양한 차트 유형

Plotly를 사용하면 다양한 유형의 차트를 만들 수 있습니다. 다음은 몇 가지 예입니다.

3.1. 막대 차트

const trace2 = {
    x: ['Category A', 'Category B', 'Category C'],
    y: [20, 14, 23],
    type: 'bar'
};

const dataBar = [trace2];
const layoutBar = { title: 'Bar Chart Example' };
Plotly.newPlot('myPlot', dataBar, layoutBar);

3.2. 꺾은선형 차트

const trace3 = {
    x: [1, 2, 3, 4, 5],
    y: [1, 3, 2, 5, 4],
    mode: 'lines+markers',
    type: 'scatter',
    name: 'Line Chart'
};

const dataLine = [trace3];
const layoutLine = { title: 'Line Chart Example' };
Plotly.newPlot('myPlot', dataLine, layoutLine);

3.3. 히스토그램

const trace4 = {
    x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4],
    type: 'histogram'
};

const dataHist = [trace4];
const layoutHist = { title: 'Histogram Example' };
Plotly.newPlot('myPlot', dataHist, layoutHist);

4. 인터랙티브 기능

Plotly는 차트에 다양한 인터랙티브 기능을 제공하여 사용자가 데이터를 쉽게 탐색할 수 있도록 합니다.

4.1. 툴팁

Plotly는 각 데이터 포인트에 대해 툴팁을 자동으로 생성합니다. 사용자가 데이터 포인트에 마우스를 올리면 해당 값에 대한 정보를 표시합니다.

4.2. 범례

차트의 범례를 클릭하여 특정 데이터 시리즈를 숨기거나 표시할 수 있습니다. 이는 여러 데이터 세트를 비교할 때 유용합니다.

4.3. 줌 및 패닝

Plotly 차트는 기본적으로 줌 및 패닝 기능을 제공합니다. 사용자가 차트를 클릭하여 드래그하면 확대 및 축소할 수 있습니다.

5. 전체 예제: Plotly로 데이터 시각화하기

아래는 jQuery와 함께 Plotly를 사용하여 동적으로 차트를 업데이트하는 전체 예제입니다.

5.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly Dynamic Example</title>
    <script src="<https://cdn.plot.ly/plotly-latest.min.js>"></script>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <style>
        #myPlot {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>Dynamic Plotly Chart</h1>
    <button id="updateButton">Update Data</button>
    <div id="myPlot"></div>

    <script>
        let xData = [1, 2, 3, 4, 5];
        let yData = [2, 3, 5, 1, 4];

        function drawPlot() {
            const trace = {
                x: xData,
                y: yData,
                mode: 'markers',
                type: 'scatter'
            };

            const data = [trace];
            const layout = { title: 'Dynamic Scatter Plot' };
            Plotly.newPlot('myPlot', data, layout);
        }

        $('#updateButton').click(function() {
            yData = yData.map(y => y + Math.floor(Math.random() * 5)); // 데이터 업데이트
            drawPlot(); // 차트 다시 그리기
        });

        // 초기 차트 그리기
        drawPlot();
    </script>
</body>
</html>

이 코드는 "Update Data" 버튼을 클릭할 때마다 Y 데이터를 업데이트하고 차트를 다시 그립니다.

6. 요약

JavaScript Plotly는 데이터 시각화를 위해 매우 유용한 라이브러리로, 다양한 유형의 차트와 그래프를 쉽게 생성하고 조작할 수 있습니다. Plotly를 사용하여 인터랙티브한 데이터 시각화를 구현하면 사용자에게 더 나은 데이터를 제공할 수 있습니다.

다양한 차트 유형: 산점도, 막대 차트, 꺾은선형 차트 등 다양한 시각화 지원.
인터랙티브 기능: 툴팁, 범례, 줌 및 패닝 기능 제공.
동적 데이터 업데이트: jQuery와 통합하여 데이터 변경 시 차트를 업데이트할 수 있음.

Plotly를 활용하여 매력적이고 효과적인 데이터 시각화를 구현할 수 있습니다.

코딩 스쿨 JavaScript