Skip to content
GRAPHIC WALKER
Premiers pas

Premiers pas

Ce guide vous accompagne dans l'installation de Graphic Walker et le rendu de votre premier graphique interactif.

Prérequis

  • Node.js 16+
  • React 17+ (React 18 recommandé)

Installation

Installez le package avec votre gestionnaire de paquets préféré :

# npm
npm install @kanaries/graphic-walker
 
# yarn
yarn add @kanaries/graphic-walker
 
# pnpm
pnpm add @kanaries/graphic-walker

Utilisation de base

Importez le composant GraphicWalker et passez-lui vos données et définitions de champs :

import { GraphicWalker } from '@kanaries/graphic-walker';
 
const data = [
  { date: '2024-01-01', product: 'A', sales: 120, profit: 40 },
  { date: '2024-01-01', product: 'B', sales: 200, profit: 80 },
  { date: '2024-02-01', product: 'A', sales: 150, profit: 55 },
  { date: '2024-02-01', product: 'B', sales: 180, profit: 65 },
];
 
const fields = [
  { fid: 'date', name: 'Date', semanticType: 'temporal', analyticType: 'dimension' },
  { fid: 'product', name: 'Product', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'sales', name: 'Sales', semanticType: 'quantitative', analyticType: 'measure' },
  { fid: 'profit', name: 'Profit', semanticType: 'quantitative', analyticType: 'measure' },
];
 
function App() {
  return <GraphicWalker data={data} fields={fields} />;
}
 
export default App;

C'est tout — cela affiche un éditeur de visualisation interactif complet où les utilisateurs peuvent glisser des champs pour créer des graphiques.

Comprendre les champs

Chaque champ nécessite deux annotations de type :

Type sémantique

Indique à Graphic Walker quel type de données ce champ contient :

Type sémantiqueUtilisationExemples
quantitativeNombres continusrevenu, température, compteur
nominalCatégories non ordonnéesnom de produit, pays, couleur
ordinalCatégories ordonnéesnote (faible/moyen/élevé), niveau d'éducation
temporalDates et heuresdate de commande, horodatage

Type analytique

Indique à Graphic Walker comment utiliser le champ dans l'analyse :

Type analytiqueSignificationComportement
dimensionChamp de regroupementUtilisé pour diviser les données en catégories
measureChamp agrégéSommé, moyenné, compté, etc.

Règle générale : Si vous feriez un GROUP BY dessus en SQL, c'est une dimension. Si vous feriez un SUM() ou AVG() dessus, c'est une measure.

Chargement de données depuis un CSV

Vous pouvez utiliser n'importe quelle bibliothèque d'analyse CSV. Voici un exemple avec Papa Parse (opens in a new tab) :

import { GraphicWalker } from '@kanaries/graphic-walker';
import Papa from 'papaparse';
import { useState, useEffect } from 'react';
 
function App() {
  const [data, setData] = useState([]);
  const [fields, setFields] = useState([]);
 
  useEffect(() => {
    Papa.parse('/data.csv', {
      download: true,
      header: true,
      dynamicTyping: true,
      complete(results) {
        setData(results.data);
        // Auto-generate field definitions from columns
        const cols = Object.keys(results.data[0] || {});
        setFields(
          cols.map(col => ({
            fid: col,
            name: col,
            semanticType: typeof results.data[0][col] === 'number' ? 'quantitative' : 'nominal',
            analyticType: typeof results.data[0][col] === 'number' ? 'measure' : 'dimension',
          }))
        );
      },
    });
  }, []);
 
  if (!data.length) return <div>Loading...</div>;
  return <GraphicWalker data={data} fields={fields} />;
}

Ajouter des graphiques préconfigurés

Passez la prop chart pour afficher des visualisations spécifiques au chargement du composant :

import { GraphicWalker } from '@kanaries/graphic-walker';
import type { IChart } from '@kanaries/graphic-walker';
 
const charts: IChart[] = [
  {
    visId: 'chart-1',
    name: 'Sales by Product',
    encodings: {
      dimensions: [],
      measures: [],
      rows: [{ fid: 'sales', name: 'Sales', analyticType: 'measure', semanticType: 'quantitative' }],
      columns: [{ fid: 'product', name: 'Product', analyticType: 'dimension', semanticType: 'nominal' }],
      color: [],
      opacity: [],
      size: [],
      shape: [],
      theta: [],
      radius: [],
      longitude: [],
      latitude: [],
      geoId: [],
      details: [],
      filters: [],
      text: [],
    },
    config: {
      defaultAggregated: true,
      geoms: ['bar'],
      coordSystem: 'generic',
      limit: -1,
    },
    layout: {
      showTableSummary: false,
      stack: 'stack',
      showActions: false,
      interactiveScale: false,
      zeroScale: true,
      size: { mode: 'auto', width: 800, height: 600 },
      format: {},
      resolve: {},
    },
  },
];
 
function App() {
  return <GraphicWalker data={data} fields={fields} chart={charts} />;
}

Mode sombre

Contrôlez l'apparence avec la prop appearance :

// Follow system preference
<GraphicWalker data={data} fields={fields} appearance="media" />
 
// Always light
<GraphicWalker data={data} fields={fields} appearance="light" />
 
// Always dark
<GraphicWalker data={data} fields={fields} appearance="dark" />

Prochaines étapes

Graphic WalkerGraphicWalker