数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载Vega 是一个用于描述交互式可视化的声明式语法visualization grammar。本文以 docs/about/index.md 为核心结合当前仓库的源码与文档系统梳理 Vega 的项目定位、设计动机、规格结构、运行时架构与生态工具帮助你理解 Vega 是什么、它解决了什么问题以及如何在实际项目中上手使用。Vega 是什么面向可视化设计的声明式语言Vega 是一个开源的可视化语法项目仓库根目录的 README.md 开篇即给出其定位Vegais avisualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using HTML5 Canvas or SVG.也就是说Vega 以 JSON 格式描述数据可视化设计并能基于 HTML5 Canvas 或 SVG 生成交互式视图。它诞生于数据可视化研究与实践一线——项目作者在多年工作中构建过 Prefuse、Protovis、D3.js 等系统最终希望提供一套面向更广泛人群、可迭代、可交互的通用工具。项目动机手工可视化是例外而非常态团队在 项目介绍 中明确指出由熟练设计师手工编码的 artisanal手工精制可视化在整个世界中属于例外而非常态绝大多数可视化由电子表格、商业智能工具等终端用户应用生成。虽然这些工具有价值但它们往往无法充分支撑数据分析中迭代、交互的过程。Vega 的目标因此被概括为The goal of the Vega project is to promote anecosystem of usable and interoperable tools, supporting use cases ranging from exploratory data analysis to effective communication via custom visualization design.即推动一个可用、可互操作的工具生态系统覆盖从探索性数据分析到自定义可视化设计的传播沟通等各类场景。类比 SQL一种描述可视化的语言Vega 的设计灵感来源于 SQL 之于数据库查询的定位——SQL 提供了一种表达数据库查询的语言Vega 则提供了一种声明式描述可视化的语言。Vega 规格specification包含表达丰富可视化空间所需的数据变换与视觉编码规则运行runtime解析 JSON 格式的规格构建基于 Web 的交互图形。Vega 的一个独特之处在于对声明式交互设计的支持与事件处理器回调的 spaghetti code意大利面条式代码不同Vega 将用户输入鼠标移动、触摸事件等视为头等流式数据驱动可视化响应式更新。双重定位独立工具 高层工具的汇编语言Vega 自身即可独立使用例如被部署于 Wikipedia 的 MediaWiki Graph 扩展中在 wiki 页面内直接定义可视化。但更重要的定位是作为高层工具的基础层Vega provides a formal language and computational file format for representing and reasoning about visualizations. ... Vega provides a performant runtime and can serve as an assembly language for visualization, letting other tools focus on design questions rather than low-level implementation details.即Vega 提供了一种用于表示和推理可视化的形式化语言与计算文件格式同时提供高性能运行时充当可视化的汇编语言让其他工具专注设计问题而非底层实现细节。Vega 与 D3 的关系互补而非替代Vega and D3 一节明确澄清Vega 并非要替代 D3。D3 本质上是更底层的库早期甚至被称为 visualization kernel可视化内核。Vega 建立在 D3 之上并在其实现中大量使用 D3。两者定位差异D3维持底层表达能力expressivity advantage更擅长全新的、探索性的设计想法但在自动生成可视化方面不够便捷。Vega在 D3 之上提供更高层的可视化规格语言面向常见但可定制的图表类型强调便捷与可复用。创建 Vega 的核心动机来自 vega-and-d3.md支持可定制设计提供便捷的图形标记graphical marks语言来创建自定义图形支持多种图表类型而无需受制于整体式图表组件monolithic chart widgets的限制同时提供集成的数据变换工作流模型支持自定义处理与高级布局算法。让可视化更可复用、可共享每个 Vega 规格都定义了一个可复用、可共享的图表组件数据可以内嵌于规格中形成独立定义本质上是保存与共享可视化设计的文件格式。支持程序化生成可视化Vega 提供一个目标语言程序可以动态构造 Vega 规格本质是一个 JSON 对象交给 Vega 运行时完成可视化。Vega-Lite、Lyra、Voyager 等系统均构建于此之上。提升性能与平台灵活性D3 将数据对象与 DOM 元素紧密绑定核心局限于 DOM 渲染Vega 则为渲染与事件处理提供抽象层通过内部场景图scenegraph实现 Canvas 与 SVG 双渲染。Canvas 在全组件重绘时往往比 SVG 快 2-10 倍此类对比需谨慎SVG 则适合无限缩放、可打印的矢量图形还可扩展至 WebGL 等其他渲染系统。Vega 规格JSON 可视化描述文件顶层结构一个 Vega 规格是描述交互式可视化设计的 JSON 对象。规格文档 给出了基础轮廓{ $schema: https://vega.github.io/schema/vega/v6.json, description: A specification outline example., width: 500, height: 200, padding: 5, autosize: pad, signals: [], data: [], scales: [], projections: [], axes: [], legends: [], marks: [] }顶层属性属性类型说明$schemaURLVega 模式的 URL。descriptionString可视化的文本描述5.10 起用于设置 Vega 视图容器元素的aria-label属性。backgroundColor|Signal整个视图的背景色默认透明。width / heightNumber|Signal数据矩形区域的像素宽/高。paddingNumber|Object|Signal可视化四周的内边距像素对象格式为{left: 5, top: 5, right: 5, bottom: 5}。autosizeString|Autosize|Signal视图尺寸的确定方式。configConfig标记、坐标轴、图例的默认视觉编码配置。signals[Signal]参数化可视化的动态变量。data[Data]数据集定义与变换。scales[Scale]将数据值数字、日期、类别等映射为视觉值像素、颜色、尺寸。projections[Projection]将 (longitude, latitude) 映射为 (x, y) 的制图投影。axes[Axis]可视化空间尺度映射的坐标轴。legends[Legend]可视化颜色、形状、尺寸等视觉值的图例。titleTitle描述可视化的标题文本。marks[Mark]用矩形、线、绘图符号等几何图元对数据进行视觉编码。encodeEncode顶层 group mark 的视觉属性编码例如为绘图区设置背景填充色。usermetaObjectVega 解析器忽略的可选元数据。Autosize视图尺寸的确定方式Vega 视图的总尺寸由多种因素决定显式的 width、height、padding以及坐标轴、图例、标题等内容的实际占位。对象格式为{type: pad, resize: true}其中typepad默认、fit、fit-x、fit-y或none之一。resize布尔值是否在每次视图更新时重新计算自动尺寸布局。默认false只在初始化以及 width/height 信号变化时执行布局参见 size.js如需强制外部缩放可调用 View 的resizeAPI。containscontent默认将 width/height 视为数据矩形绘图区尺寸并再加上 paddingpadding则将 padding 计入总尺寸即 width/height 表示视图的总尺寸。各类型行为none不做自动缩放总尺寸仅由 width、height、padding 决定默认总宽 width padding.left padding.right超出部分裁剪。pad默认自动扩大视图使所有内容可见总尺寸通常会超过指定值。fit调整布局使总尺寸适配给定宽高绘图区缩小以容纳坐标轴、图例、标题width/height 信号值可能被修改。fit-x/fit-y仅适配宽度或高度另一维度按pad处理。运行时架构从 JSON 规格到交互视图Vega 的 JavaScript 运行时将 JSON 规格解析为响应式数据流图reactive dataflow graph并渲染视图。核心模块与关键源码如下vega-parserparse(spec, config, options)将 Vega 规格解析为数据流运行时描述。见 parse.js会先合并默认配置mergeConfig(defaults(), config, spec.config)再交由parseView生成toRuntime()结果。vega-dataflow提供Dataflow、Operator、Transform、Pulse、changeset等数据流原语是响应式计算的引擎。vega-view提供View类封装解析后的规格并设置交互式 Web 组件。见 View.js构造函数中创建Scenegraph、初始化渲染器与事件处理器、装配运行时并执行初始pulse。vega-scenegraph场景图渲染层包含CanvasRenderer、SVGRenderer以及arc、area、rect、line、symbol、text等标记的绘制实现见 marks。统一入口vega 主包 汇合了全部能力vega-transforms、vega-view-transforms、vega-encode、vega-geo、vega-force、vega-hierarchy、vega-label、vega-regression、vega-voronoi、vega-wordcloud、vega-crossfilter等变换注册进数据流引擎并对外导出parse、View、Dataflow、scales、projections、locale等 API 与全部统计、时间、工具函数。上手实践浏览器与命令行浏览器部署在网页中加载 Vega 并渲染一个规格最基本的方式是引入完整 bundlehead script srchttps://vega.github.io/vega/vega.min.js/script /head若使用打包器如 rollup.js可模块化导入import * as vega from vega;使用 Vega-Embed推荐vegaEmbed一步完成规格加载与渲染并附带导出图片、查看源码等链接body div idview/div script vegaEmbed( #view, https://vega.github.io/vega/examples/bar-chart.vg.json ); /script /body使用 View API手动控制渲染器与容器script typetext/javascript var view; fetch(https://vega.github.io/vega/examples/bar-chart.vg.json) .then(res res.json()) .then(spec render(spec)) .catch(err console.error(err)); function render(spec) { view new vega.View(vega.parse(spec), { renderer: canvas, // renderer (canvas or svg) container: #view, // parent DOM container hover: true // enable hover processing }); return view.runAsync(); } /script注意视图会加入父 DOM 容器元素DOM 对象或 CSS 选择器字符串且初始化时容器内的既有内容会被清除。生产部署中Vega 默认通过Function构造器生成表达式函数不直接符合严格的 CSPContent Security Policy如需合规可换用表达式解释器对应 vega-interpreter 包。命令行渲染静态图vega-cli 提供vg2pdf、vg2png、vg2svg三个 Node.js 命令行工具可将 Vega JSON 渲染为 PDF、PNG、SVGvg2png [options] [input_vega_json_file] [output_png_file] vg2svg [options] [input_vega_json_file] [output_svg_file] vg2pdf [options] [input_vega_json_file] [output_pdf_file]未指定输入文件时从标准输入读取未指定输出文件时结果写入标准输出可管道传输。常用参数-b, --base数据与图片加载的基础目录-b data/相对路径-b file:///dir/data/绝对路径。-h, --headerSVG 输出包含 XML 头与 DOCTYPE仅 vg2svg。-s, --scale分辨率缩放系数默认 1如-s 2将输出分辨率翻倍。-seed随机数生成种子用线性同余生成器替换Math.random保证随机输出可复现见 statistics。-c, --config提供 Vega 配置对象。-f, --format/-t, --timeFormat设置数字格式 locale / 日期时间格式 locale见 locale。-l, --loglevel日志级别error、warn默认、info或debug。--help打印帮助。示例当前仓库 vega 包目录下vg2png test/specs-valid/bar.vg.json bar.png # 渲染为 PNG vg2svg -h test/specs-valid/bar.vg.json bar.svg # 渲染为带 XML 头的 SVG vg2pdf test/specs-valid/arc.vg.json arc.pdf # PDF 输出到标准输出 vg2png -b test test/specs-valid/choropleth.vg.json choropleth.png # 指定数据基础目录 vg2png -s 2 test/specs-valid/bar.vg.json bar.png # 双倍分辨率渲染vg2pdf ... 2 vg2pdf.log可将日志重定向到文件错误与日志均写向 stderr。Node.js 服务端渲染在服务端使用 Vega 时View使用renderer: none且不提供 DOM 元素然后调用toSVG()或toCanvas()生成静态图var vega require(vega); var view new vega.View(vega.parse(spec), {renderer: none}); view.toSVG() .then(function(svg) { /* process svg string */ }) .catch(function(err) { console.error(err); }); view.toCanvas() .then(function(canvas) { var stream canvas.createPNGStream(); }) .catch(function(err) { console.error(err); });注意生成 PNG 与文本截断的字体度量依赖 node-canvasvega 包默认不包含它需要显式加入自己的项目依赖vega-cli 包则将其作为显式依赖。Vega 生态构建其上的高阶工具与项目Projects 列出了构建于 Vega 之上的代表性工具Vega-Lite简洁的交互式可视化语言规格通常比对应 Vega 规格小一个数量级编译为完整 Vega 规格。Altair基于 Vega-Lite 的 Python API适用于 Jupyter 笔记本中快速创建统计图形。Lyra免代码的图形化界面用于创建自定义可视化设计产物为可发布复用的 Vega 规格。Voyager结合手动规格与自动图表推荐的视觉分析工具底层通过 CompassQL 可视化查询语言在成千上万的 Vega-Lite 图表中检索并排序推荐。GraphScape对 Vega-Lite 可视化之间关系建模的有向图模型支撑演示序列自动生成与设计备选方案搜索。MediaWiki Graph 扩展允许在 MediaWiki 页面内嵌 Vega 规格用于在 Wikipedia 词条中绘制图表。这些项目共同验证了 Vega 作为更高层工具的装配层/汇编语言这一设计愿景。进一步学习完整规格参考规格总览、配置、数据、变换、尺度、标记、信号、事件流、表达式。JavaScript APIParser、View、扩展性、调试。实战示例仓库 examples 目录提供大量带注释的.vg.json示例与渲染效果图tutorials 提供入门教程。视频、研究论文等更多内容见 视频、研究社区规范见 行为准则。赞分享数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载相关推荐Vega 生态系统全景解析构建在可视化语法之上的工具、语言与模型Vega 生态系统全景解析构建在可视化语法之上的工具、语言与模型 导读 Vega 是一种可视化语法visualization grammar以 JSO数据可视化Perun工作流程揭秘从目标解析到漏洞报告的完整链条Perun工作流程揭秘从目标解析到漏洞报告的完整链条 Perun 是一款专为乙方安服、渗透测试人员和甲方RedTeam红队人员设计的网络资产漏洞扫描器/扫描框Vega社区贡献指南如何参与开源可视化语法项目Vega社区贡献指南如何参与开源可视化语法项目 Vega是一个强大的可视化语法项目它让开发者能够通过JSON格式创建、保存和共享交互式可视化设计。作为一个开数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
