[javascript] D3.js를 이용한 히스토그램 그리기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위해 자주 사용되는 JavaScript 라이브러리입니다. 이번 글에서는 D3.js를 이용하여 히스토그램을 그리는 방법에 대해 알아보겠습니다.

필요한 라이브러리 설치

히스토그램을 그리기 위해 D3.js를 설치해야 합니다. 아래의 명령어를 이용하여 설치할 수 있습니다.

npm install d3

데이터 가져오기

히스토그램을 그리기 위해서는 적절한 데이터가 필요합니다. 이 예제에서는 임의의 데이터를 생성하여 사용하겠습니다.

const data = [5, 10, 15, 20, 25];

SVG 요소 생성하기

D3.js를 사용하여 SVG 요소를 생성하고, 히스토그램을 그릴 준비를 합니다.

const svg = d3.select("body")
              .append("svg")
              .attr("width", 500)
              .attr("height", 300);

스케일링 설정하기

x축에 해당하는 도메인 값의 범위와 실제로 표시될 픽셀의 범위를 설정해야 합니다. 이를 위해 D3.js의 스케일링 함수를 사용합니다.

const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([0, 500]);

히스토그램 그리기

D3.js를 이용하여 히스토그램을 그립니다.

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 50)
   .attr("y", 0)
   .attr("width", 40)
   .attr("height", (d) => 300 - xScale(d));

결과 확인하기

위의 코드를 실행하면 웹 페이지에 히스토그램이 그려집니다. 적절한 스케일링이 적용되어 데이터 값에 따라 막대의 높이가 조절되는 것을 확인할 수 있습니다.