vega 是一種描述圖表的語法，符合 JSON spec。d3.js 是比較低階的語法，需要用 javascript 處理。vega 只需要 JSON 文件，就撰寫出各式圖表。如果只需要一些常用的圖表，還可以使用 vega-lite，會比 vega 更簡捷。
vega 跟 d3.js 一樣，也是 Washington Interactive Data Lab 開發的，所以 vega 的底層是 d3.js。vega 並不是要取代 d3.js，而是在 d3.js 的基礎上，提供更高階的圖表語言。而且 JSON 更容易用程式碼產生出來。
可以直接從 Example Gallery | Vega-Lite 查看支援的圖表，然後根據自己想要使用的圖表，看範例去修改。
BarChart
Simple bar chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}render
Arrgegate Bar Chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart showing the US population distribution of age groups in 2000.",
"height": {"step": 17},
"data": { "url": "https://vega.github.io/vega-lite/examples/data/population.json"},
"transform": [{"filter": "datum.year == 2000"}],
"mark": "bar",
"encoding": {
"y": {"field": "age"},
"x": {
"aggregate": "sum", "field": "people",
"title": "population"
}
}
}render
Group Bar Chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category":"A", "group": "x", "value":0.1},
{"category":"A", "group": "y", "value":0.6},
{"category":"A", "group": "z", "value":0.9},
{"category":"B", "group": "x", "value":0.7},
{"category":"B", "group": "y", "value":0.2},
{"category":"B", "group": "z", "value":1.1},
{"category":"C", "group": "x", "value":0.6},
{"category":"C", "group": "y", "value":0.1},
{"category":"C", "group": "z", "value":0.2}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "category"},
"y": {"field": "value", "type": "quantitative"},
"xOffset": {"field": "group"},
"color": {"field": "group"}
}
}render
Stacked Bar Chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"},
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal",
"title": "Month of the year"
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": ["sun", "fog", "drizzle", "rain", "snow"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}render
Histrogram
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "IMDB Rating"
},
"y": {"aggregate": "count"}
}
}render
ScatterPlot
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"}
}
}render
LineChart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Stock prices of 5 Tech Companies over Time.",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/stocks.csv"},
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {"timeUnit": "year", "field": "date"},
"y": {"aggregate":"mean", "field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
}render
AreaChart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 300,
"height": 200,
"data": {"url": "https://vega.github.io/vega-lite/examples/data/unemployment-across-industries.json"},
"mark": "area",
"encoding": {
"x": {
"timeUnit": "yearmonth", "field": "date",
"axis": {"format": "%Y"}
},
"y": {
"aggregate": "sum", "field": "count",
"title": "count"
}
}
}render
Table-based Plots
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
"mark": "rect",
"encoding": {
"y": {"field": "Origin", "type": "nominal"},
"x": {"field": "Cylinders", "type": "ordinal"},
"color": {"aggregate": "mean", "field": "Horsepower"}
},
"config": {
"axis": {"grid": true, "tickBand": "extent"}
}
}render
Circulat Plots
PieChart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4},
{"category": "b", "value": 6},
{"category": "c", "value": 10},
{"category": "d", "value": 3},
{"category": "e", "value": 7},
{"category": "f", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}render
References
A High-Level Grammar of Interactive Graphics | Vega-LiteA High-Level Grammar of Interactive Graphics | Vega-Lite
