Color mode

Vega-Lite

Vega-Lite の仕様を使ってデータ可視化を埋め込む Plugin です。

導入

bash
npm install @riebeckite/plugin-vega-lite

Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は riebeckite.config.ts の plugins に登録して利用します。

使用例

データを宣言的な仕様からグラフとして可視化したい記事で利用します。数値データを解説するレポートや分析記事に向いています。

ソース

markdown
```vega-lite
{
  "title": "Revenue",
  "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}
```

実行例

Revenue
Vega-Lite spec
text
{
  "title": "Revenue",
  "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

使いどころ

この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。

実際の表示例が用意されている場合は、Plugin Showcase でも確認できます。

詳細仕様

設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは Plugin System、Plugin を作る場合は Writing a Plugin を参照してください。

History

1 changesCollapseExpand
1 + # Vega-Lite
2 +
3 + Vega-Lite の仕様を使ってデータ可視化を埋め込む Plugin です。
4 +
5 + ## 導入
6 +
7 + ```bash
8 + npm install @riebeckite/plugin-vega-lite
9 + ```
10 +
11 + Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は `riebeckite.config.ts` の `plugins` に登録して利用します。
12 +
13 + ## 使用例
14 +
15 + データを宣言的な仕様からグラフとして可視化したい記事で利用します。数値データを解説するレポートや分析記事に向いています。
16 +
17 + ### ソース
18 +
19 + ````markdown
20 + ```vega-lite
21 + {
22 + "title": "Revenue",
23 + "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
24 + "mark": "bar",
25 + "encoding": {
26 + "x": { "field": "category", "type": "nominal" },
27 + "y": { "field": "value", "type": "quantitative" }
28 + }
29 + }
30 + ```
31 + ````
32 +
33 + ### 実行例
34 +
35 + ```vega-lite
36 + {
37 + "title": "Revenue",
38 + "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
39 + "mark": "bar",
40 + "encoding": {
41 + "x": { "field": "category", "type": "nominal" },
42 + "y": { "field": "value", "type": "quantitative" }
43 + }
44 + }
45 + ```
46 +
47 + ## 使いどころ
48 +
49 + この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。
50 +
51 + 実際の表示例が用意されている場合は、[Plugin Showcase](./showcase.ja.md) でも確認できます。
52 +
53 + ## 詳細仕様
54 +
55 + 設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは [Plugin System](../framework/plugin-system.ja.md)、Plugin を作る場合は [Writing a Plugin](./writing-a-plugin.ja.md) を参照してください。
56 +
57 +