Skip to content

地理的可視化

Graphic Walkerは2種類の地理的可視化をサポートしています: コロプレスマップ（色付き領域）とポイントマップ（座標上のマーカー）。いずれも座標系を'geographic'に設定する必要があります。

コロプレスマップ

コロプレスマップは、データ値に基づいて地理的領域を色分けします。以下が必要です:

  1. 領域の境界を定義するGeoJSONまたはTopoJSONファイル
  2. 地理データの領域IDに一致するデータ内のフィールド

geographicDataプロパティの使用

地理データを直接渡します:

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プロパティの使用

ユーザーが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フィーチャーとデータをマッチングするプロパティキー