[Translation] Learn D3 Document: By Example

Introduction

Following the Learn D3: Introduction , it is only an English translation. The part of the code that can be modified is replaced with a static picture. If you want to interact in real time, please read the original text.

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

text

One of the best ways to start using D3 is browse sample library .

If you are lucky (and you have a lot of options, your chances are good), you may find an example that can be repurposed. This can save a lot of effort in learning how to build from scratch. For example, to construct a treemap, you can query the d3 level API index , but a faster way is to get the treemap example and replace your data.

This may feel like cheating, but it's okay! 👍 Examples are not only reusable templates, but also learning tools, suggesting topics to learn. "Break" an example, by patching changed things and seeing what happened, can help you understand faster than passive reading.

In addition, it is very interesting. 😺

No coincidence, Observable is designed to help you fix it. Visit any notebook, edit a cell, and see what happens! In many cases, all you need to replace data is to click to replace the file. If you like this result, save your work by deriving.

You can also import examples and modify them without digging into the code. There is no doubt that this is the fastest way to start using D3, and it will become more powerful as you learn.

Let's see how to proceed.

Suppose I give you a set of numbers. What can you tell me about these data?

You can manually view some values, but this will not show too much. There is no way to know whether the minority value you are examining represents the entire distribution. What if you want to introduce D3 (version 6) summary statistics , such as minimum, median, and maximum?

Well, this is important. But we need something richer than a single number to get a sense of distribution.

We need a visualization. To be precise, it is a histogram. Therefore, let us import histogram example and use the imported with clause (a feature unique to Observable JavaScript) to use the numeric array values as data .

Look! Now we see: the data roughly forms a normal distribution centered on zero (I used d3.randomNormal create these values, the expected value μ=0, the standard deviation σ=1.)

But we are not limited to replacing data when importing. We can overwrite any cell, such as customizing the style of x or y axis. Or, if we prefer the chart with a slightly smaller height, we can redefine the height.

In this slightly smaller chart, have you noticed that there are fewer ticks along the y-axis? Magic! If you think this is cool, then when we inject dynamic data, take a look at this histogram! Click "play" below or drag the slider.

The values3 cell below generates random values, and the x cell fixes the area of the histogram to [-10，+10] . The fixed area shows how the distribution mu ; if the fixed area is not specified, the area will be calculated to fit the data, and only by carefully reading the x-axis scale, the change in the distribution will be obvious (you must personally Check, please try to remove x with clause below.)

We don't need to rewrite the histogram to activate it, because mu , including imported cells, mu changes, thanks to the data stream .

Now that you have seen how to reuse the example, let's write some code from scratch!

Next

Attached

Extracted the main code of the above example, made a static page, see here .

Reference

• Learn D3: By Example