[Translation] Learn D3 Getting Started Document: Scales

Introduction

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

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

text

Among all the tools of D3 data graphics, the most basic is the scale, which maps the abstract dimension of data to visual variables.

To try, take a look at these small (but delicious!) fruit data sets.

89-1

We usually think of dimensions as spatial, such as position in three-dimensional space, but abstract dimensions are not necessarily spatial. It may be quantitative, such as count for each fruit above. Or it may be nominal, such as a name .

89-2
89-3

In Semiology of Graphics , Jacques Bertin described how graphical marks such as points and lines "represent differences (≠), similarity (≡), quantization order (Q) or non-quantization order (O), and group, level or The indication of vertical movement can use position, size, color, etc. These graphic mark attributes are our visual variables.

89-4

Like many visualizations, the following bar chart maps two abstract dimensions to two visual variables: name dimension maps to the y position of the count dimension maps to the x position. These mappings are implemented by the x and y .

89-5
89-6
89-7

(Please feel free to edit the code and see what happens!)

There are many types of D3 scales. Which one to use depends on the abstract dimension (quantitative or symbolic?) and visual variables (position or color?). Here x is the linear scale , because count is quantitative, the bar length should be proportional to the value, and y is the segmented scale , because the name is symbolic thick and thick, ffd.

Each scale is configured in pairs from abstract data ( domain ) to visual variables ( rang For example, x-domain of the lower limit value (0) is mapped to the lower limit value of the x-range (the left edge of the chart), domain upper limit (maximum count) is mapped to rang upper limit value (the right edge).

For the linear scale, domain and rang are consecutive intervals (from minimum to maximum ). For the segment scale, domain is an array of discrete values (🍊, 🍇, 🍏, …) and rang is a continuous interval; the segment scale automatically determines how to divide the range into discrete filled segments.

The above scale is configured method chain This concise style is feasible because the method of configuring the scale (such as scale.domain ) will return the scale. The following is an equivalent way of writing.

89-8

If you call the scale method without parameters, you can also use the Scale method to retrieve their associated values. This is very useful for getting new scales or debugging.

89-9
89-10

What is D3 scale? A function. Calling it will return the visual value (such as x position) corresponding to the given abstract value (such as count

89-11
89-12
89-13

Following the convention , most D3 charts apply margins to the interpolated scale range and leave room for the axis. Therefore, x(0) is usually not zero; this is the size of the left margin.

89-14

xy position returned by these scales is a point, for example [x=640, y=30]. But because the bars are not infinitely small, they have a width and height, and this position corresponds to the upper right corner of the bar. The width of the bar is x(count)-x(0) , and its height is defined y.bandwidth()

89-15
89-16
89-17

Let's take a closer look at how the scale is used. Below is the code for a single bar.

89-18
89-19

The above code is a template text for HTML tags. html\`……\` is a convenient way to render HTML tags in Observable. Dynamic expressions, such as the width of bars, can be ${…} literals.

The real magic of HTML literals is that embedded expressions can be DOM elements or even arrays of DOM elements! Therefore, we can generate all bars at the same time by mapping data to SVG elements.

89-20

(These nested expressions use svg\`…\` -Observable template literal, specifically for SVG tags, not HTML tags, because SVG elements have their own XML namespace. For external SVG elements, you You can use svg\`…\` or html\`…\`, but internally, SVG literals are required due to namespaces.)

Another good reason for using a scale is that D3 provides an axis that clearly shows the position scale code, and a good, human-readable scale. The axis improves the readability of the chart and helps you communicate.

89-21

The D3 axis requires the selector . So far, we have avoided using declarative HTML template literals. But as shown above, the two can be paired harmoniously.

To add the axis, we first use svg\`……\` to create a (not yet separated) G element. Then we select the element by passing it to d3.select Then we call selection.call to render the axis into the G element once, and then remove the domain path again (for minimalist style). Finally, we selection.node and embed it in the external literal.

Position is the strongest visual variable, so it is no coincidence that our discussion of scale so far has focused on position.

However, the scale can be used for other visual variables, such as color. 🌈

89-22

The above code defines a sequential scale, which is similar to a linear scale, except that its range depends on the interpolator. The interpolator is a function that takes a value between 0 and 1 and returns the corresponding visual value. Usually, this interpolator is one of D3's built-in color scheme .

Pass the color scale to return the corresponding color string.

89-23
89-24

Now we can add an additional code to the bar chart to map count to color and x position. In order to record the color code, similar to the position coded axis, we will introduce the D3 color legend .

89-25
89-26

Some visualizations require special graphic markup, which is not built into SVG or Canvas. Next, we will go over the basic bar graph and understand the shape of D3.