tufte-data-viz

Tufte 数据可视化

生成或审查以可视化方式呈现数据的代码时，始终遵循 Edward Tufte 的原则。本技能适用于图表生成，不适用于幻灯片／演示文稿设计。

工作流

创建任何图表时，按顺序执行以下步骤：

步骤 1：确定要传达的信息

编写代码前，确定：

1. 图表必须呈现的关键发现或趋势。
2. 比较背景——基准值、前一时期、目标或同类对象。没有背景的数据毫无意义。
3. 最适合数据结构的图表类型（参见下文的图表类型指南）。

步骤 2：应用通用规则

检查以下规则。每条规则都是默认要求——只有在用户明确提出其他要求时才可偏离。

步骤 3：应用特定库的配置

使用库快速参考表，查找目标库所需的覆盖设置。要查看完整的代码示例和辅助函数，请从 rules/ 中选择一个与该库匹配的规则文件阅读。

步骤 4：验证

呈现图表前，按照本文件底部的验证清单逐项检查。

---

通用规则

规则 1–14 涵盖静态原则；15–19 针对屏幕进行扩展；20–22 涉及内容和格式。

1. 移除顶部和右侧边框

图表不应有顶部或右侧的坐标轴线、边框或轴脊。底部和左侧的坐标轴已足够。顶部和右侧的线条纯属图表垃圾。

2. 直接标注，不用图例

直接标注每个数据系列——在线条端点处、条形上或旁边、群组旁边。完全移除 <Legend> 组件。如果只有一个系列，图表标题即可说明背景；无需标注。

3. 默认不显示网格线

默认不显示网格线。对于需要读取精确数值的静态图表，可添加透明度极低（0.08–0.12）的水平网格线。对于交互式图表，优先使用悬停时显示的上下文十字线（参见规则 15）。绝不添加垂直网格线。

4. 坐标轴贴合数据范围

坐标轴线应仅覆盖数据范围，而不是从零延伸到某个任意最大值。坐标轴从数据最小值（或接近最小值处）开始，到最大值结束。

5. 不使用 3D 效果

不使用透视、深度，也不在图表元素上添加阴影。二维数据应以二维方式呈现。

6. 除非明确要求，否则不使用饼图

默认使用按数值排序的水平条形图。如果用户明确要求饼图：最多 4 个扇区，仅使用二维效果，从 12 点钟方向开始，并在每个扇区上直接标注百分比。

7. 长宽比约为 1.5:1

图表宽度应约为高度的 50%。标准尺寸：600x400、750x500、900x600。例外：迷你图和小多图可以更紧凑。

8. 优先使用灰色，有选择地突出重点

默认数据系列颜色为中灰色（#666）。使用单一强调色突出显示最重要的系列或数据点。使用的不同颜色不得超过 4 种。选择合适的调色板类型：无序分组使用分类色板（4 色、低饱和度）；有序数值使用顺序色板（单色色阶）；偏离中点的情况使用发散色板（从中心向两侧采用两种色相）。十六进制颜色值见 rules/typography-and-color.md。

9. 使用米白色背景

浅色模式：#fffff8。深色模式：#151515。不要使用纯白色（#ffffff）或纯黑色（#000000）。

10. 数据使用衬线字体

数据标签、注释和图表标题使用衬线字体："ET Book", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif。无衬线字体（system-ui, sans-serif）仅可用于较小的坐标轴刻度标签（11–12px）。

11. 不使用双 Y 轴

在一张图表上使用两个 Y 轴会造成虚假的相关性暗示。应改用小多图——将两张图表垂直排列，并共享 X 轴。

12. 标注重要数据点

如果数据中存在峰值、谷值、拐点或事件边界，请在图表上直接添加文本标注并指向该位置。将标注放在最近的空白处；必要时，可从数据点引出一条短引导线。当多个标注争抢空间时，只保留最重要的标注；其他内容移至脚注或工具提示。

13. 展示比较背景

至少加入一种参照元素：参照线（平均值、目标值、上一时段）、阴影带或第二个数据系列。只有一条线且没有比较背景的图表，无法通过“与什么比较？”这一检验。

14. 保持工具提示简洁

工具提示应使用纯文本，显示数据值和标签。不要使用彩色背景、边框、箭头指针或阴影。

15. 优先渐进式呈现，而非静态堆叠信息

默认采用图表信息密度高、装饰元素少的 Tufte 式简洁概览。通过悬停、轻触和点击逐层展示详情（数值、标注、比较）。不要一开始就在单个静态视图中塞入所有内容。悬停时显示的上下文十字线可取代永久网格线。

