[javascript] D3.js를 이용한 파이 차트 그리기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 JavaScript 라이브러리로, 웹 페이지 상에서 다양한 종류의 차트를 그릴 수 있습니다. 이번 포스트에서는 D3.js를 사용하여 파이 차트를 그리는 방법을 알아보겠습니다.

필요한 패키지 설치하기

D3.js를 사용하기 위해서는 먼저 필요한 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 D3.js를 설치할 수 있습니다.

npm install d3

데이터 준비하기

파이 차트를 그리기 위해선 데이터가 필요합니다. 임의로 데이터를 생성하거나, 외부 데이터를 가져와 사용할 수 있습니다. 이 예제에서는 아래와 같이 데이터를 생성하여 사용하겠습니다.

const data = [
  { label: 'A', value: 30 },
  { label: 'B', value: 50 },
  { label: 'C', value: 20 },
];

차트 그리기

D3.js를 사용하여 파이 차트를 그리는 방법은 다음과 같습니다.

const width = 500;
const height = 500;

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

const radius = Math.min(width, height) / 2;
const pie = d3.pie().value(d => d.value);
const colors = d3.scaleOrdinal(d3.schemeCategory10);

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

const arcs = svg.selectAll('arc')
  .data(pie(data))
  .enter()
  .append('g')
  .attr('class', 'arc')
  .attr('transform', `translate(${width / 2}, ${height / 2})`);

arcs.append('path')
  .attr('d', arc)
  .attr('fill', (d, i) => colors(i));

arcs.append('text')
  .attr('transform', d => `translate(${arc.centroid(d)})`)
  .attr('text-anchor', 'middle')
  .text(d => d.data.label);

위의 코드는 SVG 요소를 생성하고, 데이터를 바탕으로 파이 차트를 그리는 코드입니다. d3.pie() 함수를 사용하여 데이터를 각각의 파이 조각으로 나누고, d3.arc() 함수를 사용하여 조각을 그리는데 필요한 경로를 계산합니다. 마지막으로 d3.schemeCategory10을 사용하여 색상을 지정하고, 데이터의 레이블을 텍스트로 표시합니다.

실행 결과

위의 코드를 실행하면 아래와 같이 파이 차트가 그려집니다.

Pie Chart

이제 여러분은 D3.js를 사용하여 파이 차트를 그리는 방법을 알게 되었습니다. 다양한 옵션과 스타일을 추가하여 차트를 개선할 수 있으니, 참고 자료를 보며 더 많은 기능을 활용해보세요!