Vega Editorでデータをインタラクティブなグラフにして共有する

Vega Editorでデータをインタラクティブなグラフにして共有する方法です。

Vega Editorとは？
グラフを作る
違うグラフを作る
共有する
更なる詳細・Examples
参考

Vega Editorとは？

Vega Editor は、Webブラウザ上でデータ可視化を作成・編集・共有できるツールです。

vega.github.io

開発はオープンソースで行われています。

vega.github.io

Vega という宣言的にデータを可視化するための言語を用いて記述することで、多様なグラフ・チャートを作成できます。
また、Vega-Lite という高レベルの言語も用意されており、これを使うとよく使うグラフを簡単に記述できます。

グラフを作る

それでは実際に簡単なグラフを作ってみます。
Vega Editorを開いて、左側のペインに以下のJsonを入力します。

{
  "width": {"step": 60},
  "height": 300,
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43},
      {"category": "D", "value": 91}
    ]
  },
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {
      "field": "category",
      "type": "nominal",
      "title": "カテゴリ"
    },
    "y": {"field": "value", "type": "quantitative", "title": "値"},
    "color": {"field": "category", "type": "nominal"}
  }
}

すると、右側にグラフが描画されることを確認できます。（もし左上のドロップダウンでVega-Liteが設定されていなかったらVega-Liteを選択してください）

このグラフにカーソルを合わせると、インタラクティブにtooltipが表示されることを確認できます。

違うグラフを作る

次に少し表現が違うグラフを作ってみます。
Vega Editor に以下を入力します。

{
  "data": {
    "values": [
      {"date": "2025-01-01", "sales": 150},
      {"date": "2025-02-01", "sales": 200},
      {"date": "2025-03-01", "sales": 250},
      {"date": "2025-04-01", "sales": 180},
      {"date": "2025-05-01", "sales": 300}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal", "title": "月"},
    "y": {"field": "sales", "type": "quantitative", "title": "売上"},
    "tooltip": [{"field": "date"}, {"field": "sales"}]
  },
  "selection": {
    "grid": {"type": "interval", "bind": "scales"}
  },
  "config": {
    "mark": {"point": true}
  }
}