Geografische Visualisierung

Graphic Walker unterstuetzt zwei Arten von geografischen Visualisierungen: Choroplethenkarten (eingefaerbte Regionen) und Punktkarten (Markierungen an Koordinaten). Beide erfordern die Einstellung des Koordinatensystems auf 'geographic'.

Choroplethenkarten

Choroplethenkarten faerben geografische Regionen basierend auf Datenwerten ein. Sie benoetigen:

Eine GeoJSON- oder TopoJSON-Datei, die Regionsgrenzen definiert
Ein Feld in Ihren Daten, das mit Regions-IDs in den Geodaten uebereinstimmt

Verwendung der `geographicData`-Prop

Uebergeben Sie geografische Daten direkt:

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

Setzen Sie in der Diagrammkonfiguration coordSystem: 'geographic' und geoms: ['choropleth'], ziehen Sie dann das Bundesland-Feld in den geoId-Kanal und einen Messwert in den color-Kanal.

Verwendung der `geoList`-Prop

Stellen Sie eine Liste geografischer Datensaetze bereit, aus denen Benutzer in der Benutzeroberflaeche waehlen koennen:

<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-Unterstuetzung

TopoJSON-Dateien sind kompakter als GeoJSON. Geben Sie den objectKey an, um auszuwaehlen, welche Ebene verwendet werden soll:

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

Punktkarten (POI)

Punktkarten zeigen Daten als Markierungen an geografischen Koordinaten an. Ihre Daten benoetigen Laengen- und Breitengradfelder.

Setzen Sie in der Diagrammkonfiguration coordSystem: 'geographic' und geoms: ['poi'], und kodieren Sie dann Laengen- und Breitengradfelder in die entsprechenden Kanaele.

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

Benutzerdefinierte Kartenkacheln

Passen Sie die Basiskartenkachel-URL ueber die Eigenschaft geoMapTileUrl in IVisualLayout an:

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

Layout-Optionen fuer Karten

Eigenschaft	Typ	Beschreibung
`scaleIncludeUnmatchedChoropleth`	`boolean`	Nicht uebereinstimmende Regionen in die Farbskala einbeziehen
`showAllGeoshapeInChoropleth`	`boolean`	Alle geografischen Formen anzeigen, auch ohne uebereinstimmende Daten
`geoMapTileUrl`	`string`	Benutzerdefinierte Kartenkachel-URL-Vorlage
`geoUrl`	`{ type: 'GeoJSON' \| 'TopoJSON'; url: string }`	URL zum Laden geografischer Daten
`geoKey`	`string`	Eigenschaftsschluessel zum Abgleich von Daten mit Features

Datenberechnung Diagramm-Export