[javascript] D3.js를 이용한 레이더 차트 그리기

07 Dec 2023

javascript

D3.js는 JavaScript로 데이터 시각화를 위한 강력한 라이브러리입니다. 이번 포스트에서는 D3.js를 사용하여 레이더 차트를 그리는 방법에 대해 알아보겠습니다.

레이더 차트는 여러 가지 변수의 값을 비교하는 데 유용한 시각화 도구입니다. 각 변수는 원의 둘레를 따라 위치하며, 값의 크기는 원의 반지름을 통해 표시됩니다. 이를 통해 다양한 변수들의 상대적인 크기를 한눈에 알 수 있습니다.

1. D3.js 설치하기

D3.js를 사용하기 위해 우선 D3.js를 다운로드하고 프로젝트에 포함해야 합니다. D3.js는 공식 웹사이트에서 다운로드하거나, npm을 통해 설치할 수 있습니다.

npm install d3

2. HTML에 SVG 컨테이너 추가하기

D3.js를 사용하여 레이더 차트를 그리기 위해선 SVG(Scaleable Vector Graphics) 컨테이너가 필요합니다. SVG는 XML 기반의 벡터 그래픽을 지원하여 그림을 확대 또는 축소해도 깨지지 않고 선명한 이미지를 보여줍니다.

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

3. JavaScript로 레이더 차트 그리기

D3.js를 사용하여 레이더 차트를 그리기 위해선 다음과 같은 단계를 따라야 합니다.

3.1 데이터 준비하기

레이더 차트에 표시될 변수들과 그 값을 담은 데이터를 JavaScript 객체 형태로 준비합니다.

var dataset = [
  { label: "변수1", value: 10 },
  { label: "변수2", value: 20 },
  { label: "변수3", value: 15 },
  { label: "변수4", value: 5 },
  { label: "변수5", value: 12 }
];

3.2 스케일 설정하기

값의 크기를 원의 반지름으로 표시하기 위해 값을 스케일링해야 합니다. D3.js의 d3.scaleLinear() 함수를 사용하여 값을 원하는 범위로 스케일링할 수 있습니다.

var radiusScale = d3
  .scaleLinear()
  .domain([0, d3.max(dataset, (d) => d.value)])
  .range([0, 100]);

3.3 레이더 차트 그리기

실제 레이더 차트를 그리기 위해선 D3.js의 다양한 기능을 활용해야 합니다. 예를 들어 d3.arc() 함수로 원을 그리고, d3.line() 함수로 선을 그릴 수 있습니다. 자세한 내용은 D3.js 문서를 참고하세요.

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

// 원 그리기
svg
  .append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", radiusScale(10))
  .attr("fill", "blue");

// 선 그리기
svg
  .append("line")
  .attr("x1", 100)
  .attr("y1", 100)
  .attr("x2", 150)
  .attr("y2", 150)
  .attr("stroke", "red");

위의 코드는 예시일 뿐, 실제 레이더 차트를 그리기 위해서는 더 복잡한 로직이 필요합니다.

4. 레이더 차트 스타일링하기

레이더 차트의 스타일을 변경하고 꾸미기 위해서는 CSS를 사용할 수 있습니다. SVG 요소에 CSS 클래스를 추가하거나, D3.js의 .style() 함수를 사용하여 스타일을 적용할 수 있습니다.

.circle {
  fill: blue;
  opacity: 0.7;
}

.line {
  stroke: red;
  stroke-width: 2px;
}

// 원 그리기
svg
  .append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", radiusScale(10))
  .attr("class", "circle");

// 선 그리기
svg
  .append("line")
  .attr("x1", 100)
  .attr("y1", 100)
  .attr("x2", 150)
  .attr("y2", 150)
  .attr("class", "line");

위의 코드에서 circle 클래스와 line 클래스를 추가하여 레이더 차트를 스타일링합니다.

5. 결론

D3.js를 사용하면 JavaScript로 다양한 종류의 데이터 시각화를 구현할 수 있습니다. 이번 포스트에서는 레이더 차트를 그리는 방법에 대해 알아보았는데, 이것만으로 그릴 수 있는 것은 아니지만 D3.js의 강력한 기능과 다양한 예제를 통해 더 많은 것을 배울 수 있습니다. 따라서, D3.js를 사용하여 데이터 시각화에 도전해보세요!