[javascript] D3.js를 이용한 원 그래프 그리기

07 Dec 2023

javascript

D3.js는 JavaScript를 기반으로 한 데이터 시각화 라이브러리로, 강력한 기능을 제공합니다. 이번 포스트에서는 D3.js와 SVG(Scalable Vector Graphics)를 사용하여 원 그래프를 그리는 방법을 알아보겠습니다.

D3.js 설치하기

D3.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하거나 CDN을 통해 추가해야 합니다. HTML 문서의 <head> 태그 내에 다음 코드를 추가하여 D3.js를 불러옵니다.

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

SVG 요소 생성하기

원 그래프를 그리기 위해서는 먼저 SVG 요소를 생성해야 합니다. 다음 코드를 사용하여 원 그래프를 그릴 <svg> 요소를 생성합니다. 너비와 높이는 원하는 값으로 설정해주세요.

const svg = d3.select("body")
    .append("svg")
    .attr("width", 너비)
    .attr("height", 높이);

데이터 준비하기

그리고 나서 데이터를 준비해야 합니다. 원 그래프는 각 섹션의 크기에 따라 그려지므로, 각 섹션의 크기에 해당하는 데이터 배열을 만들어야 합니다. 각 데이터의 크기를 비율로 표현하며, 모든 값이 합쳤을 때 1이 되어야 합니다.

const 데이터 = [값1, 값2, 값3, ...];

원 그래프 그리기

이제 준비한 데이터를 바탕으로 원 그래프를 그릴 차례입니다. D3.js를 이용하여 다음과 같이 코드를 작성해보세요.

const 그래프 = d3.pie()
    .value(d => d)
    (데이터);

const 아크 = d3.arc()
    .innerRadius(0)
    .outerRadius(반지름);

svg.selectAll("조각")
    .data(그래프)
    .enter()
    .append("path")
    .attr("d", 아크)
    .attr("fill", (d, i) => 색상[i]);

이 코드는 d3.pie() 함수를 사용하여 데이터를 각도로 변환하고, d3.arc() 함수를 사용하여 아크를 생성합니다. 그리고 나서 원 그래프 요소를 생성하고, 적절한 위치와 색상을 설정합니다.

결과 확인하기

이제 작성한 코드를 실행하여 원 그래프가 잘 그려지는지 확인해보세요. 브라우저에서 HTML 파일을 열고, 원 그래프가 보이는지 확인할 수 있습니다.

결론

D3.js를 사용하면 JavaScript로 원 그래프와 같은 다양한 시각화를 손쉽게 그릴 수 있습니다. D3.js의 강력한 기능을 활용하여 데이터를 시각적으로 표현하고, 정보의 가치를 더욱 향상시킬 수 있습니다.

참고자료: