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

07 Dec 2023

javascript

D3.js는 웹 기반 데이터 시각화를 위한 자바스크립트 라이브러리입니다. 이번 포스트에서는 D3.js를 사용하여 막대 그래프를 그리는 방법에 대해 알아보겠습니다.

1. D3.js 설치

D3.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 HTML 문서에 포함해야 합니다. 아래의 스크립트 태그를 HTML 파일의 <head> 태그 안에 추가합니다.

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

2. 막대 그래프 데이터 준비

막대 그래프를 그리기 위해 필요한 데이터를 먼저 준비해야 합니다. 예를 들어, 다음과 같은 데이터가 있다고 가정해봅시다.

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 15 },
  { name: 'C', value: 8 },
  { name: 'D', value: 12 },
];

위 데이터는 name과 value라는 두 개의 속성을 가진 객체들의 배열로 구성되어 있습니다.

3. SVG 요소 추가

D3.js를 사용하여 그래프를 그리기 위해 SVG 요소를 HTML 문서에 추가해야 합니다. 아래의 코드를 사용하여 SVG 요소를 추가합니다.

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

위 예제에서는 <body> 태그 안에 SVG 요소를 추가하고, 가로 크기는 400px, 세로 크기는 300px로 설정하였습니다.

4. 막대 그래프 그리기

이제 준비한 데이터를 바탕으로 막대 그래프를 그려봅시다. D3.js에서는 selectAll, data, enter 메서드를 사용하여 데이터와 막대 그래프 요소를 연결합니다.

const bars = svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 50)
  .attr('y', d => 300 - d.value * 10)
  .attr('width', 40)
  .attr('height', d => d.value * 10)
  .attr('fill', 'steelblue');

위 코드에서는 selectAll('rect')로 SVG 내의 모든 rect 요소를 선택하고, data 메서드를 사용하여 데이터를 연결합니다. enter 메서드를 사용하여 데이터 개수만큼 rect 요소를 추가합니다. 여기서 x, y, width, height, fill을 각각 설정하여 막대의 위치, 크기 및 색상을 지정합니다.

5. 막대 그래프에 축 추가

막대 그래프에 축을 추가하여 그래프를 더욱 가시적으로 만들 수 있습니다. 아래의 코드를 사용하여 x축과 y축을 추가해봅시다.

const xScale = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([0, 400])
  .padding(0.2);

const xAxis = d3.axisBottom(xScale);

svg.append('g')
  .attr('transform', 'translate(0, 300)')
  .call(xAxis);

위 코드에서는 d3.scaleBand()를 사용하여 x축의 스케일을 정의한 후, domain 메서드와 range 메서드로 막대 그래프의 범위를 설정합니다. padding 메서드는 막대 사이의 간격을 조절합니다. x축의 스케일을 바탕으로 axisBottom 메서드를 호출하여 x축을 생성하고 SVG에 추가합니다.

결론

이제 D3.js를 사용하여 막대 그래프를 그리는 방법에 대해 알아보았습니다. D3.js는 강력한 데이터 시각화 라이브러리로 다양한 그래프를 그릴 수 있는 기능을 제공합니다. 자세한 내용은 D3.js 공식 문서를 참조하시기 바랍니다.