▶ JavaScript Graphics

JavaScript D3.js: 데이터 기반 시각화 라이브러리

D3.js (Data-Driven Documents)는 데이터 기반의 동적 시각화를 위해 설계된 JavaScript 라이브러리입니다. D3.js를 사용하면 HTML, SVG, CSS를 사용하여 복잡한 그래픽을 생성할 수 있으며, 데이터를 시각적으로 표현하는 데 매우 강력한 도구입니다. 이 가이드는 D3.js의 기본 사용법, 주요 기능 및 예제를 설명합니다.

1. D3.js 소개

1.1. D3.js의 특징

데이터 바인딩: 데이터와 DOM 요소를 바인딩하여 데이터를 기반으로 시각화를 생성합니다.
유연성: SVG, HTML, CSS를 통해 복잡한 그래픽을 만들 수 있습니다.
애니메이션: 데이터 변경에 따라 시각화를 애니메이션으로 표현할 수 있습니다.
인터랙티브: 사용자의 상호작용을 지원하여 동적인 시각화를 구현할 수 있습니다.

1.2. D3.js 설치하기

D3.js를 사용하기 위해서는 HTML 문서에 D3.js 라이브러리를 포함해야 합니다.

<script src="<https://d3js.org/d3.v7.min.js>"></script>

2. D3.js 기본 사용법

2.1. 데이터 준비

D3.js를 사용하여 데이터를 배열로 준비합니다. 예를 들어, 다음과 같은 간단한 데이터를 사용할 수 있습니다.

const data = [30, 86, 168, 234, 24, 60, 120];

2.2. SVG 요소 생성

D3.js는 SVG 요소를 쉽게 생성하고 조작할 수 있습니다. 아래 예제에서는 SVG 요소를 생성합니다.

const svg = d3.select('body').append('svg')
    .attr('width', 400)
    .attr('height', 200);

2.3. 막대 그래프 그리기

이제 데이터를 사용하여 막대 그래프를 그릴 수 있습니다.

svg.selectAll('rect')
    .data(data) // 데이터 바인딩
    .enter() // 데이터가 추가될 때
    .append('rect') // 사각형 추가
    .attr('x', (d, i) => i * 50) // x 위치 설정
    .attr('y', d => 200 - d) // y 위치 설정
    .attr('width', 40) // 너비 설정
    .attr('height', d => d) // 높이 설정
    .attr('fill', 'blue'); // 색상 설정

3. D3.js로 다양한 차트 만들기

3.1. 선 그래프

D3.js를 사용하여 선 그래프를 만드는 방법입니다.

const lineData = [
    { x: 0, y: 30 },
    { x: 1, y: 86 },
    { x: 2, y: 168 },
    { x: 3, y: 234 },
    { x: 4, y: 24 },
    { x: 5, y: 60 },
    { x: 6, y: 120 }
];

const line = d3.line()
    .x(d => d.x * 50)
    .y(d => 200 - d.y);

svg.append('path')
    .datum(lineData)
    .attr('d', line)
    .attr('fill', 'none')
    .attr('stroke', 'red');

3.2. 원형 차트

D3.js를 사용하여 원형 차트를 만드는 방법입니다.

const pieData = [10, 20, 30, 40];

const radius = 100;
const color = d3.scaleOrdinal(d3.schemeCategory10);

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius);

const pie = d3.pie();

const g = svg.append('g')
    .attr('transform', 'translate(200, 100)'); // 원형 차트 중앙 위치 설정

g.selectAll('arc')
    .data(pie(pieData))
    .enter().append('path')
    .attr('d', arc)
    .attr('fill', (d, i) => color(i));

4. D3.js에서의 애니메이션 처리

D3.js는 데이터의 변화를 애니메이션으로 표현할 수 있는 기능을 제공합니다.

4.1. 애니메이션 예제

아래 예제에서는 데이터가 변경될 때 막대 그래프가 애니메이션으로 업데이트됩니다.

function updateData() {
    const newData = [50, 20, 80, 45, 60, 30, 90];

    svg.selectAll('rect')
        .data(newData) // 새로운 데이터 바인딩
        .transition() // 애니메이션 시작
        .duration(750) // 지속 시간
        .attr('y', d => 200 - d) // y 위치 변경
        .attr('height', d => d); // 높이 변경
}

// 데이터 업데이트 버튼
d3.select('body').append('button')
    .text('Update Data')
    .on('click', updateData);

5. D3.js와 사용자 상호작용

D3.js는 사용자 상호작용을 처리하는 기능도 제공합니다. 예를 들어, 마우스 이벤트를 사용하여 그래픽에 반응할 수 있습니다.

5.1. 마우스 이벤트 처리

svg.selectAll('rect')
    .on('mouseover', function() {
        d3.select(this).attr('fill', 'orange'); // 마우스 오버 시 색상 변경
    })
    .on('mouseout', function() {
        d3.select(this).attr('fill', 'blue'); // 마우스 아웃 시 색상 원래대로
    });

6. 전체 예제: D3.js로 데이터 시각화하기

아래는 D3.js를 사용하여 간단한 막대 그래프와 원형 차트를 동시에 만드는 전체 예제입니다.

6.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Example</title>
    <script src="<https://d3js.org/d3.v7.min.js>"></script>
</head>
<body>
    <h1>D3.js Visualization</h1>
    <svg width="400" height="200"></svg>
    <svg width="400" height="400"></svg>
    <script src="script.js"></script>
</body>
</html>

6.2. JavaScript 코드 (script.js)

const dataBar = [30, 86, 168, 234, 24, 60, 120];
const svgBar = d3.select('svg').attr('width', 400).attr('height', 200);

svgBar.selectAll('rect')
    .data(dataBar)
    .enter()
    .append('rect')
    .attr('x', (d, i) => i * 50)
    .attr('y', d => 200 - d)
    .attr('width', 40)
    .attr('height', d => d)
    .attr('fill', 'blue');

const pieData = [10, 20, 30, 40];
const radius = 100;
const svgPie = d3.select('svg:nth-of-type(2)').attr('width', 400).attr('height', 400);
const color = d3.scaleOrdinal(d3.schemeCategory10);
const arc = d3.arc().innerRadius(0).outerRadius(radius);
const pie = d3.pie();

const g = svgPie.append('g').attr('transform', 'translate(200, 200)');

g.selectAll('arc')
    .data(pie(pieData))
    .enter().append('path')
    .attr('d', arc)
    .attr('fill', (d, i) => color(i));

7. 요약

JavaScript D3.js는 데이터 기반의 강력한 시각화 라이브러리로, 복잡한 그래픽을 생성하고 사용자 상호작용을 지원합니다. D3.js를 사용하면 데이터의 변화에 따라 동적으로 시각화를 구현할 수 있습니다.

데이터 바인딩: 데이터와 DOM 요소를 결합하여 시각화 생성.
다양한 그래픽: 막대 그래프, 선 그래프, 원형 차트 등 다양한 차트 유형 지원.
애니메이션: 데이터 변화에 따른 애니메이션 효과 제공.
사용자 상호작용: 마우스 이벤트와 같은 상호작용 처리 기능 제공.

D3.js를 활용하여 매력적이고 유연한 데이터 시각화를 구현할 수 있습니다.

코딩 스쿨 JavaScript

JavaScript D3.JavaScript