Skip to content

지리적 시각화

Graphic Walker는 단계구분도 (색상 영역)와 포인트 맵 (좌표의 마커) 두 가지 유형의 지리적 시각화를 지원합니다. 두 가지 모두 좌표계를 'geographic'으로 설정해야 합니다.

단계구분도

단계구분도는 데이터 값에 따라 지리적 영역에 색상을 지정합니다. 다음이 필요합니다:

  1. 영역 경계를 정의하는 GeoJSON 또는 TopoJSON 파일
  2. 지리적 데이터의 영역 ID와 일치하는 데이터 필드

geographicData Prop 사용

지리적 데이터를 직접 전달합니다:

import { GraphicWalker } from '@kanaries/graphic-walker';
 
const geoData = await fetch('/us-states.geojson').then(r => r.json());
 
<GraphicWalker
  data={salesByState}
  fields={fields}
  geographicData={{
    type: 'GeoJSON',
    data: geoData,
    key: 'name',  // property in GeoJSON features to match against
  }}
/>

차트 구성에서 coordSystem: 'geographic' 및 geoms: ['choropleth']를 설정한 후, 주 필드를 geoId 채널에, 측정값을 color 채널에 드래그하세요.

geoList Prop 사용

사용자가 UI에서 선택할 수 있는 지리적 데이터셋 목록을 제공합니다:

<GraphicWalker
  data={data}
  fields={fields}
  geoList={[
    {
      type: 'GeoJSON',
      name: 'US States',
      url: 'https://example.com/us-states.geojson',
    },
    {
      type: 'TopoJSON',
      name: 'World Countries',
      url: 'https://example.com/world-110m.json',
    },
  ]}
/>

TopoJSON 지원

TopoJSON 파일은 GeoJSON보다 더 컴팩트합니다. objectKey를 지정하여 사용할 레이어를 선택하세요:

<GraphicWalker
  data={data}
  fields={fields}
  geographicData={{
    type: 'TopoJSON',
    data: topoData,
    key: 'id',
    objectKey: 'countries',  // defaults to the first key in topology.objects
  }}
/>

포인트 맵 (POI)

포인트 맵은 지리적 좌표의 마커로 데이터를 표시합니다. 데이터에 경도와 위도 필드가 필요합니다.

차트 설정에서 coordSystem: 'geographic' 및 geoms: ['poi']를 설정한 후, 해당 채널에 경도와 위도 필드를 인코딩하세요.

const data = [
  { city: 'New York', lng: -74.006, lat: 40.7128, population: 8336817 },
  { city: 'Los Angeles', lng: -118.2437, lat: 34.0522, population: 3979576 },
];
 
const fields = [
  { fid: 'city', name: 'City', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'lng', name: 'Longitude', semanticType: 'quantitative', analyticType: 'dimension' },
  { fid: 'lat', name: 'Latitude', semanticType: 'quantitative', analyticType: 'dimension' },
  { fid: 'population', name: 'Population', semanticType: 'quantitative', analyticType: 'measure' },
];

커스텀 맵 타일

IVisualLayout의 geoMapTileUrl 속성을 통해 베이스 맵 타일 URL을 커스터마이즈하세요:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: {
      geoMapTileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    },
  }}
/>

맵 레이아웃 옵션

속성타입설명
scaleIncludeUnmatchedChoroplethboolean매칭되지 않는 영역을 색상 스케일에 포함
showAllGeoshapeInChoroplethboolean매칭 데이터가 없어도 모든 지리적 형상 표시
geoMapTileUrlstring커스텀 맵 타일 URL 템플릿
geoUrl{ type: 'GeoJSON' | 'TopoJSON'; url: string }지리적 데이터를 로드할 URL
geoKeystring데이터를 피처와 매칭하는 속성 키