★ FEATURED ARTICLE 数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载导读本文基于 Vega 官方示例 error-bars 及其文档 error-bars.md系统讲解如何在 Vega 中构建带误差条的均值点图dot plot用aggregate变换一次计算均值、标准差、标准误、95% 置信区间与四分位距用formula变换生成上下界字段再通过rectsymbol两种标记组合绘制误差条与均值点。读完本文你将掌握误差条规范化的完整数据管线statistics pipeline、四种离散度度量的底层数学含义以及如何用信号signal绑定下拉菜单实现交互式度量切换——这套模式可直接复用于任意基于分组统计的可视化。一、示例总览大麦产量误差条点图error-bars 展示的是一幅大麦品种平均产量点图横轴为产量Barley Yield纵轴按品种variety排布每个品种对应一个黑色圆点平均产量并配有一条水平误差条指示产量的离散程度。原始数据来自 docs/data/barley.json每条记录形如{yield: 27, variety: Manchuria, year: 1931, site: University Farm}即每个品种在多个试验站点site与年份year下各有一个yield观测值。示例按variety分组聚合后为每个品种绘制一条误差条。该示例的核心亮点在于交互性页面顶部的下拉菜单允许用户在四种度量之间切换均值的 95% 置信区间通过自助法 / bootstrapping 计算标准误Standard Error标准差Standard Deviation四分位距Interquartile Range, IQR用户切换选项时误差条会实时重绘而均值点保持不变。实现这一效果仅需三个 signal 加一段aggregate变换是 Vega 声明式交互 的典型示范。二、数据管线一次聚合四种度量2.1 读取原始数据{ name: barley, url: data/barley.json }barley数据源直接加载 JSON 文件。注意该 URL 是相对路径在 docs/examples/error-bars.vg.json 中指向同目录下的数据文件。2.2 分组聚合均值与四个离散度指标核心变换位于summary数据源{ name: summary, source: barley, transform: [ { type: aggregate, groupby: [variety], fields: [yield, yield, yield, yield, yield, yield, yield], ops: [mean, stdev, stderr, ci0, ci1, q1, q3], as: [mean, stdev, stderr, ci0, ci1, iqr0, iqr1] } ] }这里用同一个字段yield重复七次参与七种不同的聚合运算opsas含义meanmean组内均值平均值stdevstdev样本标准差sample standard deviationstderrstderr标准误standard errorci0ci095% 置信区间下界ci1ci195% 置信区间上界q1iqr0下四分位数第 25 百分位q3iqr1上四分位数第 75 百分位fields、ops、as三个数组按位置一一对齐这是 aggregate 变换 的基本用法。该变换的完整参数包括groupby、fields、ops、as、cross、drop、key等若省略fields与ops则默认执行count聚合。2.3 用 formula 变换生成对称上下界聚合只给出中心值mean和半幅统计量stdev、stderr误差条的上下端点需要自行计算。示例用四个 formula 变换 生成均值 ± 度量值的对称区间{ type: formula, as: stdev0, expr: datum.mean - datum.stdev }, { type: formula, as: stdev1, expr: datum.mean datum.stdev }, { type: formula, as: stderr0, expr: datum.mean - datum.stderr }, { type: formula, as: stderr1, expr: datum.mean datum.stderr }formula变换通过expr表达式计算派生字段as指定输出字段名若设initonly: true则仅在数据对象首次出现时求值默认false即数据变化时自动重算。至此每个品种的行拥有如下字段stdev0/stdev1均值 ± 标准差stderr0/stderr1均值 ± 标准误ci0/ci1置信区间本身即上下界无需再算iqr0/iqr1四分位距上下界之所以统一命名为xxx0/xxx1是为了配合后面datum[measure0]的动态字段访问——这是整个交互切换得以实现的关键设计。2.4 四种度量的数学定义与源码印证四种度量在 vega-transforms/src/util/AggregateOps.js 中均有对应实现样本标准差stdevMath.sqrt(dev / (valid - 1))valid 1时有效基于样本方差除以 n−1。标准误stderrMath.sqrt(dev / (valid * (valid - 1)))即stdev / sqrt(n)衡量样本均值估计的精度。q1/q3调用单元数据cell data的q1/q3方法即分位数IQR q3 − q1。ci0/ci1调用cell.data.ci0 / ci1最终由 vega-statistics/src/bootstrapCI.js 实现的自助法bootstrap计算for (j0, muArray(m); jm; j) { for (a0, i0; in; i) { a values[~~(random() * n)]; // 有放回重采样 } mu[j] a / n; // 每次重采样的均值 } mu.sort(ascending); return [quantile(mu, alpha/2), quantile(mu, 1-(alpha/2))];即对样本做多次默认 1000 次有放回重采样每次计算重采样均值得到均值抽样分布后取alpha/2与1-alpha/2分位数作为置信区间上下界默认alpha 0.05即 95% 置信区间。三、交互式度量切换signal 驱动的动态字段3.1 三个信号的分工signals: [ { name: errorMeasure, value: 95% Confidence Interval, bind: {input: select, options: [ 95% Confidence Interval, Standard Error, Standard Deviation, Interquartile Range ]} }, { name: lookup, value: { 95% Confidence Interval: ci, Standard Deviation: stdev, Standard Error: stderr, Interquartile Range: iqr } }, { name: measure, update: lookup[errorMeasure] } ]errorMeasure用户可操作的选项信号绑定select下拉菜单默认值为95% Confidence Intervallookup静态映射表把菜单文案映射为字段前缀ci/stdev/stderr/iqrmeasure派生信号lookup[errorMeasure]根据当前选项动态求值最终得到如ci、stdev这样的字段前缀。3.2 动态字段访问datum[measure0]measure信号被矩形标记的编码表达式消费update: { y: {scale: yscale, field: variety, band: 0.5}, x: {scale: xscale, signal: datum[measure0]}, x2: {scale: xscale, signal: datum[measure1]} }datum[measure0]是 Vega 表达式语言中的动态字段访问当measure ci时访问datum.ci0当measure stdev时访问datum.stdev0以此类推。这就实现了切换菜单 → 信号更新 → 误差条端点重算 → 标记重绘的完整响应链路且不需要重新执行聚合变换性能开销极小。四、比例尺与坐标轴4.1 纵向 band 比例尺与排序{ name: yscale, type: band, range: height, domain: { data: summary, field: variety, sort: {op: max, field: mean, order: descending} } }品种轴使用band比例尺域来自summary的variety字段并按组内mean的最大值降序排序——产量最高的品种排在最上方视觉上形成明显的梯度。4.2 横向线性比例尺与 nice 取整{ name: xscale, type: linear, range: width, round: true, domain: {data: summary, fields: [stdev0, stdev1]}, zero: false, nice: true }产量轴为linear比例尺域取自stdev0与stdev1两个字段即标准差区间覆盖全部品种的误差范围。zero: false避免强制从 0 起算、放大差异nice: true将域扩展到整齐的刻度值round: true使坐标取整、线条更清晰。4.3 坐标轴与 band 刻度配置axes: [ {orient: bottom, scale: xscale, zindex: 1, title: Barley Yield}, {orient: left, scale: yscale, tickCount: 5, zindex: 1} ]底部轴带标题 Barley Yield左侧轴限制刻度数tickCount: 5两者zindex: 1确保坐标轴绘制在标记之上。此外config.axisBand中设置bandPosition: 1、tickExtra: true、tickOffset: 0用于调整分类轴刻度线的位置使刻度与品种行对齐。五、标记marks绘制rect symbol 组合5.1 误差条矩形标记 rect{ type: rect, from: {data: summary}, encode: { enter: { fill: {value: black}, height: {value: 1} }, update: { y: {scale: yscale, field: variety, band: 0.5}, x: {scale: xscale, signal: datum[measure0]}, x2: {scale: xscale, signal: datum[measure1]} } } }y用band: 0.5把误差条垂直居中于每个品种的 band 区间x/x2分别映射误差条左右端点measure0与measure1height: 1让矩形退化为 1 像素高的水平线段视觉上即误差条x2是 Vega 矩形标记的经典用法只需给定一个方向端点x与反方向端点x2矩形自动铺满二者之间。5.2 均值点符号标记 symbol{ type: symbol, from: {data: summary}, encode: { enter: { fill: {value: black}, size: {value: 40} }, update: { x: {scale: xscale, field: mean}, y: {scale: yscale, field: variety, band: 0.5} } } }symbol标记以mean定位横坐标、variety的 band 中点定位纵坐标size: 40控制圆点面积。它始终显示均值不随measure信号变化从而在切换度量时保持中心点稳定凸显误差幅度的差异。关于标记的更多细节enter / update / exit 三套编码集、from、zindex、interactive等属性可参考 marks 文档。六、运行与调试建议完整规范见 docs/examples/error-bars.vg.json文档页见 docs/examples/error-bars.md数据文件为 docs/data/barley.json。最简运行方式将上述 vg.json 粘贴进 Vega 在线编辑器官方示例页自带 View in Online Vega Editor 入口或通过vega.parse(spec)解析、new vega.View(parse(spec)).runAsync()渲染到浏览器。若数据源为 CSV 等文本格式可先经type/format解析本示例数据已是 JSON直接加载即可。调试时重点检查fields/ops/as三个数组是否等长且顺序对齐measure信号的字段前缀是否与聚合输出的as命名一致datum[measure0]是否命中实际存在的字段名如ci0、stdev0。七、扩展思路换成其它聚合把ops改为min/max、median、variance等即可画出极值区间、中位数误差条等变体全部聚合运算见 aggregate 操作参考。竖向误差条交换x/y的角色用width: 1y/y2即可实现垂直误差条适用于分组柱状图叠加误差。自定义置信水平Vega 的ci0/ci1固定为 95% 置信区间如需其他水平可在vega-statistics层扩展bootstrapCI的alpha参数或改用stderr乘以系数近似。按 site 分面在groupby中加入site字段或使用 group 标记的 facet 机制即可得到每个站点一张小图的小倍数视图。多度量同屏为measure绑定 radio / toggle 控件或同时绘制多条误差条并用不同颜色区分即可在同一画布对比多种离散度。总结本示例是 Vega 数据处理管线与交互式声明的浓缩教材一条aggregate变换产出全部统计量formula变换补全对称区间rectsymbol组合完成误差条与中心点的视觉编码而三个 signal 组成的映射链则实现了下拉菜单 ↔ 动态字段 ↔ 实时重绘的零成本交互。掌握这套模式后你可以快速复用到箱线图、带状图、置信带等几乎所有需要离散度表达的场景。赞分享数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载相关推荐Altair Error Bar 误差条标记完全指南从原始数据聚合到预聚合数据可视化Altair Error Bar 误差条标记完全指南从原始数据聚合到预聚合数据可视化 导读 Error Bar 误差条是数据可视化中表达定量数据不确定性的数据可视化Plotly Python 误差条Error Bars完全指南从 Plotly Express 到 graph_objects 的配置、样式与底层实现Plotly Python 误差条Error Bars完全指南从 Plotly Express 到 graph_objects 的配置、样式与底层实现 误数据可视化数据分析使用 FiftyOne evaluate_regressions() 评估回归模型从误差度量到交互式可视化使用 FiftyOne evaluate_regressions 评估回归模型从误差度量到交互式可视化 回归模型的评估与分类任务不同核心关注的是预测值与真实人工智能计算机视觉数据集数据可视化数据标注模型评测创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
