安利一些不错的D3.js数据可视化资源

注：本文有点长，可以点赞?收藏后慢慢看。另外有本文未涉及的、大家觉得不错的D3.js资源教程也欢迎评论进行分享。

前言

从「年更博主冒个泡，或将开启可视化之旅 - 牛衣古柳 - 2020.08.27」一文至今，已经过去整整10个月，期间古柳实践过一些demo、复现过一些作品、写过一些(没人看的)文章、也一点点将可视化交流群“运营”到了大概550多人。

其实群里蛮早就有人问 D3.js 如何学习、求 D3.js 教程、问有啥推荐书籍等，虽然没统计过，但目测十多次看到这些问题还是有的，古柳也推荐过很多次自己觉得不错的资源，论理应该写篇文章整理分享下，这样以后再有人问起，直接分享文章就行，就不用每次重复在群里贴那些资源链接，而且还无法解释太多。但一直没动手，一拖就到了现在。

虽然过去那么久，但接触过并想推荐的还是以下几个资源，毕竟最核心搞懂 D3.js 到底是如何进行可视化的，掌握了流程、步骤、原理，再去看其他例子或作品源码，就好上手多了，也不至于被网上各种风格、不同实现流程的代码带偏。

古柳也知道很多人的背景都不太一样，有懂技术的有不懂技术的、有会前端的有不会前端的、有更偏向中文资源有中英都能接受的...接下来推荐的资源不一定能让对 D3.js 可视化感兴趣的每个人都觉得有用，但确实觉得还不错，就姑且先整理出来，大家有其他补充的优质资源也欢迎评论留言或群里分享。

基础部分

首先，D3.js 毕竟是一个 JavaScript 库，也是前端里的一部分，所以必要的 HTML、CSS、JS 等基础先过一遍，对后续学习 D3.js 会有极大帮助，而且都2021年了，最好顺带学下 ES6，箭头函数、模板字符串之类用起来也简洁些，毕竟很多例子里也都那么写的，不至于看到犯懵。当然如果不是一上来就奔着专业前端去的，可以先不用学得太深，像 JS 里数组、对象、函数、循环、条件判断、async await这些基本掌握就差不多了，可以进入下一步 SVG 和 D3.js 的学习。

这里推荐古柳去年学的B站 后盾人教程，首先 HTML、CSS、JS 都有系列视频，依次学习即可。较之其他很多视频里废话连篇、内容冗长，古柳比较喜欢向军大叔每一课时都简短干练，让人能较轻松坚持下去，同时整个体系又很完整全面。

当然需要重复一句，JS 部分可能前几章(比如到第4章数组即可)看完就暂时够用了，如果是新手，想先体验 D3.js 可视化的，后面大部分章节其实可以先放放，以免在这里扎太深、折腾太久、越学越头秃，然后放弃了。

D3.js 部分

打完基础，就可以开始看 D3.js，其实网上相关资源并不少，中文的也都有些，只不过网上很多例子是不同时间写的，可能用的 D3.js v3/v4/v5 等不同版本，API 略有变化，导致不明真相的新手直接照着实现可能出现报错。

虽然古柳觉得 v4 以后应该就没那么大差异，但大家还是多留意下 <script src="..."> 里引用的到底是哪个版本的 D3.js。古柳用的比较多的是 v5.9 以上的，大部分情况下都够用，不一定非得用最新的 v6/v7 等。

Fullstack D3 and Data Visualization

如果要问哪个资源对古柳入门 D3.js 可视化帮助最大，那毫无疑问是 「TheRobBrennan/explore-data-visualization-with-D3」 这个 GitHub 仓库的代码。

这是 Amelia Wattenberger 的 「Fullstack D3 and Data Visualization」 一书的配套代码，有各章节例子的完整实现。去年古柳也是因为知道里面有个动态桑吉图的实现，于是搜 Animated Sankey Chart 才找到仓库(总觉得不是原作者开源的，而是别人偷偷公开的，不确定)，不过实现挺复杂一直还没啃掉。

之所以推荐这个是因为里面提到用 D3.js 画任何图的通用七个步骤，也就是下面的绘图步骤清单/Chart drawing checklist。并且仓库里每个例子都是这样的步骤，虽然不一定每个图里都会用到全部七个步骤，但是明白掌握这样的流程框架，对于入门 D3.js 可视化会有特别大的帮助。

古柳也能想到大家刚接触 D3.js 时多半先看到的都是实现柱形图/散点图/折线图等图表，明明用其他工具或 Echarts 可视化库等会很方便就搞定，但是 D3.js 里却一堆新概念，需要花很大力气才能实现：scale 比例尺、enter append 绑定数据后进行元素绘制、x/y 坐标需要指定、axis 坐标轴/刻度/轴名、legend 图例、标题所有这些全都需要代码里写出来才能画出来。

