[javascript] D3.js를 이용한 버블 차트 그리기
D3.js는 데이터를 시각화하기 위한 JavaScript 라이브러리로 많이 사용되고 있습니다. 이번 포스트에서는 D3.js를 사용하여 버블 차트를 그리는 방법에 대해 알아보겠습니다.
필요한 라이브러리 설치
D3.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 D3.js를 설치할 수 있습니다.
npm install d3
데이터 준비
먼저 그래프를 그리기 위한 데이터를 준비해야 합니다. 버블 차트는 각각의 원이 데이터 포인트를 나타내기 때문에 다음과 같은 형태의 데이터가 필요합니다.
var data = [
{ name: "A", value: 10, size: 20 },
{ name: "B", value: 15, size: 30 },
{ name: "C", value: 5, size: 15 },
// ...
];
SVG 요소 생성
D3.js를 사용하여 그래프를 그리려면 SVG(Scaleable Vector Graphics) 요소를 생성해야 합니다. SVG는 벡터 기반의 이미지로 그래픽을 그릴 수 있는 태그입니다.
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
원 그리기
D3.js의 circle 함수를 사용하여 각각의 데이터 포인트에 대한 원을 그릴 수 있습니다. circle 함수는 cx, cy, r 속성을 가지는데, 각각 x 좌표, y 좌표, 반지름을 의미합니다.
svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScale(d.value);
})
.attr("cy", function (d) {
return yScale(d.size);
})
.attr("r", function (d) {
return sizeScale(d.size);
})
.attr("fill", "steelblue");
축 추가
그래프의 X축, Y축을 표시하기 위해 D3.js의 축 라이브러리를 사용할 수 있습니다. 축은 d3.axisBottom()과 d3.axisLeft() 함수를 사용해 생성할 수 있습니다.
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${height})`).call(xAxis);
svg.append("g").attr("class", "y-axis").call(yAxis);
결과 확인
잘 작성된 코드를 실행하면 원하는 버블 차트를 그릴 수 있습니다.
참고 자료
- D3.js 공식 문서: https://d3js.org/
- D3.js Examples: https://observablehq.com/@d3/gallery