【 例 句 】 Scales should Learn D3

primers

Learn D3: Data 4, only English translation, modifiable part of the code with static images replaced, for real-time interaction please read the original text.

• 原文 : Scales should be scaled

• Published Mar 24, 2020

• Origin

• My GitHub

The body of the

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

To try, check out these small (but delicious!) Fruit data sets.

We usually think of dimensions as spatial, such as positions in three dimensions, but abstract dimensions are not necessarily spatial. It may be quantitative, such as the count for each fruit above. Or it could be nominal, like a name.

In Semiology of Graphics, Jacques Bertin describes how graphic markers such as points and lines “represent difference (≠), similarity (≡), quantized order (Q) or non-quantized order (O), and representations of group, level, or vertical movement” can use position, size, color, etc. These graphical tag attributes are our visual variables.

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

(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 a linear scale because count is quantitative and the bar length should be proportional to the number, while Y is a segmented scale because name is symbolic and the bar is thick.

Each scale is configured in pairs from abstract data (domain) to visual variables (rang). For example, the lower limit of X-Domain (0) maps to the lower limit of X-range (left edge of the graph) and the upper limit of Domain (maximum count) maps to the upper limit of rang (right edge).

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

The scale above is configured using a method chain. This compact style is possible because methods that configure scales, such as scale.domain, return scales. Here’s the equivalent.

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

What is D3 Scale? A function. Calling it returns a visual value (such as the x position) corresponding to a given abstract value (such as count).

By convention, most D3 charts apply margins to the insertion scale range and leave room for the axis. So x(0) is usually not zero; This is the magnitude of the left margin.

The xy position returned by these scales is a point, for example [x=640, y=30]. But since bars are not infinitesimal, they have a width and a height that correspond to the upper right corner of the bar. The width of the bar is x(count)-x(0), and its height is defined by y.bandwidth() on the segmented scale.

Let’s take a closer look at how scale is used. Below is a single bar of code.

The code above is the template text of an HTML tag, HTML ‘… Observable is a convenient way to render HTML tags. Dynamic expressions, such as the width of a bar, can be used as ${… } Literal embedding.

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 the bars simultaneously by mapping the data to an SVG element.

These nested expressions use SVG ‘… Observable template literals for SVG tags, not HTML tags, since SVG elements have their own XML namespace. For external SVG elements, you can use SVG ‘… ` or HTML `… ‘, but internally, SVG literals are required due to namespaces.

Another good reason to use scale is that D3 provides axes that clearly show the proportional coding of positions, as well as good, human-readable scales. Axes improve the readability of charts and help you communicate.

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

To add axes, we first use SVG ‘… ‘Creates a (unseparated) G element. We then select the element by passing it to d3.select. We then call Selection. Call once to render the axis into the G element, and remove the domain path again (for minimalist style). Finally, we get the G element by calling selection.node and embed it in an external literal.

Location is the strongest visual variable, so it’s no coincidence that our discussion of scale so far has focused on location.

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

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

Passing the color scale returns the corresponding color string.

Now we can add extra coding to the bar chart, mapping count to color and x positions. To document the color coding, similar to the axis of position coding, we will introduce the D3 color legend.

Some visualizations require specialized graphics tags that are not built into SVG or Canvas. Next, we’ll move past the basic bar chart and look at the shape of D3.

Next

The resources

• Learn D3: Scales