阅读 836

安利一些不错的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这些基本掌握就差不多了,可以进入下一步 SVGD3.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

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

另外 AmeliaObservable 上的 「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 即可。
课件与代码:github.com/Shao-Kui/D3…

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

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

油管上还有2020年版本,以及目前正在更新的2021年版本——「Get it Right in Black & White」 链接:vizhub.com/blog/2021/0…

Learn D3.js

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

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

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

如果欢迎来「可视化交流群」一起交流,加古柳微信「xiaoaizhj」备注「可视化加群」拉你进群哈!

欢迎关注古柳的公众号「牛衣古柳」,并设置星标,以便第一时间收到更新。

文章分类
前端
文章标签