如何开始用 Vega 创建和嵌入可视化?
Vega 是一套声明式可视化语法：你用 JSON 描述数据、标记、编码和交互行为，由 Vega 渲染成基于 HTML5 Canvas 或 SVG 的网页视图。它适合需要精细控制图形与交互、又希望配置可保存和分享的场景。上手路径可以概括为三步：在 Vega-Editor 里写并调试规格，参考官方示例与文档补齐语法，最后用 Vega-Embed 把视图嵌入网页。
先理解 Vega 的定位
Vega 是 NumFOCUS 赞助的项目，核心是一个可视化语法（visualization grammar）。一份 Vega 规格就是一段 JSON，它同时描述“画什么”和“怎么交互”，输出为网页视图。围绕它还有一组分工不同的工具：
| 组件 | 作用 |
|---|---|
| Vega | 底层可视化语法，JSON 描述外观与交互 |
| Vega-Lite | 更高层的语法，用更简洁的 JSON 快速生成可视化，可编译为 Vega |
| Vega-Altair | 基于 Vega-Lite 的 Python 声明式可视化库 |
| VegaFusion | 为 Vega 语法提供服务器端加速 |
| Vega-Embed | 把 Vega / Vega-Lite 视图嵌入网页 |
| Vega-Editor | 用于编写和测试 Vega、Vega-Lite 规格的 Web 应用 |
| Vega-Datasets | Vega 与 Vega-Lite 示例使用的数据集集合 |
| Vega Themes | 颜色、字体、线宽、间距等视觉属性的默认配置对象 |
| Vega-Tooltips | 用自定义 HTML 提示框替代 HTML title 属性的 tooltip 插件 |
| VlConvert | 转换 Vega-Lite 图表规格的 Rust 库、CLI 工具和 Python 库 |
如果你只是想快速出图，可以从 Vega-Lite 或 Vega-Altair 入手；需要更细粒度的图形和交互控制时，再直接写 Vega 规格。
用 Vega-Editor 编写和测试规格
Vega-Editor 是一个 Web 应用，用于编写和测试 Vega 与 Vega-Lite 可视化，内置了一批示例规格，覆盖视觉编码和交互技术。典型流程是：
- 打开在线编辑器，从示例规格中挑一个接近你需求的作为起点。
- 修改 JSON 中的
data，把数据源换成你自己的数据。 - 调整
marks和编码字段，改变图形类型与视觉映射。 - 在交互配置中定义参数和事件，观察视图的实时变化。
- 反复迭代，直到规格符合预期。
编辑器会即时渲染结果，因此每次修改都能立刻看到效果，这是验证语法和交互行为最快的方式。官方还提供 Examples、Docs 和 Tutorials 三类资源，遇到不熟悉的语法时优先查文档和教程。
用 Vega-Embed 嵌入网页
Vega-Embed 让嵌入交互式 Vega 和 Vega-Lite 视图变得简单，并支持带交互参数的嵌入。基本思路是：在页面中引入 Vega-Embed，指定要渲染的容器和规格，由它完成渲染。
需要准备的输入包括：一份合法的 Vega 或 Vega-Lite 规格（JSON），以及页面上的目标容器元素。动作是调用 Vega-Embed 的嵌入接口并传入规格。预期结果是容器内出现可交互的可视化视图，交互参数按规格定义生效。Vega-Embed 通过 jsDelivr 分发，也可以从 GitHub 获取源码和文档。
常见卡点
- 规格不渲染：先确认 JSON 本身合法，再检查规格是否符合 Vega 或 Vega-Lite 的语法要求；在 Vega-Editor 中粘贴同一份规格可以快速定位问题。
- 交互不生效：交互行为需要在规格中显式描述，Vega-Embed 只负责按规格渲染，不会自动补充交互。
- 提示框样式受限：默认提示使用 HTML title 属性，若需要自定义 HTML 提示框，可引入 Vega-Tooltips 插件。
- 主题不统一：颜色、字体、线宽、间距等可通过 Vega Themes 配置对象统一设置，避免逐处修改。
- 数据准备繁琐：Vega-Datasets 提供了示例中使用的数据集集合，可作为练习和对照的素材。
接下来做什么
先用 Vega-Editor 复现一个官方示例，再把它改成自己的数据；确认渲染和交互都正常后，用 Vega-Embed 嵌入到一个简单网页中验证端到端流程。需要更高层抽象时，再考虑 Vega-Lite 或 Vega-Altair，它们最终都可以落到 Vega 这一层来理解和调试。