Diagrammtypen

Graphic Walker unterstuetzt eine Vielzahl von Diagrammtypen ueber seine geoms-Konfiguration. Jeder Geometrietyp bildet Daten auf eine andere visuelle Darstellung ab.

Generische Diagramme

Diese Diagramme verwenden das Standard-Koordinatensystem 'generic'.

Geografische Diagramme

Diese Diagramme erfordern coordSystem: 'geographic'.

Visuelle Kodierungskanaele

Jeder Diagrammtyp verwendet visuelle Kodierungskanaele, um Datenfelder auf visuelle Eigenschaften abzubilden:

Aggregation

Wenn defaultAggregated auf true gesetzt ist (Standard), werden Messwertfelder automatisch aggregiert. Verfuegbare Aggregationsfunktionen:

Stapelmodi

Stapelmodi steuern, wie sich ueberlappende Markierungen angeordnet werden. Einstellung ueber layout.stack:

Facettierung

Teilen Sie eine Visualisierung in mehrere Panels auf, indem Sie Dimensionsfelder zusammen mit Messwertfeldern in rows oder columns platzieren. Graphic Walker erstellt automatisch ein facettiertes (Small Multiples) Layout.

Wenn Sie beispielsweise Region in Spalten und Sales in Zeilen mit Month ebenfalls in Spalten platzieren, entsteht eine Reihe von Diagrammen -- eines pro Region -- die jeweils den Umsatz ueber die Zeit zeigen.

Groessenmodi

Steuern Sie die Diagrammgroesse ueber layout.size.mode:

Konfigurationsbeispiel

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: {},
  },
};