Types de graphiques

Graphic Walker prend en charge une variété de types de graphiques via sa configuration geoms. Chaque type de géométrie associe les données à une représentation visuelle différente.

Graphiques génériques

Ces graphiques utilisent le système de coordonnées par défaut 'generic'.

Type de géométrie	Nom	Idéal pour
`'bar'`	Graphique à barres	Comparer des catégories, afficher des distributions
`'line'`	Graphique en ligne	Tendances dans le temps, données continues
`'area'`	Graphique en aires	Totaux cumulés, part du tout dans le temps
`'point'`	Nuage de points	Corrélations entre deux mesures
`'circle'`	Graphique en cercles	Identique au nuage de points mais avec des cercles remplis
`'tick'`	Graphique en tirets	Distribution de valeurs le long d'un axe
`'rect'`	Carte de chaleur	Distributions bidimensionnelles, densité
`'arc'`	Camembert / Anneau	Proportions partie-tout
`'boxplot'`	Diagramme en boîte	Distributions statistiques (quartiles, valeurs aberrantes)
`'table'`	Tableau de données	Affichage brut des données dans la vue graphique

Graphiques géographiques

Ces graphiques nécessitent coordSystem: 'geographic'.

Type de géométrie	Nom	Idéal pour
`'poi'`	Carte de points	Points de données basés sur la localisation
`'choropleth'`	Carte choroplèthe	Comparaisons régionales avec des zones colorées

Canaux d'encodage visuel

Chaque type de graphique utilise des canaux d'encodage visuel pour associer les champs de données aux propriétés visuelles :

Canal	Description	Types applicables
`columns`	Position sur l'axe X	Tous les graphiques génériques
`rows`	Position sur l'axe Y	Tous les graphiques génériques
`color`	Teinte de couleur	Tous les graphiques
`opacity`	Transparence	Tous les graphiques
`size`	Taille de l'élément	point, circle
`shape`	Forme de l'élément	point
`theta`	Angle	arc (camembert/anneau)
`radius`	Rayon	arc (trou de l'anneau)
`longitude`	Longitude cartographique	poi
`latitude`	Latitude cartographique	poi
`geoId`	Identifiant de région géographique	choropleth
`details`	Regroupement détaillé (pas d'encodage visuel)	Tous les graphiques
`text`	Étiquettes textuelles	Tous les graphiques
`filters`	Filtrage au niveau des lignes	Tous les graphiques

Agrégation

Lorsque defaultAggregated est true (valeur par défaut), les champs de mesure sont agrégés automatiquement. Fonctions d'agrégation disponibles :

Agrégateur	Description
`sum`	Somme des valeurs
`mean`	Moyenne arithmétique
`count`	Nombre d'enregistrements
`min`	Valeur minimale
`max`	Valeur maximale
`median`	Valeur médiane
`variance`	Variance statistique
`stdev`	Écart-type
`distinctCount`	Nombre de valeurs uniques

Modes d'empilement

Les modes d'empilement contrôlent comment les marques superposées sont arrangées. Définis via layout.stack :

Mode	Description
`'none'`	Pas d'empilement — les marques se superposent
`'stack'`	Empile les marques les unes sur les autres
`'normalize'`	Empile et normalise à 100 %
`'zero'`	Empile à partir de la ligne de base zéro
`'center'`	Empilement centré (streamgraph)

Facettage

Divisez une visualisation en plusieurs panneaux en plaçant des champs de dimension dans rows ou columns à côté des champs de mesure. Graphic Walker crée automatiquement une mise en page facettée (petits multiples).

Par exemple, placer Region dans les colonnes et Sales dans les lignes avec Month également dans les colonnes crée une rangée de graphiques — un par région — chacun montrant les ventes dans le temps.

Modes de taille

Contrôlez le dimensionnement des graphiques via layout.size.mode :

Mode	Comportement
`'auto'`	Dimensionné automatiquement en fonction du contenu
`'fixed'`	Utilise les valeurs `width` et `height` spécifiées
`'full'`	Remplit le conteneur parent

Exemple de configuration

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