[Translation] Learn D3 document: Introduction

Introduction

D3 has heard that I want to try it a long time ago. The Chinese translation I found can be referred to when checking the API. It is not convenient for getting started. I plan to translate the latest official tutorial first.

• Original: Learn D3: Introduction
• Version: Published Mar 24, 2020
• Origin
• My GitHub

text

This series will guide you the first D3.js 16111cf9f28dd5.

Before we start, it is worth considering briefly: Why bother to learn D3? Why study on Observable?

First of all, D3 is very popular ( 179M downloads and 97K start), so you have a good companion group. There are a lot of community-developed resources, including tutorials, videos, courses, and books. The D3 team has published hundreds of derivable examples and tutorials to benefit your learning and productivity.

On the other hand, D3 has flexible characteristics. The super power of D3 is that you can do whatever you want-create freely! D3 gallery is a veritable zoo species: TreeMap , your Hierarchical Edge bundling , Sankey Diagram , Density Contours , Force-Directed Graph etc. (there are nearly one hundred map projection !). This flexibility stems from D3's basic method, which focuses on the basic elements that can be combined, such as shape and ratio , rather than configurable charts. D3 does not impose any constraints, so it is beneficial to take advantage of all the features supported by modern browsers.

D3 is famous for animation and interaction. If you have a few minutes, you can watch a bar chart race or animated treemap . Enter hierarchical bar chart , collapsible tree or 16111cf9f29260 , treemap or circles . Or brush a scatterplot matrix or enlarge a area chart . Animation is a powerful carrier for storytelling, and interaction allows active readers to explore.

Of course, gaining this power comes at a price. There are many things to learn: D3 has more than thirty modules and a thousand methods! D3 may be more tedious than tools dedicated to exploring visualization, such as Vega Lite .

At this time it was Observable's turn to play.

Observable is an ideal environment for learning D3, because it uses the data stream simplify the code , and like a spreadsheet . When you edit, the cell will run automatically to get quick feedback. You can add interaction or animation with almost no code! We will introduce Observable's feature .

Observable revolves around collaboration, helping you learn from the community and give back to the community, not just copy and paste. Any notebook can be derived or imported into . Notebooks can be exported as reusable components, such as color legend or scrubber . You can on the cell , suggest and to change 16111cf9f293ae, or for help .

The introduction is enough. Let's kick off the curtain and start learning D3.

Reference

• Learn D3: Introduction