Note: this article is a bit long, you can like 👍 after the collection slowly look. In addition, there is a good D3.js resource tutorial not involved in this article, welcome to comment to share.
preface
It has been 10 months since the article “The New Year blogger takes a bubble, or will start a visualization journey – Niuyi Gu Liu – 2020.08.27”, during which Gu Liu has practiced some demos, replayed some works, written some articles (no one read), and gradually “operated” the visual communication group to about 550 people.
Is group actually already asked D3. Js how to learn, asks the D3. Js tutorial, asked what recommend books, etc., while no statistics, but visual dozen see these problems or some, old liu also recommended many times feel good resources, logical should share, writing the article that anyone asks, later go directly to share articles, You don’t have to post links to those resources every time, and it doesn’t explain much. But he never did, and now he’s here.
Although the past so long, but still come into contact with and want to recommend the following resources, after all, the core understand D3. How js for visualization, mastered the process, the step, principle, then go to the source code examples or other works, it is good to fit more, also not be online all sorts of styles, different code with partial implementation process.
Gu Liu also knows that a lot of people’s backgrounds are not quite the same, there are people who understand technology, there are people who don’t know technology, there are people who don’t know technology, there are people who are more inclined to Chinese resources, there are people who can accept Chinese and English… The following recommended resources may not be useful to everyone interested in d3.js visualization, but it does feel good, let’s sort it out first, you have other supplementary quality resources are also welcome to comment or share in the group.
Based on some
First of all, d3. js is a JavaScript library after all, but also a part of the front-end, so the necessary HTML, CSS, JS and other basic first go, will be of great help to the follow-up study of D3.js, and it is 2021, it is best to learn ES6 by the way. Arrow functions, template strings and so on are also simpler to use, after all, many examples are also written that way, not to see the confusion. Of course, if you are not running to the professional front end at the beginning, you can not learn too deep, such as JS array, object, function, loop, conditional judgment, async await and other basic grasp is almost enough, you can enter the next step of SVG and D3.js learning.
Here recommend gu Liu last year to learn the B station backing person tutorial, first of all, HTML, CSS, JS have a series of videos, learn in turn. Compared with many other videos, which are full of nonsense and lengthy content, Gu Liu likes xiang Jun’s brief and capable every class, which makes it easier for people to stick to it. Meanwhile, the whole system is complete and comprehensive.
Of course, need to repeat a sentence, JS part may be the first few chapters (such as chapter 4 array) after reading enough for the time being, if you are a novice, want to experience the visualization of D3. JS first, most of the chapters can be put first, in order to avoid here too deep, too long, the more learning more bald, and then give up.
D3. Js part
Js, in fact, there are many related resources on the Internet, and some Chinese, but many examples on the Internet are written at different times, may use d3. js v3/ V4 / V5 and other different versions, API slightly changed, resulting in unknown novice directly according to the implementation may appear error.
Fullstack D3 and Data Visualization
If you were to ask which resource would be most helpful for guliu to get started with d3.js visualization, it would be the code for the GitHub repository “TheRobBrennan/ explore-data-thinking-with-D3” without a doubt.
This is the supporting code for Amelia Wattenberger’s “Fullstack D3 and Data Visualization” book, with complete implementations of the chapter examples. Last year, Gu Liu also knew there was an implementation of Animated Sankey, so I searched Animated Sankey Chart to find the warehouse (I always thought it was not open source by the original author, but secretly released by others, so I’m not sure), but the implementation is quite complicated and I haven’t tried it yet.
This is recommended because there are seven general steps for drawing any diagram with D3.js, namely the following Chart drawing Checklist. And every example in the warehouse has such steps. Although not all seven steps are used in every diagram, understanding such a process framework is particularly helpful for getting started with D3.js visualization.
When you first get to d3.js, most of the first things you see are bar/scatter/line charts. It’s easy to use other tools or Echarts visualizations library, but d3.js is full of new concepts that require a lot of effort to implement: Scale, Enter Append, element drawing after binding data, X/Y coordinates need to be specified, axis axis/scale/axis name, legend, title, all these need to be written in code to draw.
"So simple and basic diagrams are so difficult, but complex diagrams are even more difficult to implement?"
Think many people should have had such an idea? Had this perception is very normal, but the ancient liu as a repetition can lead some people did not experience, before looking at seems to be quite complicated visualization of practitioners, can clap breast said, complex diagrams the implementation of the process in general and simple steps of the graph are in fact similar, mastered the above seven steps, I believe you also have the ability to reproduce the such beautiful work. In: Wendy Shijia’s “Escher’s Gallery” Visualization reappearance series (3) – Cow Dress Ancient Willow 2020-12-17
Therefore, Gu Liu strongly recommends that after you have a certain foundation, you should take a period of time to type the above examples in the warehouse every day. I believe it will be beneficial, but also help to develop the code style, so as not to be lost in the online examples of different writing methods.
In addition, Amelia has summarized this process in “Prototyping in D3” on Observable, but the JS writing method above is slightly different. In the following steps, Gu Liu will introduce some interesting visualization examples based on several steps.
In addition, There are Amelia’s paid video tutorials and e-books on Newline. Although they are not cheap and in English, you can learn them if you can. Last night when I was sorting out the resources, I found that the website will detect where people come from and automatically give a big discount. Listen to the heart, guliu is 45% discount for China, 49% discount for Group friends from Hong Kong, China, and 70% discount for Russia. I can’t help wondering whether the bigger the discount is, the poorer the person is identified.
Intro to D3
Finally, Amelia’s “Intro to D3” series can also be seen on her website.
It took a long time to introduce the above resources, but after all, Gu Liu really benefited from it, so I wrote more of the Lao. Here are some other resources.
Introduction to SVG and D3.js by Shirley Wu
When it comes to D3.js visualization, you can’t get away from Shirley Wu, and her “Introduction to SVG and D3.js” series is also highly recommended. Shirley took her work “Film Flowers” to teach everyone how to realize it step by step.
Say ashamed ancient liu so far have not how to see, but before do “silly apple 🍎” related visualization need to use Bessel curve to draw apple flowers, that will have to find reference, see: “with a visual way to bless a small idol happy graduation (on) – cattle clothing ancient Liu 2021-04-20”.
The other two websites
In addition, “D3 in Depth” and “The D3.js Graph Gallery” are both good websites. If gu Liu needs something, he will also check whether there are corresponding examples for reference.
Video tutorial
I also recommend a video tutorial. The course “Data Visualization programming – Using D3.js” is available on the B website of Tsinghua Computer Department. The course d3. js v5.9 + ES6 is almost the only Chinese d3. js video tutorial at present, and it seems unlikely that there will be other new tutorials (unless gu Liu also starts a tutorial someday). The idea has always been there, but it’s not quite there yet. In addition, you don’t need to use Flask to build Web services like in the course, just install a live server in VSCode. Courseware and code: github.com/Shao-Kui/D3…
Gu Liu was surprised to pass this course at STATION B more than a year ago. Although he did not finish it completely in the end, he gradually mastered D3.js with other resources above, but without this course, he might not have made up his mind to learn visualization more than a year ago. Maybe there would not be these articles, there would not be the current “visual communication group”, there would not be so many people, or very emotional.
In addition, station B also has a “Data Visualization tutorial @d3.js” featuring Up master handling Curran Kelleher’s YouTube video, which was released in 2018.
The 2020 version is also available on YouTube, and the 2021 version is currently being updated – “Get It Right in Black & White” link: vizhub.com/blog/2021/0…
Learn D3.js
Has recommended a lot of resources, in fact, we find a suitable for their own good learn, should be able to entry. Finally, Gu Liu recommends the book “Learn D3.js”. There are several d3. js books in Chinese, but they are not new enough (although I haven’t read them much), and this book is not only used v5.9 + ES6, but also the most comprehensive and detailed book about D3.js that Gu Liu knows. Interested in the public account “niuyi Ancient Liu” background reply “D3 book” to obtain the PDF version (deleted). Link: github.com/PacktPublis…
D3.jsLearn to punch in groups, study the book together? But I haven’t figured it out yet, and I don’t know how many people will be interested, so you can leave a comment.
The above is the arrangement of the share, accidentally write smelly and long, I hope to be helpful to some people.
If welcome to “visual communication group” to communicate, Jiaguliu wechat “xiaoaizhj” remarks “visual plus group” pull you into the group ha!
Welcome to follow gu Liu’s official account “Niu Yi Gu Liu”, and set a star tag so that you can receive updates as soon as possible.