从这里开始
进入图鉴的短路径 — 选一个,读七个章节。
可视化的一切热门
可视化常见问题
工作室能替代完整设计套件吗?
评分会加冕“最佳”图表吗?
工作室保证通过 WCAG 吗?
饼图总是不好吗?
工作室
浏览图集
📊 图表
柱、折线、饼、散点、热力、瀑布、漏斗、矩形树。
▮ 柱状图
在同一基线上比较类别——报告、广告与作业里最诚实的默认图表。
打开 →
📈 折线图
用连续路径展示随时间的变化——报告与科学作业的主力。
打开 →
◐ 饼图与环形图
诱人的部分-整体图形——广告里很强,切片一多就危险。
打开 →
⚬ 散点图
把两个测量变量画成点云——谈论相关最诚实的方式。
打开 →
▦ 热力图
强度矩阵——密集、诱人,却很容易被彩虹色阶说谎。
打开 →
📶 瀑布图
合计如何构成:起点、加项、减项、终点。财务页上仍然值得用。
打开 →
▽ 漏斗图
逐渐变窄的阶段——营销广告爱用;科学课该问宽度是否诚实。
打开 →
▭ 矩形树图
把层级画成嵌套矩形——饼图撑不住时的文件、预算与组合。
打开 →
📶 直方图
每个箱的计数——看测量值堆在哪里,而不是比较类别。
打开 →
🔀 示意图
流程、组织、思维导图、韦恩、时间线。
⬡ 图形
几何、箭头、标注、信息图模块。
🎯 手艺
色彩、数据墨水、无障碍。
✦ 工作室
工作报告、广告、作业、路演。
W 方式
二十本实用手册——对比、网格、Mermaid、ECharts、D3、Lucide 等——带有许可证和 GitHub 链接。
A11Y WCAG 对比检查
在发货前检查文本和背景对比度 - 幻灯片、网站和海报的最快可访问性获胜。
打开 →
PAL 调色板和比例生成器
构建分类、顺序和发散的调色板,经得起印刷和色盲观看。
打开 →
Aa 版式比例
选择模块化的字体比例,这样标题、正文和说明文字就不会在幻灯片和单页纸上相互冲突。
打开 →
GRID 幻灯片和文档网格
将每个块与一个简单的网格对齐,这样报告、宣传和海报就可以在没有设计师的情况下看起来是有意为之的。
打开 →
CHOOSE 数据到图表的决策
在打开任何工具之前,将问题与编码相匹配 - 比较、趋势、部分与整体、相关性。
打开 →
MM 美人鱼文字图
用纯文本编写流程图或序列 - 可版本控制、可审阅,并且通过 Mermaid 免费。
打开 →
SEQ 序列图模式
显示谁在不同时间与谁交谈 - API、切换和协议的办公室和教室模式。
打开 →
SKETCH Excalidraw 草图线框
在抛光之前使用 Excalidraw 勾勒出想法 - 手绘的清晰度胜过过早的像素工艺。
打开 →
EC Apache ECharts 仪表板
使用 Apache ECharts 交付交互式办公仪表板 - Apache-2.0,巨大的图表目录,无专有抓取。
打开 →
CJ Chart.js 快速图表
当您现在需要网络图表而不是平台时,将 Chart.js 放入页面中以获得诚实的条形图和线条。
打开 →
D3 D3定制工艺
当模板中不存在编码时,请使用 D3 - 完全控制,工艺成本较高。
打开 →
VL Vega-Lite 语法
使用 Vega-Lite 声明 JSON 中的编码 - 可重现的图表,用于教授图形语法。
打开 →
PLOT 可观察绘图套件
使用 Observable Plot 绘制整洁的表格 - 简洁,ISC 许可,并且对分析解释者友好。
打开 →
ROUGH Rough.js 注释
使用 Rough.js 笔画进行注释和强调 - 通过人性化的标记而不是镶边进行说服。
打开 →
SANK 桑基流故事
通过 Sankey 讲述数量如何在不同阶段之间移动 - 预算、漏斗和能源故事。
打开 →
NET 网络图
使用开放图形库将关系映射为节点和链接(团队、引用、依赖关系)。
打开 →
MAP 等值线故事地图
通过开放的地理堆栈和诚实的色标,按比率(选举、健康、销售)对区域进行着色。
打开 →
ICO 打开图标系统
选择一个打开的图标集并坚持使用 - 一致的隐喻胜过套牌和产品中的混合剪贴画。
打开 →
CV 简历信息图表食谱
构建一页视觉简历:网格、字体比例、诚实的技能栏、开放图标 - 没有剪贴画转储。
打开 →
QBR 季度报告视觉效果
可重复的季度包:瀑布桥、趋势线、对比安全类型、每张幻灯片一个想法。
打开 →