Scatter

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

Scatter 타입은 RectLinear, Brushable, Zoomable 타입을 상속받는다.

import scatter from 'daisy-chart/src/layouts/scatter'
scatter().container('#chart-container')
  .data(dataset)
  .dimensions(['category']) 
  .measures(['value1', 'value2'])
  .axis('x').axis('y')
  .render();

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

• 수치 2개

  • 범주 0개: 첫번째 수치로 마크의 수평 위치를 결정하고, 두번째 수치로 수직 위치를 결정하는 모노 스캐터플롯
  • 범주 1개: 위의 스캐터플롯에 범주에 따라 마크(Mark)의 색상을 변경하는 컬러 스캐터플롯

• 수치 3개

  • 범주 0개: 수치 2개로 설정한 스캐터플롯에 세번째 수치로 마크 원의 반지름을 결정하는 모노 크기 스캐터플롯
  • 범주 1개: 위의 스캐터플롯에 범주에 따라 마크(Mark)의 색상을 변경하는 컬러 크기 스캐터플롯

• 스몰 멀티플

  • .facet(true) : 범주로 영역을 분리하는 스몰멀티플 형태의 다수의 모노 스캐터플롯, 범주가 1개 이상인 경우에만 작동한다.

API Reference

# scatter.regionPadding([regionPadding]) <>

scatter.facet이 활성화되어 스몰멀티플을 그릴 때, 영역간의 간격 비율을 d3.scaleBand.padding의 규칙에 따라 설정한다. 기본 설정값은 0.1 이다.

# scatter.size([size]) <>

스캐터플롯 원 반지름의 범위를 결정한다. [min, max] 형태를 px 단위로 전달한다. 기본 설정값은 [3,12] 이다.