XY Heatmap

XY 히트맵 xyHeatmap를 이용해 제작한다. 해당 모듈은 xyHeatmap 타입을 그대로 노출하는 대신에 xyHeatmap 인스턴스를 생성하는 함수를 반환한다. 클라이언트 단에서 전체 모듈을 번들링한 형태로 사용할 때는 daisy.xyHeatmap()를 실행하여 xyHeatmap 인스턴스를 생성한다. 모듈별로 사용할 때에는 아래와 같이 xyHeatmap 모듈만을 불러와서 사용해도 좋다.

import xyHeatmap from 'daisy-chart/src/layouts/xyHeatmap'
xyHeatmap().container('#chart-container')
  .data(dataset)
  .dimensions(['category', 'sub-category'])
  .measures([{field: 'value', op: 'sum'}])
  .render();

XY 히트맵의 유형은 범주(dimension), 수치(measure)의 조합과 형태 변형을 위한 옵션에 의해 형태가 결정된다. 그 예시는 아래와 같다.

• 범주 : 2개의 범주를 입력하고, 각각의 범주에 따라 수평, 수직 방향의 위치를 결정한다.

• 수치

  • 0개 : 범주에 따라 구별된 노드의 개수를 수치로 사용한다.
  • 1개 : 해당 수치 값에 따라 색상의 정도를 결정한다.

xyHeatmap 타입은 RectLinear 타입을 상속받는다.

API Reference

# xyHeatmap.padding([padding]) <>

히트맵 사각형 노드 간의 간격 비율을 0—1.0 사이 값으로 설정한다. 비율의 산정 방식은 d3.scaleBand.padding의 규칙을 따른다. 기본 설정값은 0.05이다.

# xyHeatmap.reverse([reverse]) <>

기존 수평 수직 방향을 반대로 입력한다. 기본 설정값은 false이다.