“那么简单基础的图都这么麻烦，复杂的图表怕是实现难度更高吧？”

想来不少人应该都有过这样的想法吧？有这样的看法实在很正常，但古柳作为一个姑且复现过一些大家之前没接触过、看着似乎蛮复杂的可视化作品的实践者，可以拍着胸脯说，复杂图表的实现流程大体上其实和简单图表的步骤是一样的，掌握了上面七个步骤，相信大家也有能力复现出这样漂亮的作品。见：Wendy Shijia 的「 Escher's Gallery」可视化作品复现系列文章(三) - 牛衣古柳 2020-12-17

所以古柳非常推荐大家有一定基础后，抽一段时间每天照上面仓库里的例子敲下，相信会大有益处，而且也有助于养成代码风格，不至于被网上各种不同写法的例子迷了眼。

另外 Amelia 在 Observable 上的 「Prototyping in D3」 里也总结过这个流程，不过上面的 JS 写法略有不同，后续古柳基于几个步骤，看看举什么有意思些的可视化作品例子也来讲解下。

此外，newline 上有 Amelia 的付费视频教程和电子书，虽然不便宜且是英文的，但能接受的可以去学下。昨晚整理资源时才发现网站会检测大家来自哪，然后自动打不小折扣，听贴心的，古柳的是中国打折45%，群友中国香港打折49%，还有俄罗斯的打折70%，不禁怀疑难道折扣越大被识别出来越穷是吧，挺有意思的一个插曲。

Intro to D3

最后 Amelia 个人网站上的 「Intro to D3」 系列也可以一看。

花了挺长篇幅介绍上面的资源，但毕竟古柳真心从中受益匪浅，所以就话唠多写了些。下面再介绍些其他资源。

Shirley Wu 的 Introduction to SVG and D3.js

谈到 D3.js 可视化，一定绕不开 Shirley Wu，同样她的 「Introduction to SVG and D3.js」 系列也非常推荐一看，Shirley 拿自己的作品 「film flowers」 来教大家如何一步步实现出来。

说来惭愧古柳至今都没怎么看完，不过之前做“傻苹果?”相关的可视化时需要用到贝塞尔曲线画苹果花，那会有找来参考过，见：「用可视化的方式祝福小偶像毕业快乐（上） - 牛衣古柳 2021-04-20」。

另外两个网站

另外，「D3 in Depth」 和 「The D3.js Graph Gallery」 两个网站都不错，古柳有时需要用到什么，也会在上面看看有无对应例子可以参考。

视频教程

再推荐下视频教程。B站上有清华计算机系的课程「数据可视化编程-使用D3.js」，用的 D3.js v5.9 + ES6 就不必说了，而且几乎是目前唯一的 D3.js 中文视频教程，并且感觉也不太可能会有其他新教程的样子(除非哪天古柳也开始出教程了，其实一直有这想法，不过时机还不成熟)。推荐有一定基础再看，另外不需要像课程里用 Flask 搭 Web 服务，直接 VSCode 里装个 live server 即可。 课件与代码：https://github.com/Shao-Kui/D3.js-Demos

一年多前古柳在B站刷到这门课时还是很惊喜的，虽然最终也没怎么完全刷完，而是结合其他上面的资源一点点掌握了 D3.js，但可能没有这门课、没有一年多前下定决心学起可视化，也许就不会有写的这些文章、不会有现在的「可视化交流群」、不会有认识那么多人了，还是很感慨的。

另外，B站还有一门 「数据可视化教程@基于D3.js」，是有 Up主 搬运 Curran Kelleher 的油管视频，这是2018年版本的。

油管上还有2020年版本，以及目前正在更新的2021年版本——「Get it Right in Black & White」 链接：https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/

Learn D3.js

已经推荐了不少资源，其实大家找准一个适合自己的好好学学，应该都能入门。最后古柳再推荐下 「Learn D3.js」 这本书，其实 D3.js 中文书也有几本，但都不够新(虽然也没怎么看过)，而这本不仅用的 v5.9 + ES6，而且是古柳所知讲 D3.js 最全面细致的一书。感兴趣的可「牛衣古柳」后台回复「d3 book」获取 PDF 版(侵删)。 链接：https://github.com/PacktPublishing/Learn-D3.js

其实古柳也在想除了现在日常可视化交流群之外，还有什么是自己能提供的，比如要不要做个 D3.js 学习打卡群，一起学习这本书之类？但还没想清楚，也不知道会有多少人感兴趣，可以留言评论看看。

以上就是这次的整理分享，一不小心写得又臭又长，希望能对一些人有帮助。