用途
Tufte Chart Design 是一个把“做个图表”需求转化为遵循 Edward Tufte 可视化原则的技能，目标产出数据诚实、数据墨水比高、去除图表垃圾（chartjunk）的图表。其原则提炼自 Tufte 的三本基础著作：《The Visual Display of Quantitative Information》《Envisioning Information》《Visual Explanations》。
主要能力
- 在被要求创建、改进或评审任何图表或可视化时自动激活。
- 应用从 Tufte 著作中提炼的十条核心原则。
- 根据数据形态与分析目标选择合适的图表类型。
- 去除图表垃圾：3D 效果、不必要的网格线、冗余图例、饼图、双轴等。
- 以内联 SVG、React（Recharts）或 React 内嵌 D3 形式输出干净结果。
- 强制图形完整性：图形失真系数（lie factor）保持在 0.95 到 1.05 之间，条形图始终从零开始。
十条原则
- Show the data——最重要的是展示数据，每个决策都问“这是否有助于看见数据？”
- Maximize data-ink ratio——随数据变化而变化的墨水才是数据墨水，其余都是开销。
- Erase non-data-ink——移除边框、网格线、次级刻度标记。
- Erase redundant data-ink——每个量只做一种编码，不要用柱+数字+网格线+刻度重复展示“37”。
- Graphical integrity——条形图从零开始；绝不用面积表示一维量；失真系数 =（显示的效果大小）/（数据中的效果大小）。
- Small multiples——共享刻度上的多个小图优于一张含多条重叠线的图。
- Layering and separation——数据在最上层，标签其次，框架最淡；避免 1+1=3 的视觉噪音。
- Micro/macro readings——远看是一个整体形状，近看每个点都可读。
- Smallest effective difference——灰色表示背景，一个强调色表示焦点，微妙但清晰。
- Word-data integration——句子中的迷你趋势图（sparkline）；数字与视觉相邻；表格也是图表。
激活时机
自动触发：
- “Make a chart of...”“visualize...”“graph...”“plot...”
- “Build a dashboard”“design a KPI tile”
- “Improve this chart”“critique this visual”
- “What chart should I use for...?”
/tufte命令或直接提到 Tufte- 任何涉及图表/可视化代码的代码编辑会话
不触发：
- 标志、插画、装饰性图形
- 流程图、架构图、线框图
- 无定量数据的纯排版或布局
图表选择指南
| 数据形态 | 目标 | 使用 | 不要使用 |
|---|---|---|---|
| 单条时间序列 | 展示趋势 | Sparkline 或折线图 | 面积图、条形图 |
| 多条时间序列 | 比较趋势 | 小倍数图（分开的图） | 多线意大利面图 |
| 类别（≤10） | 比较数值 | 按值排序的点图或条形图 | 饼图、环形图、3D 柱 |
| 类别（>10） | 展示分布 | 条带图或直方图 | 彩虹色阶 |
| 两个时间点 | 展示变化 | 斜率图（slopegraph） | 分组柱 |
| 部分与整体 | 展示构成 | 带百分比的排序表 | 饼图、环形图、堆叠柱 |
| 流程阶段 | 展示流转 | 横向柱 + 百分比 | 3D 漏斗 |
| 相关性 | 展示关系 | 散点图 | 双轴线图 |
| 随时间变化的同期群 | 展示留存 | 顺序热力图 + sparkline | 彩虹热力图 |
| 地理 | 展示区域模式 | 等值线图（单色顺序） | 彩虹等值线图 |
禁用清单
❌ 3D 效果——扭曲面积感知，不增加信息 ❌ 饼图——人无法比较角度，改用排序表 ❌ 环形图——与饼图同样的问题，且更糟 ❌ 双轴图——看图者无法分辨相关性是否真实或由轴操纵产生 ❌ 彩虹色阶——感知上不均匀，改用单色顺序 ❌ 渐变填充——装饰性墨水，不是数据墨水 ❌ 阴影、发光——图表垃圾 ❌ 图表边框/方框——擦除，数据应漂浮 ❌ 粗网格线——如果需要，直接印上数值 ❌ 冗余图例——改为直接标注
使用方式
技能无需安装，声明已在环境中激活。触发后按请求可用以下输出模式：
- HTML/SVG——当被要求内联 SVG 或未指定偏好时，使用给定的 HTML/SVG 模板样式（字体、标签、数值、数据点、数据线、参考线、强调色等 CSS 类），并附有 Sparkline 示例与点图示例的具体 SVG 代码。
- React/Recharts——当被要求 React 或 Recharts 时使用；示例包含 LineChart 用法与一个 tufte 主题配置对象（隐藏轴线、去除刻度线、网格极淡、默认不用 tooltip、不用图例）。
- React 内嵌 D3——用于斜率图、自定义点图、小倍数图等；示例给出 Slopegraph 的完整实现思路（scaleLinear、绘制 line、左右标签、列标题）。
- 小倍数图模式——共享 Y 轴 domain，用网格排布多个小图，而非叠加。
- 仪表盘 KPI 磁贴模式——用表格 + sparkline + 目标差值替代巨型数字磁贴。
发布前检查清单
- 数据墨水比 > 0.7
- 无图表垃圾（无 3D、渐变、阴影、装饰元素）
- 失真系数 0.95–1.05
- 如展示量级，条形图从零开始
- 直接标注，除非不可避免不用图例
- 分类按值排序，而非按字母
- 最多一个强调色（灰为背景，一色为焦点）
- 两种尺度下可读（远看形状，近看数值）
- 无双轴（若想用，改做小倍数图）
- 精度重要时印出数值
- 图表类型与数据形态、分析目标匹配
- 所有墨水都必要
常见例外处理
若用户明确要求禁用清单中的内容（例如“CFO 想要饼图”），应遵从请求，但添加注释说明 Tufte 的替代方案（例如：按请求使用饼图，Tufte 替代方案为带百分比的排序表）。用户保留控制权，同时提供替代方案供参考。
配色规则
- 默认：灰度。黑色为数据，中灰（#666）为标签，浅灰（#e0e0e0）为参考线。
- 一个强调色：红色（#d73027）或蓝色（#4575b4），用于高亮一个系列或标记异常值。
- 顺序色阶：单色（由浅到深），绝不用彩虹。
- 发散色阶：两色在中间中性处相接（红-白-蓝），步长相等。
- 分类色：仅在类别无自然顺序时使用，最多 5 种颜色；优先考虑直接标注 + 灰度。
常见问题处理
| 问题 | 处理 |
|---|---|
| “图表感觉拥挤” | 增加内边距、减小字号，或用小倍数图 |
| “标签读不出来” | 在数据点直接标注而非走轴；必要时旋转 |
| “留白太多” | Tufte 偏好留白——不要填充，让数据呼吸 |
| “图例与数据重叠” | 移除图例，在每条线/柱的终点直接标注 |
| “要求网格线” | 改为在图上印数值；仅在关键阈值用极淡参考线 |
| “要求双轴” | 做两张共享 X 轴的独立图，纵向堆叠 |
限制
资料未提供安装或部署步骤（声明无需安装、已激活）、未提供收费与价格信息、未提供平台支持范围、未提供具体效果或性能数据。