16. 默认确保无障碍

图表元素与背景的对比度至少为 3:1；图表中文字的对比度至少为 4.5:1。切勿只用颜色区分数据；应同时使用形状、纹理或直接标签。每个图表都应提供文本替代内容（使用包含关键发现的 aria-label，或附带数据表）。交互式图表必须支持键盘导航。

17. 实现响应式，而不只是缩放

图表必须具备响应式策略——流式布局（百分比宽度 + viewBox）、自适应布局（基于断点调整布局），或混合方案。在较窄的视口中，应更改图表类型或布局（类别数据改用横条图、减少刻度密度、缩短标签），而不是单纯缩小图表。

18. 用动画解释数据，而非装饰页面

数据变化时的过渡效果（排序、筛选、时间推进）很有帮助，能让观看者跟上变化。无谓的入场动画、弹跳和装饰性动效都属于图表垃圾。动画时长：200–500ms，采用 ease-out。始终遵循 prefers-reduced-motion。

19. 将深色模式作为一等功能

有意设计浅色和深色两套配色。切勿直接反转颜色。在深色模式下应降低饱和度（明亮颜色在深色背景上会产生“振动”感）。遵循 prefers-color-scheme。使用语义化颜色令牌（--tufte-bg、--tufte-text、--tufte-series-default），让图表自动适配。

20. 标题应直接点明发现

图表标题应陈述关键见解，而非描述坐标轴。“第三季度收入激增 23%”优于“2024 年各季度收入”。副标题可补充背景信息（“与上年同期相比，单位：百万美元”）。如果数据没有明确发现，或许就不需要图表（参见规则 22）。

21. 使用便于阅读的数字格式

大数应缩写：写作 $1.2M，而非 $1,200,000。中等范围的数字应使用千位分隔符（12,450，而非 12450）。小数精度应与数值意义相匹配（$4.2M 足够时，不要显示 $4.2391M）。表格中的数字应右对齐。单位应保持一致，并注明一次即可（在坐标轴标签或标题中），无需在每个数据点上重复标注。

22. 句子能说明的内容，就不要画成图表

如果数据只有 1–2 个数字，请写成带有上下文的句子（“收入为 $4.2M，较第二季度增长 23%”）。如果数据只是 3–5 个项目的简单排名，可考虑使用表格。只有当图表能揭示文本和表格无法呈现的模式、趋势或分布时，才值得占用版面。只有两根柱子的图表，几乎总不如一句话。

---

图表库快速参考

上述通用规则适用于大多数图表。如需完整代码示例和特定图表库的辅助工具，请阅读此技能文件夹中 rules/ 目录下相应的规则文件。每项任务只阅读一个规则文件。

图表库	要阅读的规则文件	必要配置（即使不阅读文件，也要应用）
Recharts	rules/recharts.md	<CartesianGrid stroke="none" />、移除 <Legend />、<YAxis axisLine={false} tickLine={false} />、<Line dot={false} strokeWidth={1.5} />
ECharts	rules/echarts.md	splitLine: { show: false }、legend: { show: false }、grid: { show: false }、在系列上使用 endLabel
Chart.js	rules/chartjs.md	grid: { display: false }、border: { display: false }、plugins.legend.display: false、使用 chartjs-plugin-datalabels
matplotlib	rules/matplotlib.md	spines['top'].set_visible(False)、spines['right'].set_visible(False)、spines['bottom'].set_bounds(min, max)、font.family: serif
Plotly	rules/plotly.md	showgrid=False、showlegend=False、plot_bgcolor='#fffff8'、zeroline=False
D3/SVG/HTML	rules/svg-html.md	.domain { display: none }、不要使用 <rect> 背景、所有网格线的 stroke-opacity 设为 0.1

---

图表类型指南

