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

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위해 널리 사용되는 JavaScript 라이브러리입니다. 이 튜토리얼에서는 D3.js를 사용하여 히트맵을 만드는 방법에 대해 알아보겠습니다.

1. 데이터 준비

히트맵을 그리기 위해서는 적절한 데이터가 필요합니다. 히트맵은 보통 2차원의 데이터를 시각적으로 표현하기 때문에, 각각의 데이터 포인트는 행과 열의 좌표를 가지고 있어야 합니다. 예를 들어, 아래와 같은 데이터를 사용해보겠습니다.

var data = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10],
  [11, 12, 13, 14, 15],
  [16, 17, 18, 19, 20],
  [21, 22, 23, 24, 25]
];

2. SVG 요소 생성

D3.js를 사용해서 히트맵을 그리기 위해서는 SVG(Scaleable Vector Graphics) 요소를 생성해야 합니다. SVG 요소는 데이터 포인트를 표현하는 사각형들을 그릴 수 있는 영역을 제공합니다.

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

3. 데이터 시각화

히트맵을 그리는 가장 중요한 부분은 데이터를 시각화하는 것입니다. 데이터의 값에 따라 사각형의 색상을 조절하여 히트맵의 모습을 만들 수 있습니다. 아래는 D3.js의 rect 요소를 사용하여 히트맵을 그리는 예제입니다.

var rect = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return i * cellSize; })
  .attr("y", function(d, i) { return i * cellSize; })
  .attr("width", cellSize)
  .attr("height", cellSize)
  .style("fill", function(d) { return colorScale(d); });

위의 코드에서 cellSize는 각 데이터 포인트를 그릴 때 사용되는 사각형의 크기입니다. colorScale은 데이터 값을 색상으로 변환하기 위한 스케일 함수입니다.

4. 축 생성

히트맵을 좀 더 직관적으로 파악하기 위해 각 축에 해당하는 레이블을 생성할 수 있습니다. 예를 들어, 각 행과 열에 해당하는 레이블을 생성해보겠습니다.

var rowLabels = svg.selectAll("text.rowLabel")
  .data(rowLabels)
  .enter()
  .append("text")
  .text(function(d) { return d; })
  .attr("x", -margin.left / 2)
  .attr("y", function(d, i) { return i * cellSize + cellSize / 2; })
  .attr("text-anchor", "end")
  .attr("class", "rowLabel");

var columnLabels = svg.selectAll("text.columnLabel")
  .data(columnLabels)
  .enter()
  .append("text")
  .text(function(d) { return d; })
  .attr("x", function(d, i) { return i * cellSize + cellSize / 2; })
  .attr("y", -margin.top / 2)
  .attr("text-anchor", "middle")
  .attr("class", "columnLabel");

위의 코드에서 rowLabels와 columnLabels는 각각 행과 열에 해당하는 레이블을 담고 있는 배열입니다. margin은 히트맵의 여백을 조절하기 위한 변수입니다.

5. 스케일 및 색상 설정

D3.js의 스케일 함수를 사용하여 데이터 값에 대한 적절한 색상을 선택할 수 있습니다. 예를 들어, 아래와 같은 코드는 데이터 값의 범위에 따라 색상을 부여하는 스케일 함수를 생성합니다.

var colorScale = d3.scaleLinear()
  .domain(d3.extent(data, function(d) { return d; }))
  .range(["white", "steelblue"]);

위의 코드에서 d3.extent 함수는 데이터 배열에서 최소값과 최대값을 구하는 함수입니다. range 함수는 색상의 범위를 지정합니다.

6. 결과 확인하기

위의 코드를 실행하면 히트맵이 생성되어 화면에 보여집니다. 데이터가 변경되거나 히트맵의 스타일을 수정하고 싶다면, 해당 코드 부분을 수정하고 다시 실행하면 됩니다.

이제 D3.js를 사용하여 히트맵을 그리는 방법에 대해 알아보았습니다. 히트맵은 데이터 시각화에서 많이 사용되는 방법 중 하나이며, D3.js를 사용하면 더욱 다양한 히트맵을 만들 수 있습니다.

참고 자료: