クイックスタート

VSeed は分析領域向けの標準化 DSL（ドメイン固有言語）です。優雅なデータ編成により、データ可視化をシンプルにします。

インストール

コアライブラリ vseed と、基盤となるレンダリングエンジン vchart、vtable をインストールします。

npm

yarn

pnpm

bun

deno

npm install @visactor/vseed @visactor/vchart @visactor/vtable

登録

アプリケーションのエントリでチャート機能とテーマを登録します（一度だけ実行します）。

App.tsx

import { registerAll } from '@visactor/vseed'

// すべての組み込みチャートタイプとテーマを登録
registerAll()

ビルド

Builder を使って VSeed DSL をレンダリング可能な Spec 設定へ変換します。

logic.ts

import { VSeed, Builder } from '@visactor/vseed'

// 1. 分析意図（DSL）を定義
const vseed: VSeed = {
  chartType: 'line', // チャートタイプ
  dataset: [
    // データソース
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
    { date: '2021', profit: 30, sales: 300 },
    /* ... */
  ],
}

// 2. レンダリング設定（Spec）を生成
const spec = Builder.from(vseed).build()

レンダリング

生成した Spec を VChart コンポーネントに渡してレンダリングします。

import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { registerAll, VSeed, Builder } from '@visactor/vseed'

registerAll()

const Demo = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const vseed: VSeed = {
      chartType: 'line',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
      ],
    }

    const spec = Builder.from(vseed).build()
    const vchart = new VChart(spec, { dom: containerRef.current })

    vchart.renderSync()
    return () => vchart.release()
  }, [])

  return <div ref={containerRef} style={{ height: 300 }} />
}

export default Demo

コア概念

VSeed の設計思想は、「何を分析したいか」（DSL）と 「チャートをどう描画するか」（Spec）を分離することです。

1. VSeed DSL

データとビジネス上の意味に焦点を当てたコア設定オブジェクトです。軸や凡例レイアウトなどの視覚的な詳細を気にする必要はありません。VSeed はチャートタイプに応じた視覚仕様を標準で提供します。

const vseed: VSeed = {
  chartType: 'line',
  dataset: [
    { date: '2019', profit: 10, sales: 100 },
    { date: '2020', profit: 30, sales: 200 },
  ],
  dimensions: [{ id: 'date', alias: '日付' }],
}

2. Builder

簡潔な DSL を詳細な VChart/VTable Spec へ変換する変換エンジンです。多くのデータ処理と視覚仕様が組み込まれています。

// Builder パターンはチェーン呼び出しを許可し、今後さらに多くの中間処理をサポートします
const spec = Builder.from(vseed).build()

応用：ピボット分析

VSeed の強みは多次元分析にあります。Dimensions と Measures の定義を追加するだけで、複雑なピボットチャートや複合チャートを生成できます。

import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { register, PivotChart } from '@visactor/vtable'
import { registerAll, VSeed, Builder, ColorIdEncoding } from '@visactor/vseed'

register.chartModule('vchart', VChart)
registerAll()

const Demo = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const vseed: VSeed = {
      chartType: 'line',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
      ],
      // Dimensions と Measures を定義
      dimensions: [{ id: 'date', alias: '日付' }],
      measures: [
        { id: 'profit', alias: '利益', parentId: 'profit-group' },
        { id: 'sales', alias: '売上', parentId: 'sales-group' },
      ],
    }

    const spec = Builder.from(vseed).build()
    const tableInstance = new PivotChart(containerRef.current, spec)

    // 例：インタラクティブ連動
    tableInstance.on('legend_item_click', (args) => {
      tableInstance.updateFilterRules([
        {
          filterKey: ColorIdEncoding,
          filteredValues: args.value,
        },
      ])
    })

    return () => tableInstance.release()
  }, [])

  return <div ref={containerRef} style={{ height: 300 }} />
}

export default Demo

#クイックスタート

#インストール

#登録

#ビルド

#レンダリング

#コア概念

#1. VSeed DSL

#2. Builder

#応用：ピボット分析