[javascript] D3.js를 사용하여 차트 그리기

07 Dec 2023

javascript

D3.js는 데이터 시각화 작업을 위한 강력한 자바스크립트 라이브러리입니다. 이를 사용하면 다양한 유형의 차트를 만들고 데이터를 시각적으로 표현할 수 있습니다. 이번 포스트에서는 D3.js를 사용하여 간단한 바 차트를 그리는 방법을 알아보겠습니다.

차트 준비하기

먼저, D3.js 라이브러리를 웹 페이지에 추가합니다. 아래 스크립트 태그를 <head> 태그 안에 추가하면 됩니다.

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

그런 다음, 차트를 그릴 <div> 요소를 HTML 문서에 추가합니다.

<div id="chart"></div>

데이터 준비하기

차트에 사용할 데이터를 준비합니다. 이번 예제에서는 간단한 배열을 사용하겠습니다.

var data = [10, 20, 30, 40, 50];

차트 그리기

이제 차트를 그리기 위해 D3.js를 사용합니다. 아래 코드를 <script> 태그 안에 추가하세요.

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 400)
  .attr("height", 200);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 80; })
  .attr("y", function(d) { return 200 - d; })
  .attr("width", 50)
  .attr("height", function(d) { return d; })
  .attr("fill", "blue");

위 코드에서는 D3.js의 select 함수를 사용하여 <div> 요소를 선택하고, append 함수를 사용하여 <svg> 요소를 추가합니다. 그런 다음, selectAll 함수를 사용하여 “rect” 요소를 선택하고, data 함수로 데이터를 바인딩합니다. 이후 enter 함수를 사용하여 데이터 배열의 각 요소마다 <rect> 요소를 추가합니다. 추가한 <rect> 요소의 속성들을 설정하여 각각의 바 차트를 그립니다.

차트 결과 확인하기

웹 브라우저에서 HTML 파일을 열고 차트가 정상적으로 표시되는지 확인해보세요.

이제 D3.js를 사용하여 간단한 바 차트를 생성하는 방법을 알게 되었습니다. D3.js는 다양한 유형의 차트를 그리는 기능을 제공하기 때문에 깊이 있는 공부가 필요합니다. 더 많은 정보를 얻고 싶다면 D3.js 공식 문서를 참조하세요.

참고 자료

D3.js 공식 문서