[javascript] D3.js를 이용한 트리맵 그리기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 JavaScript 라이브러리 중 하나입니다. 트리맵은 계층적인 데이터를 사각형의 크기로 표현하는 방식으로, 데이터의 상대적인 비율을 시각적으로 이해하기 용이합니다. 이번 포스트에서는 D3.js를 이용하여 트리맵을 그리는 방법에 대해 알아보겠습니다.

필요한 라이브러리 추가하기

트리맵을 그리기 위해서는 D3.js를 포함한 몇 가지 라이브러리를 추가해야 합니다. HTML 문서의 <head> 태그 내부에 다음 코드를 추가하여 필요한 라이브러리들을 로드하세요.

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

데이터 준비하기

트리맵을 그리기 위해서는 계층적인 데이터가 필요합니다. 예를 들어, 다음과 같은 JSON 형식의 데이터를 사용해보겠습니다.

[
  {
    "name": "A",
    "value": 10,
    "children": [
      {
        "name": "A1",
        "value": 5
      },
      {
        "name": "A2",
        "value": 3
      },
      {
        "name": "A3",
        "value": 2
      }
    ]
  },
  {
    "name": "B",
    "value": 7
  },
  {
    "name": "C",
    "value": 8
  }
]

트리맵 그리기

D3.js를 사용하여 트리맵을 그리기 위해서는 다음과 같은 단계들을 따라야 합니다.

SVG 요소 추가하기: 트리맵을 그릴 SVG 요소를 추가합니다.
계층 데이터 생성하기: d3.hierarchy() 함수를 사용하여 계층 데이터를 생성합니다.
트리맵 레이아웃 설정하기: d3.treemap() 함수를 사용하여 트리맵 레이아웃을 설정합니다.
데이터 바인딩하기: 데이터를 트리맵에 바인딩합니다.
사각형 그리기: 바인딩된 데이터를 이용하여 사각형을 그립니다.
텍스트 추가하기: 사각형에 데이터에 대한 텍스트를 추가합니다.

이제 위 단계들을 코드로 구현해보겠습니다. 다음은 전체 코드입니다.

const data = [
  {
    "name": "A",
    "value": 10,
    "children": [
      {
        "name": "A1",
        "value": 5
      },
      {
        "name": "A2",
        "value": 3
      },
      {
        "name": "A3",
        "value": 2
      }
    ]
  },
  {
    "name": "B",
    "value": 7
  },
  {
    "name": "C",
    "value": 8
  }
];

// SVG 요소 추가하기
const svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

// 계층 데이터 생성하기
const root = d3.hierarchy(data)
  .sum(d => d.value);

// 트리맵 레이아웃 설정하기
const treemap = d3.treemap()
  .size([400, 300]);

// 데이터 바인딩하기
treemap(root);

// 사각형 그리기
const rects = svg.selectAll("rect")
  .data(root.leaves())
  .enter()
  .append("rect")
  .attr("x", d => d.x0)
  .attr("y", d => d.y0)
  .attr("width", d => d.x1 - d.x0)
  .attr("height", d => d.y1 - d.y0)
  .attr("fill", "steelblue");

// 텍스트 추가하기
const texts = svg.selectAll("text")
  .data(root.leaves())
  .enter()
  .append("text")
  .attr("x", d => (d.x0 + d.x1) / 2)
  .attr("y", d => (d.y0 + d.y1) / 2)
  .text(d => d.data.name)
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  .attr("fill", "white");

위 코드를 실행하면 입력한 데이터를 바탕으로 트리맵이 그려집니다.

결론

D3.js를 이용하여 트리맵을 그리는 방법을 알아보았습니다. D3.js의 다양한 기능을 활용하면 더 다양한 시각화를 구현할 수 있습니다. 다음은 D3.js 공식 홈페이지와 D3.js 예제 갤러리 링크입니다. 참고하여 더 많은 시각화 효과를 얻을 수 있습니다.