格子越深，表示该主题在这项指标上越高。
清晰68
说服80
密度78
制作成本70
作业适配55
工作适配86
低高
简短问答
什么时候选桑基流故事？
故事符合「预算分配、转换路径、物质或能源流动」时选用。
什么时候避开？
遇到「观众只需要一个开始与结束的瀑布」就换形式。
谁发明或推广了它？
马修·亨利·菲尼亚斯·里亚尔·桑基 (1898)；现代 d3-sankey 布局
它编码什么？
链路宽度与节点之间的流量成正比
广告能用吗？
在微信、抖音与展示广告里主张能一眼看见就可以；否则把图放在落地页。
老师会收吗？
实验报告与展板里有轴、单位、来源一行就可以。
桑基流故事把值编码为链路宽度与节点之间的流量成正比。马修·亨利·菲尼亚斯·里亚尔·桑基 (1898)；现代 d3-sankey 布局。
工作报告、广告与作业中适合「预算分配、转换路径、物质或能源流动」。若「观众只需要一个开始与结束的瀑布」，换一种形式。
软件
- d3-sankey — Sankey 图的布局算法 - BSD-3-Clause。 · BSD-3-Clause · github.com/d3/d3-sankey
- ECharts sankey — 用于仪表板的含电池 Sankey 系列。 · Apache-2.0 · github.com/apache/echarts
- Plotly.js — 包括分析应用程序的桑基跟踪。 · MIT · github.com/plotly/plotly.js
- Mermaid flowchart — 不需要交互时的文本替代。 · MIT · github.com/mermaid-js/mermaid
- Funnel twin — 当桑基杀伤力过大时，舞台宽度变得更简单。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯（不要截图）
- 导出 4 — 网页用 SVG，印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1，大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
桑基流故事：守住链路宽度与节点之间的流量成正比，「观众只需要一个开始与结束的瀑布」时换图。