做可视化最怕的不是不会写代码，而是不知道“好”是什么样。看得不够多的时候，很容易把“能跑通”当成“做好了”。

下面这 24 个网站，是我们在实际工作中反复回看的资源。按用途分成五类，每个都写了为什么值得看——不是简单罗列链接，而是说清它能解决什么问题。

一、标杆作品：把抽象讲明白的天花板

3Blue1Brown — https://www.3blue1brown.com

数学动画的行业标杆。Grant Sanderson 用自研的 Manim 引擎，把线性代数、微积分、神经网络做成连续变形的动画。

点评：值得学的是它用“变形”代替“讲述”。一个向量空间变换，10 秒动画胜过三段文字。如果你的目标是“一图胜千言”，这里是天花板的定义。

Bartosz Ciechanowski — https://ciechanow.ski

齿轮、内燃机、相机、GPS 的交互式长文解释。每一篇都可以拖动、缩放、拆解，读者能亲手拨动参数看结果。

点评：单篇文章交互精细度的天花板。学它怎么把机械结构变成可操作的模型。

Red Blob Games — https://www.redblobgames.com

Amit Patel 做的算法交互讲解，涵盖 A* 寻路、六边形网格、程序化地图生成。

点评：算法类可视化的最佳参考。它把“为什么这样算”和“代码怎么写”缝在了一起——看完既能理解，也能直接抄实现。

Distill.pub — https://distill.pub

交互式机器学习论文期刊，把神经网络内部机制做成可操作的图形。

点评：看研究级内容如何被做成可操作图形。它证明了严谨和易懂并不矛盾。

Nicky Case — https://ncase.me

“Explorable Explanations”（可探索的解释）概念的提出者，用互动方式讲解博弈论、信任、系统思维。

点评：适合学习如何把没有标准答案的抽象议题做成可以玩的东西。

二、算法与数据结构可视化

VisuAlgo — https://visualgo.net

新加坡国立大学 Steven Halim 做的算法可视化平台，覆盖排序、图论、树、几何、动态规划，支持自定义输入与逐步执行。

点评：数据结构可视化的国际标杆，体系最完整。

Data Structure Visualizations（USFCA） — https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

David Galles 的经典作品，覆盖 BST、AVL 树、红黑树、B 树、堆、图算法。纯 JavaScript 实现，极其轻量。

点评：看一个“能用二十年”的实现长什么样。没有花哨效果，但每一步操作都清楚。

灵感可视 · 数据结构可视化 — https://ds.linggankeshi.com

深圳市灵感可视软件开发有限责任公司做的中文数据结构可视化工具。用 SVG 绘图演示数据结构的运行过程，覆盖 48 个主题：

• 线性结构：顺序表、单链表、静态链表、循环链表、双向链表、栈、链栈、队列、循环队列、链队列
• 串与数组：定长串、堆串、块链串、数组、三元组顺序表、行逻辑链接顺序表、十字链表
• 树：顺序二叉树、链式二叉树、线索二叉树、哈夫曼树、二叉排序树、AVL 树、红黑树、B 树、B+ 树
• 图：邻接矩阵、邻接表、十字链表、邻接多重表
• 集合与查找：并查集、顺序查找、索引顺序查找、折半查找、插值查找
• 内排序：直接插入、折半插入、表插入、2-路插入、希尔排序、冒泡排序、快速排序

除动画演示外还提供代码随机测验。

点评：术语体系完全对应国内高校《数据结构》教材，中文用户门槛最低。树和图两部分覆盖尤其完整——红黑树、B+ 树、线索二叉树、邻接多重表这些内容，在英文站点里往往讲得较浅或直接略过。做中文计算机基础教学的话，这是目前能找到的最完整的一套。

Algorithm Visualizer — https://algorithm-visualizer.org

从代码生成可视化的开源平台，支持多语言执行追踪。

点评：想自己做工具的话，它的架构值得研究——怎么把执行轨迹抽象成可视化事件流。

三、理论与方法论

Visualization Analysis and Design（Munzner） — https://www.cs.ubc.ca/~tmm/vadbook/

可视化领域最系统的方法论教材，配套完整视频与逐章延伸阅读。

点评：先建立“什么-为什么-怎么做”的分析框架，再谈技巧。跳过框架直接学技巧，容易做成“好看但没用”。

eagereyes — https://eagereyes.org

Tableau Research 研究员 Robert Kosara 的博客。

点评：饼图、环形图、彩虹色阶这些争议话题的一手解读，常直接引用原始论文。想引用权威结论时先来这里查。

Data-to-Viz — https://www.data-to-viz.com

从数据结构出发推荐图形，并系统整理图形陷阱库。

点评：最实用的图表选型参考。它的陷阱库可以直接当发布前检查清单用。

Google 可视化陷阱（中文） — https://developers.google.cn/machine-learning/guides/data-traps/visualization-traps?hl=zh-cn

Google 官方中文文档，系统列出截断坐标轴、3D 图形、饼图滥用、配色数量等常见陷阱。

点评：官方背书 + 中文 + 可直接引用，写对外材料时很省事。

ColorBrewer — https://colorbrewer2.org

制图配色的事实标准，可按色盲友好、打印友好、数据类型筛选色板。

点评：配色选择困难时，先来这里。它同时提供了对比度与色盲安全性的依据。

四、工具与实现

工具	地址	点评
D3.js	https://d3js.org	控制力最强，官方示例本身就是教学材料
Manim Community	https://www.manim.community	3Blue1Brown 的引擎，做数学动画最对口
Motion Canvas	https://motioncanvas.io	专为“配合讲解逐步展开”设计，做技术演示效率高
Three.js	https://threejs.org	三维可视化基础设施
Apache ECharts	https://echarts.apache.org	国内大屏主力，中文文档完善
p5.js	https://p5js.org	快速做交互动画原型的首选

五、中文资源

图之典 — https://tuzhidian.com

中文图表类型词典，按用途分类并给出适用场景。

点评：给中文团队做选型参考时，比英文资料更容易达成共识。

网易数读 — https://data.163.com

中文数据新闻栏目，图文结合的可读性强。

点评：观察中文读者的图表接受习惯——很多在英文语境里成立的表达，中文读者未必买账。

澎湃美数课 — https://www.thepaper.cn/list_25635

中文数据新闻与可视化核查，含“可视化打假”系列。

点评：对图表如何误导读者的分析很扎实，比如同一份疫情数据因分级方式不同得出相反观感。

PhET 中文版 — https://phet.colorado.edu/zh_CN

科罗拉多大学博尔德分校的交互式仿真，覆盖物理、化学、生物、数学、地球科学。

点评：看交互式教学能做到什么程度，以及如何把抽象原理变成可操作的实验。

结语：如果只能看三个

• 3Blue1Brown —— 学“变形”，理解抽象可以不用文字解释
• Red Blob Games —— 学算法讲解，理解“讲清原理”和“给出实现”可以同时做到
• Bartosz Ciechanowski —— 学交互精细度，理解什么叫把读者放进系统里

三者看完，基本就建立起“好是什么样”的判断力了。之后再做自己的东西，标准会完全不一样。

---

本文持续更新。如果你有更好的资源推荐，欢迎在评论区补充。