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

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 자바스크립트 라이브러리로, 다양한 형식의 차트를 생성하는 데 사용됩니다. 이번에는 D3.js를 이용하여 도넛 차트를 그려보겠습니다.

필요한 라이브러리 가져오기

우선 D3.js를 사용하기 위해 해당 라이브러리를 가져와야 합니다. HTML 파일의 <head> 태그 내에 다음 코드를 추가하여 D3.js를 불러옵니다.

<script src="https://d3js.org/d3.v6.min.js" charset="utf-8"></script>

데이터 준비하기

도넛 차트를 그리기 위해 필요한 데이터를 준비합니다. 예를 들어, 다음과 같은 데이터가 있다고 가정해보겠습니다.

var data = [
  { label: "사과", value: 30 },
  { label: "바나나", value: 50 },
  { label: "딸기", value: 70 },
  { label: "포도", value: 40 },
  { label: "수박", value: 60 }
];

도넛 차트 그리기

이제 D3.js를 이용하여 도넛 차트를 그려봅시다. 아래의 코드를 참고하여 도넛 차트를 그릴 수 있습니다.

// 차트 크기 설정하기
var width = 400;
var height = 400;
var radius = Math.min(width, height) / 2;

// SVG 요소 생성하기
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// 색상 설정하기
var colors = d3.scaleOrdinal(d3.schemeCategory10);

// 도넛 차트 그리기
var arc = d3.arc()
  .innerRadius(radius * 0.6)
  .outerRadius(radius);

var pie = d3.pie()
  .value(function(d) { return d.value; })
  .sort(null);

var path = svg.selectAll("path")
  .data(pie(data))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", function(d, i) { return colors(i); });

// 레이블 추가하기
var label = svg.selectAll("text")
  .data(pie(data))
  .enter()
  .append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .text(function(d) { return d.data.label; })
  .attr("text-anchor", "middle");

위의 코드를 실행하면 도넛 차트가 생성되어 페이지에 표시됩니다.

결론

D3.js를 이용하여 도넛 차트를 그리는 방법에 대해 알아보았습니다. D3.js는 다양한 형식의 차트를 생성할 수 있는 강력한 도구이며, 이를 통해 데이터 시각화를 더욱 쉽고 효과적으로 할 수 있습니다.

필요한 라이브러리 가져오기

데이터 준비하기

도넛 차트 그리기

결론

참고 자료