类型	关键设置
折线图	线宽 1.5–2px；除非数据点少于 7 个（此时 r=2），否则使用 dot={false}；在最右侧数据点添加直接标签
条形图	类别优先使用水平布局，按数值降序排序，直接标注数值，默认填充色为 #7a7a7a
散点图	灰色点 #999，r=3；用强调色突出关键聚类/异常值；有意义时添加回归线（虚线、细线）
时间序列	在图表上标注事件（“衰退”“发布”）；x 轴使用范围框；通过不透明度表示同比（当前值为实线，上一期为 30%）
小多图	所有面板使用相同刻度；共享轴标签（x 轴标签位于底行，y 轴标签位于左列）；不显示面板边框
迷你图	约 80x20px；无坐标轴/标签/网格线；最小值/最大值点的 r=1.5；嵌入文本或表格单元格中
数据表	不使用斑马纹；留白，并每隔 3–5 行使用细分隔线；数值右对齐；font-feature-settings: 'onum' 1
斜率图	展示前后类别；标注两端点（数值 + 名称）；默认使用灰色，并突出关键斜率
面积图	优先使用折线图。若使用面积图：fillOpacity 设为 0.03–0.08，不使用渐变，在端点添加直接标签
堆叠条形图	避免使用，改用小多图。如果必须使用：按总值排序，直接标注每个分段，最多 4 个分段
热力图	仅使用顺序或发散色板；在单元格中标注数值，并附带数据表以提升无障碍性

小多图、迷你图和斜率图的实现模式，请参阅 rules/small-multiples-sparklines.md。

---

颜色快速参考

色彩项	浅色	深色
背景	#fffff8	#151515
文本	#111	#ddd
次要文本	#666	#999
坐标轴/分隔线	#ccc	#444
网格（如使用）	#eee（8-12% 不透明度）	#333
默认系列	#666	#999
高亮	#e41a1c	#fc8d62

分类色（最多 4 种）： #4e79a7 钢蓝色 · #f28e2b 橘黄色 · #e15759 珊瑚色 · #76b7b2 鼠尾草绿

字体栈见规则 10。完整色板（顺序、发散）、字体加载和旧式数字，请参阅 rules/typography-and-color.md。

---

反模式检测

审查现有图表代码时，请检查是否存在以下问题：图例（→ 直接标注）、饼图（→ 水平条形图）、3D 效果（→ 扁平 2D）、双 y 轴（→ 小多图）、过重的网格线（→ 移除或将不透明度设为 0.1）、彩虹色板（→ 灰色 + 强调色）、仪表盘控件（→ 数字 + 迷你图）、渐变填充（→ 纯色）、旋转标签（→ 翻转坐标轴或缩写）、纯白/纯黑背景（→ #fffff8/#151515）、仅悬停时显示的信息（→ 提供点击/焦点替代方式）、缺少文本替代内容（→ aria-label）、仅用颜色编码（→ 添加形状/图案）。

如需查看包含各库检测模式和单行修复方案的完整表格，请参阅 rules/anti-patterns.md。

---

验证清单

呈现任何图表前，请确认：

• 没有顶部或右侧边框/轴线
• 没有 Legend 组件——直接在图表上标注系列
• 已移除网格线，或仅保留不透明度 <= 0.12 的水平网格线
• 宽高比约为 1.5:1
• 背景为 #fffff8（浅色）或 #151515（深色），而非纯白/纯黑
• 数据标签和标题使用衬线字体
• 默认系列颜色为灰色（#666）；仅在强调时使用颜色
• 没有 3D 效果，也没有饼图（除非明确要求）
• 轴线仅覆盖数据范围（range-frame）
• 重要数据特征已直接标注在图表上
• 存在比较语境（参考线、色带或第二个系列）
• 工具提示为纯文本，没有装饰性样式
• 交互元素提供点击/焦点替代方式（不能仅依赖悬停）
• 对比度至少达到 3:1（元素）/4.5:1（文本）
• 图表具有文本替代内容（aria-label、描述或数据表）
• 动画遵循 prefers-reduced-motion
• 图表在 320px 和 1440px 及以上宽度下均可正常使用
• 标题说明发现，而非描述坐标轴
• 数字格式便于阅读（缩写、分隔符、精度一致）
• 确有必要使用图表——无法用句子或表格传达数据

---

其他资源

库规则（每项任务阅读一份）：rules/recharts.md、rules/echarts.md、rules/chartjs.md、rules/matplotlib.md、rules/plotly.md、rules/svg-html.md — 包含完整代码示例、辅助工具和主题注册。

跨领域内容（仅在确有需要时阅读）：

• rules/interactive-and-accessible.md — 渐进式披露、WCAG、响应式设计、动画、深色模式
• rules/typography-and-color.md — 字体加载、完整色板表、旧式数字
• rules/anti-patterns.md — 各库的检测启发式规则和修复方法
• rules/small-multiples-sparklines.md — 小多图、迷你图、斜率图的布局模式

examples/ 中的可运行示例——每个库各一个，另附内联 SVG 迷你图。