D3.js Interactive Chart Demo (Markdown)

D3.js는 데이터 기반 문서 조작을 위한 JavaScript 라이브러리입니다. 이 포스트에서는 D3.js를 사용하여 인터랙티브 라인 차트를 만드는 방법을 소개합니다.

데이터 준비

먼저 시각화할 데이터가 필요합니다. 이 예제에서는 간단한 CSV 파일을 사용합니다:

x,y
0,10
1,25
2,18
3,35
4,28
5,42
6,38
7,55
8,48
9,62

x축은 시간이나 순서를, y축은 측정값을 나타냅니다.

인터랙티브 차트

아래 차트는 데이터 포인트에 마우스를 올리면 하이라이트됩니다. 직접 인터랙션해 보세요!

구현 방법

이 차트는 다음과 같은 단계로 구현됩니다:

1. 데이터 로드: d3.csv()를 사용하여 CSV 파일을 비동기로 불러옵니다.
2. 스케일 설정: d3.scaleLinear()로 데이터 범위를 픽셀 좌표로 변환합니다.
3. 축 생성: d3.axisBottom()과 d3.axisLeft()로 축을 그립니다.
4. 라인 그리기: d3.line() 제너레이터로 경로를 생성합니다.
5. 인터랙션 추가: SVG 요소에 마우스 이벤트를 바인딩합니다.

코드 살펴보기

핵심 코드는 다음과 같습니다:

import * as d3 from "d3";

const data = await d3.csv(csvUrl);

const x = d3.scaleLinear()
  .domain(d3.extent(data, d => d.x))
  .range([margin, width - margin]);

const line = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y));

svg.append("path")
  .datum(data)
  .attr("d", line);

결론

D3.js는 강력하고 유연한 시각화 도구입니다. 이 블로그에서는 앞으로 더 다양한 D3.js 예제를 소개할 예정입니다.