D3.js로 데이터 시각화 및 차트 생성하기

13 Oct 2023

javascript

D3.js는 데이터 시각화 작업을 위한 강력한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트와 그래프를 생성할 수 있습니다. 이번 포스트에서는 D3.js를 사용하여 데이터를 시각화하고, 다양한 차트를 생성하는 방법에 대해 알아보겠습니다.

1. D3.js 설치 및 기본 설정

D3.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 HTML 파일에 포함해야 합니다. 다음은 D3.js를 설치하는 방법입니다.

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

위 코드를 HTML 파일의 <head> 태그 안에 추가하면 D3.js를 사용할 수 있습니다.

2. 데이터 시각화를 위한 준비

D3.js를 사용하여 데이터를 시각화하려면 시각화할 데이터의 형식을 알아야 합니다. D3.js는 JSON 형식의 데이터를 주로 사용하며, 데이터셋의 각 항목에는 특정 속성이 포함되어야 합니다.

예를 들어, 다음과 같은 JSON 데이터를 시각화하려고 한다고 가정해봅시다.

[
  {"name": "Apple", "price": 1200},
  {"name": "Banana", "price": 800},
  {"name": "Orange", "price": 1000},
  {"name": "Grapes", "price": 1500}
]

3. 바 차트 생성하기

D3.js로 가장 간단한 차트인 바 차트를 생성해보겠습니다. 바 차트는 데이터의 크기를 막대의 길이로 표현하는 차트입니다.

// SVG 요소의 너비와 높이 설정
const width = 500;
const height = 300;

// 데이터셋
const dataset = [1200, 800, 1000, 1500];

// X축의 스케일 설정
const xScale = d3.scaleBand()
  .domain(d3.range(dataset.length))
  .rangeRound([0, width])
  .paddingInner(0.05);

// Y축의 스케일 설정
const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset)])
  .range([height, 0]);

// SVG 요소 생성
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 막대 생성
svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i))
  .attr("y", d => yScale(d))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d))
  .attr("fill", "steelblue");

위 코드를 실행하면 SVG 요소에 바 차트가 생성됩니다.

4. 원 차트 생성하기

D3.js를 사용하여 원 차트를 생성하는 방법은 다음과 같습니다.

// SVG 요소의 너비와 높이 설정
const width = 500;
const height = 300;

// 데이터셋
const dataset = [1200, 800, 1000, 1500];

// 색상 설정
const color = d3.scaleOrdinal()
  .range(["#ff0000", "#00ff00", "#0000ff", "#ffff00"]);

// 아크 생성
const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(Math.min(width, height) / 2);

// Pie 생성
const pie = d3.pie();

// SVG 요소 생성
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${width / 2}, ${height / 2})`);

// 파이 차트 생성
svg.selectAll("path")
  .data(pie(dataset))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", (d, i) => color(i));

위 코드를 실행하면 SVG 요소에 원 차트가 생성됩니다.

결론

D3.js를 사용하면 다양한 종류의 차트를 생성하고 데이터를 시각화할 수 있습니다. 이번 포스트에서는 D3.js를 사용하여 바 차트와 원 차트를 생성하는 방법을 알아보았습니다. D3.js에는 많은 기능과 유용한 메소드가 있으니, 자세한 내용은 공식 문서를 참고해보세요. #D3js #데이터시각화