Colin's Blog
[javascript] D3.js를 활용한 비교 차트와 분위기 차트의 구현 방법은?

D3.js (Data-Driven Documents)는 데이터 시각화를 위한 JavaScript 라이브러리로, 강력한 기능을 제공합니다. 이번 포스트에서는 D3.js를 사용하여 비교 차트와 분위기 차트를 구현하는 방법에 대해 알아보겠습니다.

비교 차트 (Comparison Chart)

1. D3.js 라이브러리 가져오기

먼저, D3.js를 사용하기 위해 해당 라이브러리를 가져옵니다. HTML 문서의 <head> 태그 내에서 아래 코드를 추가합니다.

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

2. 데이터 준비하기

비교 차트에 사용할 데이터를 미리 준비합니다. 배열 형태로 데이터를 저장하면 됩니다.

const data = [
  { label: "A", value: 10 },
  { label: "B", value: 20 },
  { label: "C", value: 15 },
  // 추가 데이터...
];

3. SVG 요소 생성하기

D3.js를 사용하여 SVG 요소를 생성합니다. 이 때, 차트의 너비와 높이를 지정합니다.

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

4. 막대 그래프 그리기

바 차트를 생성하기 위해 D3.js의 selection 메서드와 rect 요소를 활용합니다.

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 50)
  .attr("y", (d) => svg.attr("height") - d.value * 10)
  .attr("width", 40)
  .attr("height", (d) => d.value * 10)
  .attr("fill", "blue");

5. 축 추가하기

차트에 축을 추가하여 라벨과 눈금을 표시할 수 있습니다.

const xScale = d3.scaleBand()
  .domain(data.map((d) => d.label))
  .range([0, svg.attr("width")]);

const xAxis = d3.axisBottom(xScale);

svg.append("g")
  .attr("transform", `translate(0, ${svg.attr("height")})`)
  .call(xAxis);

분위기 차트 (Mood Chart)

1. D3.js 라이브러리 가져오기

위와 동일한 방법으로 D3.js 라이브러리를 가져옵니다.

2. 데이터 준비하기

분위기 차트에 사용할 데이터를 미리 준비합니다. 각 분위기에 해당하는 값을 포함한 배열을 생성합니다.

const data = [
  { mood: "Happy", value: 20 },
  { mood: "Sad", value: 10 },
  { mood: "Angry", value: 15 },
  // 추가 데이터...
];

3. SVG 요소 생성하기

비교 차트와 동일한 방법으로 SVG 요소를 생성합니다.

4. 파이 차트 그리기

D3.js를 사용하여 파이 차트를 그립니다. selection 메서드와 arc 함수를 활용합니다.

const pie = d3.pie()
  .value((d) => d.value);

const arcs = pie(data);

const arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(100);

svg.selectAll("path")
  .data(arcs)
  .enter()
  .append("path")
  .attr("d", arcGenerator)
  .attr("fill", (d, i) => d3.schemeCategory10[i]);

5. 범례 추가하기

범례를 추가하여 각 분위기에 해당하는 색상을 확인할 수 있도록 합니다.

const legend = svg.append("g")
  .attr("transform", `translate(250, 0)`);

legend.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", (d, i) => i * 20)
  .attr("width", 10)
  .attr("height", 10)
  .attr("fill", (d, i) => d3.schemeCategory10[i]);

legend.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("x", 20)
  .attr("y", (d, i) => i * 20 + 10)
  .text((d) => d.mood)
  .style("font-size", "12px")
  .style("font-weight", "bold");

위의 방법을 사용하여 D3.js를 활용한 비교 차트와 분위기 차트를 구현할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.