vega

Vega / Vega-Lite ビジュアライザー

クイックスタート： データをオブジェクトの配列として構成します → マークタイプ（bar/line/point/area/arc/rect）を選択します → エンコーディング（x、y、color、size）をフィールドに割り当てます → データ型（quantitative/nominal/ordinal/temporal）を設定します → ```vega-lite または ```vega のフェンスで囲みます。必ず $schema を含め、有効な JSON をダブルクォートで記述してください。フィールド名では大文字と小文字が区別されます。グラフの 90% には Vega-Lite を使用し、レーダーチャート、ワードクラウド、力指向グラフにのみ Vega を使用してください。

---

重要な構文ルール

ルール 1：必ずスキーマを含める

"$schema": "https://vega.github.io/schema/vega-lite/v5.json"

ルール 2：有効な JSON のみを使用する

❌ {field: "x",}     → Trailing comma, unquoted key
✅ {"field": "x"}    → Proper JSON

ルール 3：フィールド名をデータと一致させる

❌ "field": "Category"  when data has "category"
✅ "field": "category"  → Case-sensitive match

ルール 4：有効な型を指定する

✅ quantitative | nominal | ordinal | temporal
❌ numeric | string | date

---

よくある落とし穴

問題	解決策
グラフが描画されない	JSON の有効性を確認し、$schema を検証します
データが表示されない	フィールド名が完全に一致している必要があります
グラフの種類が違う	マークをデータ構造に合わせます
色が見えない	色スケールのコントラストを確認します
2 軸の問題	resolve: {scale: {y: "independent"}} を追加します

---

出力形式

```vega-lite
{...}
```

または、フル Vega の場合：

```vega
{...}
```

---

関連ファイル

高度なグラフパターンや複雑なビジュアライゼーションについては、以下のリファレンスを参照してください。

• examples.md — 積み上げ棒グラフ、グループ化棒グラフ、複数系列の折れ線グラフ、面グラフ、ヒートマップ、レーダーチャート（Vega）、ワードクラウド（Vega）、インタラクティブなグラフの例