[javascript] Reveal.js를 이용한 오픈 데이터 시각화

27 Nov 2023

javascript

이번 블로그 포스트에서는 Reveal.js를 이용하여 오픈 데이터를 시각화하는 방법에 대해 알아보겠습니다. Reveal.js는 HTML 기반의 프레젠테이션 도구로, 강력한 시각화 기능을 제공합니다.

1. Reveal.js 설치 및 설정

먼저, Reveal.js를 설치합니다. 다음 명령어를 사용하여 Reveal.js를 설치할 수 있습니다.

npm install reveal.js

설치가 완료되면, HTML 파일을 생성하여 Reveal.js를 초기화합니다. 다음은 간단한 HTML 파일의 예입니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Open Data Visualization</title>

    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/black.css">

    <script src="dist/reveal.js"></script>
</head>

<body>
    <div class="reveal">
        <div class="slides">
            <section>Slide 1</section>
            <section>Slide 2</section>
            <section>Slide 3</section>
        </div>
    </div>

    <script>
        Reveal.initialize();
    </script>
</body>

</html>

위의 코드에서 dist/reveal.js와 dist/reveal.css는 Reveal.js의 핵심 파일입니다. dist/theme/black.css는 사용할 테마를 지정하는 파일입니다. 또한, 슬라이드는 <section> 요소로 정의됩니다.

2. 데이터 시각화

Reveal.js를 사용하여 데이터를 시각화하려면, 다음과 같은 방법을 사용할 수 있습니다.

2.1. Chart.js 사용

Chart.js는 JavaScript 기반의 간단한 차트 라이브러리입니다. Reveal.js에서 Chart.js를 사용하여 데이터를 시각화하는 방법은 다음과 같습니다.

Chart.js를 설치합니다.

npm install chart.js

HTML 파일에서 Chart.js를 로드합니다.

<script src="path/to/chart.js"></script>

원하는 위치에 <canvas> 요소를 추가하여 차트를 그립니다.

<canvas id="myChart" width="400" height="400"></canvas>

JavaScript 코드에서 데이터와 차트 옵션을 정의하고, new Chart()를 사용하여 차트를 생성합니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

2.2. D3.js 사용

D3.js는 JavaScript 기반의 강력한 데이터 시각화 라이브러리입니다. Reveal.js에서 D3.js를 사용하여 데이터를 시각화하는 방법은 다음과 같습니다.

D3.js를 설치합니다.

npm install d3

HTML 파일에서 D3.js를 로드합니다.

<script src="path/to/d3.js"></script>

원하는 위치에 <svg> 요소를 추가하여 시각화를 그립니다.

<svg id="myChart" width="400" height="400"></svg>

JavaScript 코드에서 데이터를 불러와서 D3.js를 사용하여 시각화합니다.

var data = [
    { name: 'Red', value: 12 },
    { name: 'Blue', value: 19 },
    { name: 'Yellow', value: 3 },
    { name: 'Green', value: 5 },
    { name: 'Purple', value: 2 },
    { name: 'Orange', value: 3 }
];

var svg = d3.select("#myChart");

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function (d, i) { return i * 50; })
    .attr("y", function (d) { return 400 - d.value * 20; })
    .attr("width", 40)
    .attr("height", function (d) { return d.value * 20; })
    .attr("fill", "steelblue");

3. 결론

Reveal.js는 강력한 시각화 도구로, 다양한 오픈 데이터를 시각화하는데 사용할 수 있습니다. 이번 블로그 포스트에서는 Reveal.js를 설치하고 설정하는 방법, 그리고 Chart.js와 D3.js를 사용하여 데이터를 시각화하는 방법을 알아보았습니다. Reveal.js를 통해 더 흥미로운 시각화를 만들어보세요!

1. Reveal.js 설치 및 설정

2. 데이터 시각화

2.1. Chart.js 사용

2.2. D3.js 사용

3. 결론

참고 문서