[javascript] D3.js를 이용한 트리 맵과 퍼즐 플롯의 구현 방법은?

21 Nov 2023

javascript

D3.js는 데이터 시각화를 위해 많이 사용되는 자바스크립트 라이브러리입니다. 이번 포스트에서는 D3.js를 이용하여 트리 맵(Tree Map)과 퍼즐 플롯(Puzzle Plot)을 구현하는 방법에 대해 알아보겠습니다.

트리 맵(Tree Map) 구현 방법

트리 맵은 계층적인 데이터를 사각형의 크기로 표현하는 방식입니다. D3.js를 사용하여 트리 맵을 구현하는 방법은 다음과 같습니다.

D3.js를 불러옵니다.

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

데이터를 준비합니다. 트리 맵은 계층적인 데이터를 표현하기 때문에 데이터 역시 계층적인 구조여야 합니다.

const data = {
  name: "Root",
  children: [
    {
      name: "Category 1",
      children: [
        { name: "Item 1", value: 20 },
        { name: "Item 2", value: 15 },
        ...
      ]
    },
    {
      name: "Category 2",
      children: [
        { name: "Item 3", value: 10 },
        { name: "Item 4", value: 5 },
        ...
      ]
    },
    ...
  ]
};

트리 맵의 크기와 위치를 설정합니다.

const width = 800;
const height = 500;

const treemap = d3.treemap()
  .size([width, height])
  .padding(1);

트리 맵을 그리기 위해 데이터를 계층 구조로 변환합니다.

const root = d3.hierarchy(data)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value);

treemap(root);

변환된 데이터를 기반으로 트리 맵을 그립니다.

const svg = d3.select("#treemap")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const cell = svg.selectAll("g")
  .data(root.leaves())
  .join("g")
  .attr("transform", d => `translate(${d.x0}, ${d.y0})`);

cell.append("rect")
  .attr("width", d => d.x1 - d.x0)
  .attr("height", d => d.y1 - d.y0)
  .attr("fill", "steelblue");

cell.append("text")
  .attr("x", 5)
  .attr("y", 15)
  .text(d => d.data.name)
  .attr("fill", "white");

이제 트리 맵을 그리는 예제 코드를 살펴보았습니다.

퍼즐 플롯(Puzzle Plot) 구현 방법

퍼즐 플롯은 데이터를 조각난 형태로 표현하는 시각화 방법입니다. D3.js를 사용하여 퍼즐 플롯을 구현하는 방법은 다음과 같습니다.

D3.js를 불러옵니다.

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

데이터를 준비합니다. 퍼즐 플롯은 조각난 형태로 데이터를 표현하기 때문에 조각을 나타내는 데이터 역시 필요합니다.

const data = [
  { name: "Piece 1", value: 20 },
  { name: "Piece 2", value: 15 },
  ...
];

퍼즐 플롯의 크기와 위치를 설정합니다.

const width = 800;
const height = 500;

퍼즐 플롯을 그리기 위해 데이터를 기반으로 조각을 생성합니다.

const svg = d3.select("#puzzleplot")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const pieces = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", (d, i) => `translate(${i * 50}, ${i * 50})`);

pieces.append("rect")
  .attr("width", 50)
  .attr("height", 50)
  .attr("fill", "steelblue");

pieces.append("text")
  .attr("x", 5)
  .attr("y", 25)
  .text(d => d.name)
  .attr("fill", "white");

생성된 조각을 퍼즐 플롯으로 배열합니다.

pieces.transition()
  .duration(1000)
  .attr("transform", (d, i) => `translate(${i * 50}, ${i * 50})`);

이제 퍼즐 플롯을 그리는 예제 코드를 살펴보았습니다.

결론

이번 포스트에서는 D3.js를 사용하여 트리 맵과 퍼즐 플롯을 구현하는 방법에 대해 알아보았습니다. D3.js를 이용하면 다양한 형태의 시각화를 쉽게 구현할 수 있으며, 데이터의 특성에 따라 적합한 시각화 방법을 선택할 수 있습니다.

참고자료: