数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载导读人口金字塔Population Pyramid是人口学中最经典的可视化形态之一以年龄为纵轴、人口数量为横轴将男女人口分别向左右两侧展开直观呈现一个地区的人口年龄结构与性别构成。本文以 Vega 官方示例 population-pyramid 为骨架结合其完整 Vega 规范 population-pyramid.vg.json 与真实数据集 population.json逐段讲解如何用 Vega 的 signals、data transforms、嵌套 group mark 与 scales 构建一个可拖动时间滑块、横跨 1850—2000 年共 150 年美国人口数据的交互式人口金字塔。读完本文你将掌握 Vega 中信号驱动交互 双面板对置布局 分层数据过滤的核心组合技法并能够复用到漏斗图、对称条形图、双向分布对比等任意左右镜像型图表中。一、示例概览与数据背景该示例位于 docs/examples/其规范文件为 population-pyramid.vg.json配套的页面文档 population-pyramid.md 通过 Jekyll 的{% include example specpage.spec %}将规范渲染为可交互示例详见 docs/_includes/example并在下方完整展示 Vega JSON 规范源码。数据来源docs/data/population.json约 570 行记录字段为year年份、age年龄组以 5 岁为步长从 0 到 90、sex性别1代表男性2代表女性、people人口数量单位为人。时间范围1850 年至 2000 年每个年份采样一次从数据文件的年份枚举year:1850 year:1860 ... year:2000可以验证1890 年数据缺失——这正是原文档提醒的 missing data in 1890 现象拖动滑块至 1890 年时图表会呈现空白因为该年没有对应的数据记录。人口金字塔的典型形态年轻年龄段0—5 岁人口基数庞大随着年龄增加人数递减整体呈金字塔形美国 19 至 20 世纪的人口结构变化包括婴儿潮等人口学特征都可以通过拖动滑块直观观察。二、布局设计双面板对置与信号驱动的画布宽度人口金字塔的难点在于左右镜像男性和女性需要共享同一条年龄纵轴却分别占据左、右两块镜像的横向区域。Vega 的解决方案是用嵌套 group mark承载各自的横向比例尺与坐标轴并用signals统一协调画布宽度。signals: [ { name: chartWidth, value: 300 }, { name: chartPad, value: 20 }, { name: width, update: 2 * chartWidth chartPad }, { name: year, value: 2000, bind: {input: range, min: 1850, max: 2000, step: 10} } ]chartWidth单个面板男性或女性的宽度固定值 300。chartPad两个面板之间的间距留作中间年龄标签的显示区域固定值 20。width通过update表达式派生等于2 * chartWidth chartPad即整图宽度由两个面板与间距自动计算得到。这正是 Vega 信号反应式reactive特性的体现——width会随着上游信号变化自动重算具体机制参见 signals 文档。year当前选中的年份默认 2000并通过bind绑定到原生 HTML 的range滑块输入控件min/max/step分别为 1850、2000、10使时间轴按十年步进。顶层还设置了height: 400与padding: 5。年龄标签文本 mark 被放在画布正中x信号表达式为chartWidth chartPad / 2正好落在两个面板的接缝处实现中轴年龄标尺的效果。三、数据管线分层过滤 聚合取域人口金字塔需要三类派生数据全部通过 Vega 的 data transform 完成整个过程可拆解为四步data: [ { name: population, url: data/population.json }, { name: popYear, source: population, transform: [ { type: filter, expr: datum.year year } ] }, { name: males, source: popYear, transform: [ { type: filter, expr: datum.sex 1 } ] }, { name: females, source: popYear, transform: [ { type: filter, expr: datum.sex 2 } ] }, { name: ageGroups, source: population, transform: [ { type: aggregate, groupby: [age] } ] } ]源数据population直接通过url加载docs/data/population.json。按年份过滤popYearfilter表达式datum.year year只保留当前滑块所选年份的记录。注意表达式中的year是顶层信号名Vega 表达式可以直接引用信号值因而滑块变化会立即触发过滤重算。filter变换的完整参数说明见 filter 变换文档。按性别拆分males/females分别以datum.sex 1和datum.sex 2过滤出男性与女性子集供左右两个面板使用。聚合取域ageGroups对全量population按age字段做aggregate未指定ops/fields时默认执行count聚合即按年龄组去重得到所有年龄段的唯一取值列表用于驱动纵轴 band scale 的 domain。聚合变换的groupby、ops、drop等参数详见 aggregate 变换文档。这种过滤出交互子集 聚合出稳定 domain的双路数据设计是 Vega 交互可视化的常见模式交互过滤的数据用于绘制而 domain 数据保持稳定从而避免滑块拖动时纵轴刻度反复跳动。四、比例尺设计band 纵轴、镜像 linear 横轴与性别色标本示例同时使用了三种比例尺分别服务于不同视觉通道scales: [ { name: y, type: band, range: [{signal: height}, 0], round: true, domain: {data: ageGroups, field: age} }, { name: c, type: ordinal, domain: [1, 2], range: [#d5855a, #6c4e97] } ]yband带状比例尺范围[height, 0]使 0 岁位于底部、高龄位于顶部round: true将刻度取整避免栅格化渲染时出现亚像素错位domain 来自ageGroups数据的age字段。band 比例尺天然支持后续编码中的band: 0.5居中与band: 1铺满整格用法。cordinal序数比例尺将sex值 1男映射为橙褐色#d5855a、2女映射为紫褐色#6c4e97。真正的横轴比例尺x被分别定义在两个嵌套 group 内部且刻意互为镜像左侧女性面板grouprange: [{signal: chartWidth}, 0]即从chartWidth向左递减到 0——数值越大越靠左形成从中间向左侧延伸的布局。右侧男性面板grouprange: [0, {signal: chartWidth}]数值越大越靠右形成从中间向右侧延伸的布局。两者的domain均取全量population数据的people字段并设置nice: true与zero: true保证两边刻度范围完全一致且从零起算从而保证男女柱条在视觉上可直接对比。两个 group 还各自挂了一条orient: bottom的坐标轴format: s将人口数值以 SI 单位缩写如 1M、500K显示title分别为 Females 与 Males。五、标记编码文本年龄标签与镜像矩形条5.1 中央年龄标签第一组 mark 是text类型数据源为ageGroups每个年龄组一行{ type: text, interactive: false, from: {data: ageGroups}, encode: { enter: { x: {signal: chartWidth chartPad / 2}, y: {scale: y, field: age, band: 0.5}, text: {field: age}, baseline: {value: middle}, align: {value: center}, fill: {value: #000} } } }x固定在画布正中chartWidth chartPad / 2y通过 band 比例尺配合band: 0.5定位到每个年龄格的正中央。interactive: false表示该标记不参与任何交互事件避免遮挡下方柱条的选择与悬停。baseline: middle与align: center让文本精确居中于中轴。5.2 镜像矩形柱条两个面板各自包含一组rect标记结构完全对称仅 group 的x位置0 或chartWidth chartPad与数据源females或males不同{ type: rect, from: {data: females}, encode: { enter: { x: {scale: x, field: people}, x2: {scale: x, value: 0}, y: {scale: y, field: age}, height: {scale: y, band: 1, offset: -1}, fillOpacity: {value: 0.6}, fill: {scale: c, field: sex} } } }这里的编码技巧值得拆解xx2双端点定位x取people字段经x比例尺映射后的位置x2固定为比例尺原点0从而形成从原点向外延伸的柱条。由于两个面板的x比例尺范围互为镜像左面板的柱条自然向左生长、右面板向右生长共同构成金字塔的对称轮廓。height的band: 1与offset: -1band: 1让柱条高度占满整个年龄带offset: -1再收缩 1 像素在相邻柱条间留出细微缝隙提升视觉清晰度。fillOpacity: 0.6半透明填充让两面板重叠区域或背景可见同时柔化色块对比。fill引用c比例尺按datum.sex自动着色与上文序数色标对应。六、交互机制滑块如何驱动整图更新整个交互闭环完全由 Vega 的响应式信号系统驱动无需编写任何 JavaScript 事件代码用户拖动滑块浏览器将新值写入绑定到year信号的输入控件year信号值变化后popYear、males、females数据流中的filter变换自动重新求值表达式datum.year year引用信号过滤结果的变化沿数据流图dataflow graph向下传播触发两组rect标记重新编码渲染Vega 的 scenegraph 以最小差异增量更新画布用户即可看到金字塔随年份滑动而实时变形。这正是 signals 文档 中描述的信号驱动交互范式信号值具有反应性reactive更新后自动传播到依赖它的数据变换、比例尺与标记编码最终触发自动重绘。本文档示例本身则通过 docs/_includes/embed 嵌入页面并可在 Online Vega Editor 中打开实时调试。七、延伸思考把金字塔技法迁移到其他图表本示例浓缩了四组可复用的 Vega 模式值得在不同场景中套用模式本示例中的应用可迁移场景信号bind滑块 update派生尺寸year滑块、width派生时间轴播放、参数扫描、仪表盘联动数据分层filterpopYear→males/females任意主-子集数据流拆分嵌套 group 镜像 linear scale左右面板共用 band 纵轴漏斗图、蝴蝶图、双向条形图、级联对比x/x2双端点编码从原点向外生长的柱条甘特图、区间条、水平浮动条需要注意的是本示例的左右面板各自定义了自己的x比例尺因此在 Vega 中它们属于共享 band 纵轴、独立线性横轴的双坐标体系若要严格对齐双方的数值刻度应保证两边 domain 与 range 完全一致本例通过同时引用population数据与相同chartWidth做到。1890 年数据缺失带来的空白状态也是一个有意义的边界场景它展示了 Vega 对过滤后无数据的优雅降级——不报错、仅呈现空面板可用于学习空态处理。参考资源示例页面文档docs/examples/population-pyramid.md完整 Vega 规范docs/examples/population-pyramid.vg.json数据集docs/data/population.json信号与交互机制docs/docs/signals.mdfilter 变换docs/docs/transforms/filter.mdaggregate 变换docs/docs/transforms/aggregate.md示例画廊索引docs/examples/index.md赞分享数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载相关推荐Plotly.py 人口金字塔图Population Pyramid Charts完全指南用 go.Bar 与 go.Histogram 构建年龄-性别结构图Plotly.py 人口金字塔图Population Pyramid Charts完全指南用 go.Bar 与 go.Histogram 构建年龄 性别结数据可视化数据分析Vega 示例画廊Example Gallery深度解析从 117 个示例分类体系到可交互视图的实现原理Vega 示例画廊Example Gallery深度解析从 117 个示例分类体系到可交互视图的实现原理 Vega 是一个以 JSON 声明式规范描述可视数据可视化Vega 示例深度解析用 GeoShape 与正交投影构建交互式全球地震可视化Vega 示例深度解析用 GeoShape 与正交投影构建交互式全球地震可视化 导读 本文围绕 Vega 官方示例库中的 earthquakes 示例 htt数据可视化上一篇amis文件下载多种文件下载方式的实现下一篇Qwen-Image-Edit插件开发为现有软件添加AI编辑功能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vega 人口金字塔（Population Pyramid）示例深度解析：从 150 年人口数据到可交互可视化
数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载导读人口金字塔Population Pyramid是人口学中最经典的可视化形态之一以年龄为纵轴、人口数量为横轴将男女人口分别向左右两侧展开直观呈现一个地区的人口年龄结构与性别构成。本文以 Vega 官方示例 population-pyramid 为骨架结合其完整 Vega 规范 population-pyramid.vg.json 与真实数据集 population.json逐段讲解如何用 Vega 的 signals、data transforms、嵌套 group mark 与 scales 构建一个可拖动时间滑块、横跨 1850—2000 年共 150 年美国人口数据的交互式人口金字塔。读完本文你将掌握 Vega 中信号驱动交互 双面板对置布局 分层数据过滤的核心组合技法并能够复用到漏斗图、对称条形图、双向分布对比等任意左右镜像型图表中。一、示例概览与数据背景该示例位于 docs/examples/其规范文件为 population-pyramid.vg.json配套的页面文档 population-pyramid.md 通过 Jekyll 的{% include example specpage.spec %}将规范渲染为可交互示例详见 docs/_includes/example并在下方完整展示 Vega JSON 规范源码。数据来源docs/data/population.json约 570 行记录字段为year年份、age年龄组以 5 岁为步长从 0 到 90、sex性别1代表男性2代表女性、people人口数量单位为人。时间范围1850 年至 2000 年每个年份采样一次从数据文件的年份枚举year:1850 year:1860 ... year:2000可以验证1890 年数据缺失——这正是原文档提醒的 missing data in 1890 现象拖动滑块至 1890 年时图表会呈现空白因为该年没有对应的数据记录。人口金字塔的典型形态年轻年龄段0—5 岁人口基数庞大随着年龄增加人数递减整体呈金字塔形美国 19 至 20 世纪的人口结构变化包括婴儿潮等人口学特征都可以通过拖动滑块直观观察。二、布局设计双面板对置与信号驱动的画布宽度人口金字塔的难点在于左右镜像男性和女性需要共享同一条年龄纵轴却分别占据左、右两块镜像的横向区域。Vega 的解决方案是用嵌套 group mark承载各自的横向比例尺与坐标轴并用signals统一协调画布宽度。signals: [ { name: chartWidth, value: 300 }, { name: chartPad, value: 20 }, { name: width, update: 2 * chartWidth chartPad }, { name: year, value: 2000, bind: {input: range, min: 1850, max: 2000, step: 10} } ]chartWidth单个面板男性或女性的宽度固定值 300。chartPad两个面板之间的间距留作中间年龄标签的显示区域固定值 20。width通过update表达式派生等于2 * chartWidth chartPad即整图宽度由两个面板与间距自动计算得到。这正是 Vega 信号反应式reactive特性的体现——width会随着上游信号变化自动重算具体机制参见 signals 文档。year当前选中的年份默认 2000并通过bind绑定到原生 HTML 的range滑块输入控件min/max/step分别为 1850、2000、10使时间轴按十年步进。顶层还设置了height: 400与padding: 5。年龄标签文本 mark 被放在画布正中x信号表达式为chartWidth chartPad / 2正好落在两个面板的接缝处实现中轴年龄标尺的效果。三、数据管线分层过滤 聚合取域人口金字塔需要三类派生数据全部通过 Vega 的 data transform 完成整个过程可拆解为四步data: [ { name: population, url: data/population.json }, { name: popYear, source: population, transform: [ { type: filter, expr: datum.year year } ] }, { name: males, source: popYear, transform: [ { type: filter, expr: datum.sex 1 } ] }, { name: females, source: popYear, transform: [ { type: filter, expr: datum.sex 2 } ] }, { name: ageGroups, source: population, transform: [ { type: aggregate, groupby: [age] } ] } ]源数据population直接通过url加载docs/data/population.json。按年份过滤popYearfilter表达式datum.year year只保留当前滑块所选年份的记录。注意表达式中的year是顶层信号名Vega 表达式可以直接引用信号值因而滑块变化会立即触发过滤重算。filter变换的完整参数说明见 filter 变换文档。按性别拆分males/females分别以datum.sex 1和datum.sex 2过滤出男性与女性子集供左右两个面板使用。聚合取域ageGroups对全量population按age字段做aggregate未指定ops/fields时默认执行count聚合即按年龄组去重得到所有年龄段的唯一取值列表用于驱动纵轴 band scale 的 domain。聚合变换的groupby、ops、drop等参数详见 aggregate 变换文档。这种过滤出交互子集 聚合出稳定 domain的双路数据设计是 Vega 交互可视化的常见模式交互过滤的数据用于绘制而 domain 数据保持稳定从而避免滑块拖动时纵轴刻度反复跳动。四、比例尺设计band 纵轴、镜像 linear 横轴与性别色标本示例同时使用了三种比例尺分别服务于不同视觉通道scales: [ { name: y, type: band, range: [{signal: height}, 0], round: true, domain: {data: ageGroups, field: age} }, { name: c, type: ordinal, domain: [1, 2], range: [#d5855a, #6c4e97] } ]yband带状比例尺范围[height, 0]使 0 岁位于底部、高龄位于顶部round: true将刻度取整避免栅格化渲染时出现亚像素错位domain 来自ageGroups数据的age字段。band 比例尺天然支持后续编码中的band: 0.5居中与band: 1铺满整格用法。cordinal序数比例尺将sex值 1男映射为橙褐色#d5855a、2女映射为紫褐色#6c4e97。真正的横轴比例尺x被分别定义在两个嵌套 group 内部且刻意互为镜像左侧女性面板grouprange: [{signal: chartWidth}, 0]即从chartWidth向左递减到 0——数值越大越靠左形成从中间向左侧延伸的布局。右侧男性面板grouprange: [0, {signal: chartWidth}]数值越大越靠右形成从中间向右侧延伸的布局。两者的domain均取全量population数据的people字段并设置nice: true与zero: true保证两边刻度范围完全一致且从零起算从而保证男女柱条在视觉上可直接对比。两个 group 还各自挂了一条orient: bottom的坐标轴format: s将人口数值以 SI 单位缩写如 1M、500K显示title分别为 Females 与 Males。五、标记编码文本年龄标签与镜像矩形条5.1 中央年龄标签第一组 mark 是text类型数据源为ageGroups每个年龄组一行{ type: text, interactive: false, from: {data: ageGroups}, encode: { enter: { x: {signal: chartWidth chartPad / 2}, y: {scale: y, field: age, band: 0.5}, text: {field: age}, baseline: {value: middle}, align: {value: center}, fill: {value: #000} } } }x固定在画布正中chartWidth chartPad / 2y通过 band 比例尺配合band: 0.5定位到每个年龄格的正中央。interactive: false表示该标记不参与任何交互事件避免遮挡下方柱条的选择与悬停。baseline: middle与align: center让文本精确居中于中轴。5.2 镜像矩形柱条两个面板各自包含一组rect标记结构完全对称仅 group 的x位置0 或chartWidth chartPad与数据源females或males不同{ type: rect, from: {data: females}, encode: { enter: { x: {scale: x, field: people}, x2: {scale: x, value: 0}, y: {scale: y, field: age}, height: {scale: y, band: 1, offset: -1}, fillOpacity: {value: 0.6}, fill: {scale: c, field: sex} } } }这里的编码技巧值得拆解xx2双端点定位x取people字段经x比例尺映射后的位置x2固定为比例尺原点0从而形成从原点向外延伸的柱条。由于两个面板的x比例尺范围互为镜像左面板的柱条自然向左生长、右面板向右生长共同构成金字塔的对称轮廓。height的band: 1与offset: -1band: 1让柱条高度占满整个年龄带offset: -1再收缩 1 像素在相邻柱条间留出细微缝隙提升视觉清晰度。fillOpacity: 0.6半透明填充让两面板重叠区域或背景可见同时柔化色块对比。fill引用c比例尺按datum.sex自动着色与上文序数色标对应。六、交互机制滑块如何驱动整图更新整个交互闭环完全由 Vega 的响应式信号系统驱动无需编写任何 JavaScript 事件代码用户拖动滑块浏览器将新值写入绑定到year信号的输入控件year信号值变化后popYear、males、females数据流中的filter变换自动重新求值表达式datum.year year引用信号过滤结果的变化沿数据流图dataflow graph向下传播触发两组rect标记重新编码渲染Vega 的 scenegraph 以最小差异增量更新画布用户即可看到金字塔随年份滑动而实时变形。这正是 signals 文档 中描述的信号驱动交互范式信号值具有反应性reactive更新后自动传播到依赖它的数据变换、比例尺与标记编码最终触发自动重绘。本文档示例本身则通过 docs/_includes/embed 嵌入页面并可在 Online Vega Editor 中打开实时调试。七、延伸思考把金字塔技法迁移到其他图表本示例浓缩了四组可复用的 Vega 模式值得在不同场景中套用模式本示例中的应用可迁移场景信号bind滑块 update派生尺寸year滑块、width派生时间轴播放、参数扫描、仪表盘联动数据分层filterpopYear→males/females任意主-子集数据流拆分嵌套 group 镜像 linear scale左右面板共用 band 纵轴漏斗图、蝴蝶图、双向条形图、级联对比x/x2双端点编码从原点向外生长的柱条甘特图、区间条、水平浮动条需要注意的是本示例的左右面板各自定义了自己的x比例尺因此在 Vega 中它们属于共享 band 纵轴、独立线性横轴的双坐标体系若要严格对齐双方的数值刻度应保证两边 domain 与 range 完全一致本例通过同时引用population数据与相同chartWidth做到。1890 年数据缺失带来的空白状态也是一个有意义的边界场景它展示了 Vega 对过滤后无数据的优雅降级——不报错、仅呈现空面板可用于学习空态处理。参考资源示例页面文档docs/examples/population-pyramid.md完整 Vega 规范docs/examples/population-pyramid.vg.json数据集docs/data/population.json信号与交互机制docs/docs/signals.mdfilter 变换docs/docs/transforms/filter.mdaggregate 变换docs/docs/transforms/aggregate.md示例画廊索引docs/examples/index.md赞分享数据可视化【免费下载链接】vegaA visualization grammar.项目地址https://gitcode.com/gh_mirrors/ve/vega点击查看免费下载相关推荐Plotly.py 人口金字塔图Population Pyramid Charts完全指南用 go.Bar 与 go.Histogram 构建年龄-性别结构图Plotly.py 人口金字塔图Population Pyramid Charts完全指南用 go.Bar 与 go.Histogram 构建年龄 性别结数据可视化数据分析Vega 示例画廊Example Gallery深度解析从 117 个示例分类体系到可交互视图的实现原理Vega 示例画廊Example Gallery深度解析从 117 个示例分类体系到可交互视图的实现原理 Vega 是一个以 JSON 声明式规范描述可视数据可视化Vega 示例深度解析用 GeoShape 与正交投影构建交互式全球地震可视化Vega 示例深度解析用 GeoShape 与正交投影构建交互式全球地震可视化 导读 本文围绕 Vega 官方示例库中的 earthquakes 示例 htt数据可视化上一篇amis文件下载多种文件下载方式的实现下一篇Qwen-Image-Edit插件开发为现有软件添加AI编辑功能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考