tufte

Tufte——按经典原则呈现可视化

这项技能可将“给我做张图表”转化为符合 Tufte 原则的图表。内容提炼自 The Visual Display of Quantitative Information（1983/2001）、Envisioning Information（1990）和 Visual Explanations（1997）。

这项技能会生成什么

根据用户项目的上下文，选择以下两种输出方案之一：

1. 独立 HTML/SVG——单个文件，内嵌 SVG，无外部依赖。适用于一次性图表、嵌入内容、截图和幻灯片。
2. React（Recharts + D3 回退方案）——适用于已使用 React 的项目。图表类型适合时使用 Recharts；不适合时（斜率图、表格内迷你图、小多图）使用 React 中的原生 D3。

如何使用这项技能

调用后，按以下顺序操作：

1. 阅读 principles.md——10 条规则，每条一段。了解整体框架。
2. 使用 chart-selection.md，根据用户的数据和目标选择图表类型。不要顺手选你熟悉的图表；应使用这张表指定的图表。
3. 渲染前应用 kill-list.md——去掉不该出现在任何 Tufte 风格图表中的元素。
4. 用户想看差异时，查看 before-after.html。其中有 6 组并排示例，涵盖 AI 工具常会处理不当的情况。
5. 输出为报告、回顾或配有图表说明文字的幻灯片时，阅读 report-voice.md。文字可能毁掉一张干净的图表。使用朴实的商务英语，不用破折号，不写 AI 腔的废话。
6. 宣布图表完成前，运行 checklist.md。共 20 项，只需 30 秒。

快速查阅时，可参考单页指南 cheatsheet.html（和 cheatsheet.pdf）。

默认行为

默认遵循 Tufte 原则。如果用户明确要求使用禁用清单中的元素（“这份董事会演示文稿需要饼图，因为 CFO 要看”），请照做，但要在代码或回复中用一行注释说明 Tufte 风格的替代方案。

图表周围的文字

输出为报告、回顾或幻灯片时，文字和图表同样重要。使用朴实的商务英语：不用破折号，不故作戏剧性，不用夸张的动词，也不写 AI 腔的行话。每个标签和说明文字都要针对具体情况命名，不用占位内容。先给出数字，再说明含义。完整的禁用项和保留项清单见 report-voice.md。干净的图表若被废话包围，读起来依然是废话。

禁用清单摘要

除非用户明确要求，否则任何符合 Tufte 原则的图表都不应包含以下元素：

• 对任何二维数据使用 3D 效果
• 饼图（改用排序条形图或小表格）
• 双轴图（改用两个小多图）
• 对有序数据使用彩虹色阶（改用单色相渐进色阶）
• 粗重网格线、边框框线、每个次级单位都标刻度线
• 投影、渐变填充、斜面、辉光、“鸭子”
• 将图例放在远离数据的位置（直接标注数据）
• 摩尔纹、交叉排线、密集点描
• 冗余的数据墨水（条形、数字、坐标轴和网格线同时表示同一个数值）
• 缺少上下文、只放巨大数字的 KPI 卡片

保留清单

以下元素适用于大多数 Tufte 风格图表：

• 直接标注数据（不使用图例）
• 在数字旁使用迷你图
• 对任何交叉分类使用小多图
• 范围框架（坐标轴仅覆盖数据所在范围）
• 淡色网格线（浅底白线，或省略）
• 一种强调色（--accent 红色），并确实用于突出焦点数据点——不能只声明而不使用。墨水少不等于没有信号。如果没有任何元素使用强调色，图表就会显得平淡；应选出读者需要关注的数据点并为其着色。
• 有助于阅读的数据标记：在线条端点加圆点，用点图替代纯条形图
• 对类别排序（很少按字母排序，几乎从不按输入顺序排列）
• 当 n ≤ ~20 且需要精确数值时，使用表格

文件索引

文件	用途
principles.md	Tufte 的 10 条规则及其实用解读
chart-selection.md	数据 + 目标 → 图表类型决策表
kill-list.md	从任何图表中移除的内容
before-after.html	六组并排对比（在浏览器中打开）
report-voice.md	报告／回顾／幻灯片的行文规则（不写空话，不用 em-dash）
checklist.md	发布前 20 项检查
cheatsheet.html	一页式可打印参考资料
cheatsheet.pdf	同上，PDF 版本
presets/html-svg.md	样式标记 + 可运行的 SVG 条形图、折线图、迷你图和小多图
presets/react.md	Recharts 主题 + 用于坡度图、表格内迷你图和小多图的 D3 模式