一个 Vega specification 是一个 JSON 对象，它描述了一个交互式可视化设计。在定义好 specification 后，我们就可以通过调用 Vega 提供的 API 来解析 specification，从而产生交互式可视化视图。
Vega specification 整体结构如下
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"title": "title",
"description": "A specification outline example.",
"width": 500,
"height": 200,
"padding": 5,
"autosize": "pad",
"signals": [],
"data": [],
"scales": [],
"projections": [],
"axes": [],
"legends": [],
"marks": []
}
数字值。决定绘制数据的视图范围（data rectangle 组件）。额外的组件（axes, legends）一般会占用额外的空间(将它们放置在视图外面的padding所决定的区域中)。
数字值。定义 data rectangle 之外的padding。它所定义的范围用于放置额外的组件。padding 在 autosize 完成之后进行。
字符串值。自动调整画布的 content 和 padding 或者组件大小。其属性值有以下几种选项：
signals 的属性值是 signal 数组。signal 是动态变量（与静态常量相对应），是可视化的参数，可以驱动交互行为。它的值是 reactive 的，可以对输入事件流、外部 API 调用或是上流signal（数据流中位于本 signal 之前的 signal）做出反应，使得值发生变化。其值的变化会传播到其他用到该 signal 的地方，可视化会自动重新渲染。
signal 在定义后可以在 specification 的其他部分被使用：假设有一个signal 的 name 是 indexDate，则其他属性的属性值（包括表达式）中可直接引用它的名称 "expr": month(indexDate)。
"signals": [
{
"name": "indexDate",
"description": "A date value that updates in response to mousemove.",
"update": "datetime(2005, 0, 1)",
"on": [{"events": "mousemove", "update": "invert('xscale', x())"}]
}
]
以下是 signal 的一些属性：
数据集的定义和转换（transform）。在这里定义要加载的数据集以及如何对其进行处理。
"data": [
{
"name": "stats",
"format": {"type": "csv", "parse": "auto"},
"source": "table.csv",
"transform": [
{
"type": "aggregate",
"groupby": ["x"],
"ops": ["average", "sum", "min", "max"],
"fields": ["y", "y", "y", "y"]
}
]
}
]
以下是 data 的一些属性
name
必选。给数据集起一个独一无二的名字
"format": {
"type": "csv",
"parse": {
"name": "string",
"date": "date:'%m%d%Y'",
}
}
"values": [
{"index": 0, "data": 5},
{"index": 1, "data": 3},
{"index": 2, "data": 8},
{"index": 3, "data": 1}
]
Scales 将数据值（numbers，dates，categories，etc）映射为视觉值（pixels，colors，sizes）。Vega 使用 d3-scale 库所提供的 scales。
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
]
以下是 scale 的一些公共属性，不同类型的 scale 还有各自独特的属性：
使用刻度线、网格线和标签来将 scale 可视化。Vega 目前支持笛卡尔坐标系下的坐标轴。axes 可以在规范的顶层定义，也可以作为组标记的一部分。
"axes": [
{
"orient": "bottom",
"scale": "x",
"title": "X-Axis",
"encode": {
"ticks": {
"update": {
"stroke": {"value": "steelblue"}
}
},
"labels": {
"interactive": true,
"update": {
"text": {"signal": "format(datum.value, '+,')"},
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}
},
"title": {
"update": {
"fontSize": {"value": 16}
}
},
"domain": {
"update": {
"stroke": {"value": "#333"},
"strokeWidth": {"value": 1.5}
}
}
}
}
]
axe 有以下一些属性：
{"interval": "month", "step": 3}。将数据编码为图形标记，比如条形图中的矩形、折线图中的线和其它符号等。mark 的属性可以是简单的常量或数据字段，也可以使用比例尺将数据值映射到视觉值。
vega 支持的 mark 类型有 arc, area, image, group（其它mark的容器，即 svg 中的 g 标签）, line（描线，通常用于显示随着时间推移而发生的变化）, path, rect, rule, shape, symbol, text 以及 trail（可以基于下层的数据来改变尺寸的线条）。
"marks": [{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"y": {"scale": "yscale", "field": "value"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"value": "steelblue"}
},
"update": {...},
"exit": {...},
"hover": {...}
}
}]
以下是 mark 的一些属性
update, enter 和 exit。encode 之后应用。role- 前缀后，作为该组的类名。将 scale 可视化为颜色、形状或是尺寸视觉编码。
对地图（经度、纬度）数据进行制图投影。
设置整个 chart 的标题。
以下是 title 的一些属性:
整个可视化的描述。不显示出来，可被读屏软件读出。
设置整个视图的背景颜色（默认为透明）。
编码指令，用于表示图表数据矩形的顶层组标记的视觉属性。例如，这可以用来设置绘图区域的背景填充颜色，而不是整个视图。
可选元数据。将会被 Vega parser 忽略。
相关资料：
参数类型
Specification 属性