차트 유형

Graphic Walker는 geoms 구성을 통해 다양한 차트 유형을 지원합니다. 각 지오메트리 타입은 데이터를 다른 시각적 표현에 매핑합니다.

일반 차트

이 차트들은 기본 'generic' 좌표계를 사용합니다.

Geom 타입	이름	최적 용도
`'bar'`	막대 차트	카테고리 비교, 분포 표시
`'line'`	선 차트	시간에 따른 추세, 연속 데이터
`'area'`	영역 차트	누적 합계, 시간에 따른 부분 대 전체
`'point'`	산점도	두 측정값 간의 상관관계
`'circle'`	원 차트	산점도와 동일하지만 채워진 원 사용
`'tick'`	틱 차트	축을 따른 값의 분포
`'rect'`	히트맵	2차원 분포, 밀도
`'arc'`	파이 / 도넛 차트	부분 대 전체 비율
`'boxplot'`	박스 플롯	통계적 분포 (사분위수, 이상값)
`'table'`	데이터 테이블	차트 뷰 내 원시 데이터 표시

지리적 차트

이 차트들은 coordSystem: 'geographic'이 필요합니다.

Geom 타입	이름	최적 용도
`'poi'`	포인트 맵	위치 기반 데이터 포인트
`'choropleth'`	단계구분도	색상 영역을 사용한 지역 비교

시각적 인코딩 채널

각 차트 유형은 시각적 인코딩 채널을 사용하여 데이터 필드를 시각적 속성에 매핑합니다:

채널	설명	적용 가능한 타입
`columns`	X축 위치	모든 일반 차트
`rows`	Y축 위치	모든 일반 차트
`color`	색상 색조	모든 차트
`opacity`	투명도	모든 차트
`size`	요소 크기	point, circle
`shape`	요소 모양	point
`theta`	각도	arc (파이/도넛)
`radius`	반경	arc (도넛 구멍)
`longitude`	맵 경도	poi
`latitude`	맵 위도	poi
`geoId`	지리적 지역 ID	choropleth
`details`	세부 그룹화 (시각적 인코딩 없음)	모든 차트
`text`	텍스트 라벨	모든 차트
`filters`	행 수준 필터링	모든 차트

집계

defaultAggregated가 true (기본값)일 때, 측정값 필드는 자동으로 집계됩니다. 사용 가능한 집계 함수:

집계 함수	설명
`sum`	값의 합
`mean`	산술 평균
`count`	레코드 수
`min`	최솟값
`max`	최댓값
`median`	중앙값
`variance`	통계적 분산
`stdev`	표준 편차
`distinctCount`	고유 값의 수

스택 모드

스택 모드는 겹치는 마크의 배열 방식을 제어합니다. layout.stack을 통해 설정:

모드	설명
`'none'`	스택 없음 -- 마크가 겹침
`'stack'`	마크를 위에 쌓기
`'normalize'`	쌓고 100%로 정규화
`'zero'`	0 기준선에서 쌓기
`'center'`	중앙 정렬 쌓기 (스트림그래프)

패시팅

행이나 열에 차원 필드를 측정값 필드와 함께 배치하면 시각화가 여러 패널로 분할됩니다. Graphic Walker는 자동으로 패시팅 (작은 배수) 레이아웃을 생성합니다.

예를 들어, 열에 Region을 배치하고 행에 Sales를, 열에 Month도 함께 배치하면 지역별로 하나씩 -- 각각 시간에 따른 매출을 보여주는 차트 행이 생성됩니다.

크기 모드

layout.size.mode를 통해 차트 크기를 제어합니다:

모드	동작
`'auto'`	콘텐츠에 따라 자동으로 크기 조정
`'fixed'`	지정된 `width`와 `height` 값 사용
`'full'`	부모 컨테이너를 채움

구성 예시

const chart: IChart = {
  visId: 'example',
  name: 'Sales Trend',
  encodings: {
    dimensions: [],
    measures: [],
    rows: [{ fid: 'sales', name: 'Sales', analyticType: 'measure', semanticType: 'quantitative' }],
    columns: [{ fid: 'month', name: 'Month', analyticType: 'dimension', semanticType: 'temporal' }],
    color: [{ fid: 'region', name: 'Region', analyticType: 'dimension', semanticType: 'nominal' }],
    opacity: [],
    size: [],
    shape: [],
    theta: [],
    radius: [],
    longitude: [],
    latitude: [],
    geoId: [],
    details: [],
    filters: [],
    text: [],
  },
  config: {
    defaultAggregated: true,
    geoms: ['line'],
    coordSystem: 'generic',
    limit: -1,
  },
  layout: {
    showTableSummary: false,
    stack: 'none',
    showActions: false,
    interactiveScale: true,
    zeroScale: true,
    size: { mode: 'auto', width: 800, height: 400 },
    format: {},
    resolve: {},
  },
};

Vanilla JS 임베딩 테마 및 외관