Visualisation géographique

Graphic Walker prend en charge deux types de visualisations géographiques : les cartes choroplèthes (régions colorées) et les cartes de points (marqueurs à des coordonnées). Les deux nécessitent de définir le système de coordonnées sur 'geographic'.

Cartes choroplèthes

Les cartes choroplèthes colorent les régions géographiques en fonction des valeurs de données. Vous avez besoin de :

1. Un fichier GeoJSON ou TopoJSON définissant les frontières des régions
2. Un champ dans vos données qui correspond aux identifiants de région dans les données géographiques

Utilisation de la prop geographicData

Passez les données géographiques directement :

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
  }}
/>

Dans la configuration du graphique, définissez coordSystem: 'geographic' et geoms: ['choropleth'], puis glissez le champ d'état vers le canal geoId et une mesure vers le canal color.

Utilisation de la prop geoList

Fournissez une liste de jeux de données géographiques parmi lesquels les utilisateurs peuvent choisir dans l'interface :

<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',
    },
  ]}
/>

Support TopoJSON

Les fichiers TopoJSON sont plus compacts que les GeoJSON. Spécifiez objectKey pour sélectionner quelle couche utiliser :

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

Cartes de points (POI)

Les cartes de points affichent les données sous forme de marqueurs à des coordonnées géographiques. Vos données ont besoin de champs de longitude et de latitude.

Dans la configuration du graphique, définissez coordSystem: 'geographic' et geoms: ['poi'], puis encodez les champs de longitude et de latitude dans les canaux correspondants.

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' },
];

Tuiles de carte personnalisées

Personnalisez l'URL des tuiles de fond de carte via la propriété geoMapTileUrl dans IVisualLayout :

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

Options de mise en page pour les cartes