[javascript] D3.js를 이용하여 웹 페이지에 동적인 데이터 시각화를 구현하는 방법은?

21 Nov 2023

javascript

D3.js를 이용하여 웹 페이지에 동적인 데이터 시각화를 구현하는 방법은 매우 간단합니다. D3.js는 JavaScript 기반의 데이터 시각화 라이브러리로, HTML, CSS, SVG 등과 함께 사용하여 풍부한 시각화를 가능하게 해줍니다.

D3.js 라이브러리 추가하기: D3.js를 사용하기 위해 먼저 해당 라이브러리를 웹 페이지에 추가해야 합니다. 다음과 같은 방법으로 D3.js를 추가할 수 있습니다.

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

데이터 준비하기: 시각화에 사용할 데이터를 불러오거나 생성해야 합니다. 이 단계에서는 데이터를 JSON 형식이나 CSV 형식으로 불러와서 변수에 저장하면 됩니다.

const data = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 },
  // ...
];

시각화 요소 생성하기: SVG 요소를 사용하여 시각화할 요소들을 생성합니다. 예를 들어, 막대 그래프를 구현하려면 rect 요소를 사용할 수 있습니다. D3.js의 select 및 append 함수를 사용하여 요소를 생성하고 스타일 및 속성을 설정할 수 있습니다.

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

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

데이터와 시각화 요소 연결하기: 데이터와 시각화 요소를 연결하여 데이터에 따라 시각화되도록 설정해야 합니다. D3.js의 attr 함수를 사용하여 시각화 요소의 속성을 데이터와 연결할 수 있습니다.

svg.selectAll("rect")
  .data(data)
  .attr("x", (d, i) => i * 40)
  .attr("y", (d) => 300 - d.value * 10)
  .attr("width", 30)
  .attr("height", (d) => d.value * 10)
  .style("fill", "steelblue");

이처럼 D3.js를 이용하여 동적인 데이터 시각화를 구현할 수 있습니다. D3.js에는 많은 다른 기능과 옵션이 있으니, 관련 문서를 참조하여 더 다양하고 풍부한 시각화를 구성해보세요.