Skip to content

はじめに

このガイドでは、Graphic Walkerのインストールと最初のインタラクティブチャートの描画について説明します。

前提条件

  • Node.js 16+
  • React 17+（React 18推奨）

インストール

お好みのパッケージマネージャーでパッケージをインストールしてください:

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

基本的な使い方

GraphicWalkerコンポーネントをインポートし、データとフィールド定義を渡します:

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;

これだけで完了です。ユーザーがフィールドをドラッグしてチャートを作成できる、完全なインタラクティブ可視化エディターが表示されます。

フィールドの理解

すべてのフィールドには2つの型注釈が必要です:

セマンティックタイプ

フィールドに含まれるデータの種類をGraphic Walkerに伝えます:

セマンティックタイプ用途例
quantitative連続的な数値売上、気温、カウント
nominal順序のないカテゴリ商品名、国、色
ordinal順序のあるカテゴリ評価（低/中/高）、学歴
temporal日付と時刻注文日、タイムスタンプ

アナリティックタイプ

分析でのフィールドの使い方をGraphic Walkerに伝えます:

アナリティックタイプ意味動作
dimensionグループ化フィールドデータをカテゴリに分割するために使用
measure集計フィールド合計、平均、カウントなどに使用

目安: SQLでGROUP BYするフィールドはdimensionです。SUM()やAVG()するフィールドはmeasureです。

CSVからデータを読み込む

任意のCSV解析ライブラリを使用できます。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} />;
}

事前設定されたチャートの追加

コンポーネント読み込み時に特定の可視化を表示するには、chartプロパティを渡します:

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

ダークモード

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

次のステップ