[javascript] D3.js를 사용하여 어떻게 히트맵과 트립 초트의 시각화를 만들 수 있는가?

21 Nov 2023

javascript

개요

D3.js는 JavaScript 기반의 데이터 시각화 라이브러리로, 다양한 시각화 요소를 만들 수 있습니다. 이번 블로그 포스트에서는 D3.js를 사용하여 히트맵과 트리맵 시각화를 만드는 방법을 알아보겠습니다. 히트맵은 데이터 값을 색상으로 표시하여 패턴과 관계를 시각적으로 보여주는 시각화 방법이며, 트리맵은 계층 구조를 가진 데이터를 사각형으로 표시하여 상위 및 하위 항목을 시각적으로 비교할 수 있게 해줍니다.

히트맵 시각화 만들기

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

히트맵 시각화를 만들기 위해 먼저 D3.js 라이브러리를 가져와야 합니다. 아래의 코드를 HTML 파일의 <head> 섹션에 추가합니다.

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

2. 데이터 준비하기

히트맵 시각화에 사용할 데이터를 준비합니다. 예를 들어, 2차원 배열로 행과 열의 관계를 가진 데이터를 사용할 수 있습니다.

const data = [
  [10, 20, 30],
  [40, 50, 60],
  [70, 80, 90]
];

3. SVG 요소 생성하기

D3.js를 사용하여 SVG 요소를 생성합니다. SVG 요소는 히트맵을 표현하는 데 사용됩니다.

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

4. 히트맵 생성하기

D3.js의 rect 요소를 사용하여 히트맵을 생성합니다. 각 데이터 포인트에 해당하는 사각형을 그려 색상을 적용합니다.

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * rectSize)
  .attr("y", (d, i) => i * rectSize)
  .attr("width", rectSize)
  .attr("height", rectSize)
  .style("fill", (d) => colorScale(d));

트리맵 시각화 만들기

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

트리맵 시각화를 만들기 위해 D3.js 라이브러리를 가져옵니다. 아래의 코드를 HTML 파일의 <head> 섹션에 추가합니다.

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

2. 데이터 준비하기

트리맵 시각화에 사용할 데이터를 준비합니다. 계층적인 구조를 가진 데이터를 사용할 수 있으며, D3.js의 hierarchy 함수를 사용하여 데이터를 변환해줍니다.

const data = {
  name: "Root",
  children: [
    { name: "A", value: 10 },
    { name: "B", value: 20 },
    { name: "C", value: 15 }
  ]
};

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

3. 트리맵 생성하기

D3.js의 treemap 함수를 사용하여 트리맵을 생성합니다. 생성된 트리맵은 SVG 요소에 추가됩니다.

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

treemapLayout(root);

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

nodes.append("rect")
  .attr("width", (d) => d.x1 - d.x0)
  .attr("height", (d) => d.y1 - d.y0)
  .style("fill", (d) => colorScale(d.value));

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

위의 코드는 간단한 히트맵과 트리맵 시각화를 만드는 예시입니다. D3.js를 사용하면 다양한 속성과 기능을 추가하여 더 복잡하고 인터랙티브한 시각화를 만들 수 있습니다.