UI 设计提示词库

图表图鉴 / 条目 06 / 数据类型 地理数据

图表图鉴 / 地理编码原理

06地理分级填色与气泡地图

Choropleth Map 与 Bubble Map / 区域数值的空间编码

当数据自带区域或位置维度、且空间分布本身是核心洞察时,地理编码把统计值折算为 填色明度阶(分级填色)或点位半径(气泡地图)。本页标本以虚构的云澜省 十个市单元茶园面积为例,演示从原始数值到分箱、填色、读数、数据表后备的完整链路。

最佳图型Choropleth / Bubble Map 备选地理热力图 交互平移 + 缩放 + 下钻 无障碍风险条件性 conditional 推荐库D3.js / Mapbox / Leaflet

甲分级填色标本 / 云澜省茶园面积

区域全省合计
数值 万亩205.6
分级与占比十个市单元
等距断点 / 单位 万亩 / 淡 至 深为低 至 高 五级 / n = 10

键盘操作:区域可 Tab 聚焦并在读数面板显示数值 / Enter 在下方数据表定位该区域 / 画布聚焦后方向键平移 / 放大、缩小按钮调视野 / 复位还原。注:云澜省及十市为虚构示意地理单元,数据参考产茶大省量级编制。

编码警示:本标本以总量(万亩)填色仅为教学演示;当区域面积差异悬殊时,大区域会在视觉上被放大, 官方选型建议此时改用条形图或改编码亩均量与占比(比率型数据)后再填色。

乙地理编码原理

  • 区域多边形到 空间位置,恒定通道,地理编码的基底,不随数值变化
  • 面积值到 填色明度阶,分级填色 Choropleth,先分箱后映射五档绿阶
  • 城市点位到 圆面积 ∝ 数值,气泡地图 Bubble Map,半径按平方根折算
  • 边界与名称到 留白缝隙 + 直接标注,不以颜色为唯一载体(条件性风险的核心缓解)

比率型数据(占比、亩均)适合填色;总量型数据更适合气泡或改用条形图。

丙气泡地图变体 / 点为城市节点

同幅底图换成点位编码后,总量对比不再受区域面积干扰,适合城市节点型地理数据。

丁分箱说明 / 等距与分位

等距分箱 / Equal Interval

断点 0、9、18、27、36、45,均分值域

0 至 9岚谷、云和
9 至 18苍溪、丹霞、砚山
18 至 27雾岭、屏南
27 至 36青峒
36 至 45澜城、竹海

断点整、跨期可比;风险是高值挤在顶级、中段空箱,本例四级仅落 1 地区。

分位分箱 / Quantile

每箱地区数相等(n = 10,每箱 2 地区)

6.8 至 7.4岚谷、云和
11.3 至 12.6丹霞、苍溪
16.5 至 18.4砚山、雾岭
24.8 至 27.9屏南、青峒
38.7 至 41.2竹海、澜城

区分度最大、色阶利用充分;风险是断点值不整且随样本变动,跨期不可直接比较。

戊数据表后备 / 可排序区域清单

全省茶园合计 205.6 万亩;最高为澜城市 41.2 万亩;前三市(澜城、竹海、青峒)合计 107.8 万亩, 约占全省 52.4%,空间上向中部与东部集聚。此表为读屏与精确取数的等效视图。

区域
面积 万亩
占全省
等距分级
分位分级

占比经四舍五入,合计与 100% 可能相差 0.1 个百分点。等距分级断点 0 / 9 / 18 / 27 / 36 / 45;分位分级每箱 2 地区。

己适用判据

  • 数据含区域或位置维度(行政区、网格、点位)
  • 空间分布本身是用户的核心洞察
  • 需要结合真实地理位置做探索与下钻

庚不适用判据

  • 区域面积差异悬殊,视觉比较会被误导,改用条形图
  • 移动端为主的场景(小图幅难辨区域与断点)
  • 无空间规律可读时,地图只是装饰

辛工程参数与无障碍

渲染量级
<1000 区域用 SVG;≥1000 用 Canvas 或 WebGL(Deck.gl);全球尺度走切片渲染
色彩规范
同组区域用单色渐变;离散类型用分类色;图例必须给出明确断点
无障碍
直接标注区域名称,填色配边界或纹理;位置含义不得只靠颜色传达
后备路径
可排序区域表 + 地理摘要;方向键或按钮平移、加减缩放、Enter 下钻、返回复位
D3.jsMapboxLeaflet

与 map-atlas(地图图集书店样张)的分工:那一页示范地图主题的版式与装帧; 本页是图表图鉴条目 06,讲地理编码原理——数值如何经分箱折算为填色与点径,以及它的适用边界。