Learn D3 introduction document: scales

Time:2021-9-27

Introduction

FollowLearn D3: DataThe fourth article is only an English translation. The modifiable code is replaced by static pictures. If you want real-time interaction, please read the original text.

text

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

To try, look at these small (but delicious!) fruit datasets.

Learn D3 introduction document: scales

We usually think that the dimension is spatial, such as the position in three-dimensional space, but the abstract dimension is not necessarily spatial. It may be quantitative, for example, for each fruit abovecount。 Or it could be nominal, like aname

Learn D3 introduction document: scales
Learn D3 introduction document: scales

staySemiology of GraphicsIn, Jacques Bertin describes how graphical markers such as points and lines “represent difference (≠), similarity (≡), quantization order (q) or non quantization order (o), and the representation of group, hierarchy or vertical movement” can use position, size, color, etc. These graphical marker attributes are our visual variables.

Learn D3 introduction document: scales

Like many visualizations, the following bar chart maps two abstract dimensions to two visual variables:nameDimension mapped to bar chartyLocation, andcountDimension mapping toxLocation. These mappings are defined by the followingxandyScale implementation.

Learn D3 introduction document: scales
Learn D3 introduction document: scales
Learn D3 introduction document: scales

(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 the visual variable (position or color?). herexyesLinear scaleBecausecountIt is quantitative. The strip length should be proportional to the value, andyyesSectional scaleBecausenameIt is symbolic and thick.

Each scale bar is obtained from abstract data(domain)To visual variable(rang)Configured in pairs. For example, the lower limit of x-domain (0) is mapped to the lower limit of x-range (the left edge of the chart),domainThe upper limit value (maximum count) of is mapped torangThe upper limit of the (right edge).

For linear scales,domainandrangIs a continuous interval (fromminimumreachmaximum)。 For segment scale,domainIs an array of discrete values (,,,…)rangIs a continuous interval; The segment scale automatically determines how the range is divided into discrete fill segments.

The above scale is usedMethod chainConfigured. This concise style is feasible because of the method of configuring the scale (e.gscale.domain)The scale bar is returned. The following is the equivalent writing method.

Learn D3 introduction document: scales

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

Learn D3 introduction document: scales
Learn D3 introduction document: scales

What is D3 scale? A function. Call it to return an abstract value (such ascount)Corresponding visual value (e.g. x position).

Learn D3 introduction document: scales
Learn D3 introduction document: scales
Learn D3 introduction document: scales

according toconvention, most D3 charts apply margins to the insertion scale range and make room for axes. So,x(0)Usually not zero; This is the size of the left margin.

Learn D3 introduction document: scales

These scales returnxyThe position is a point, for example [x = 640, y = 30]. But because the bars are not infinitely small, they have a width and height, which corresponds to the upper right corner of the bar. The width of the bar isx(count)-x(0)Its height is determined by the height of the segmented scaley.bandwidth()definition.

Learn D3 introduction document: scales
Learn D3 introduction document: scales
Learn D3 introduction document: scales

Let’s take a closer look at how the scale is used. Here is a separate bar code.

Learn D3 introduction document: scales
Learn D3 introduction document: scales

The above code 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 bars simultaneously by mapping data to SVG elements.

Learn D3 introduction document: scales

(these nested expressions usesvg\`…\`——The template literal of observable is specifically used for SVG tags, not HTML tags, because 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 the scale bar is that D3 provides an axis that clearly shows the position scale code, as well as a good, human readable scale. The axis improves the readability of the chart and helps you communicate.

Learn D3 introduction document: scales

D3 axis requiredselectorSo far, we have avoided using declarative HTML template literals. However, as shown above, the two can be matched harmoniously.

To add an axis, we first use SVG \ `… \ ` to create a (not yet separated) g element. Then we pass the element tod3.selectTo select the element. Then we callselection.callRender the axis into the G element once, and then remove the domain path again (for minimalist style). Finally, we callselection.nodeGets the G element and embeds it in an external literal.

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

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

Learn D3 introduction document: scales

The above code defines a sequential scale, which is similar to linear scale, except that its range depends on the interpolator. Interpolator is a function that takes a value between 0 and 1 and returns the corresponding visual value. Generally, this interpolator is D3Built in color schemeone of.

Pass the color scale and return the corresponding color string.

Learn D3 introduction document: scales
Learn D3 introduction document: scales

Now we can add additional coding to the bar graph to map count to color and X positions. In order to record the color coding, similar to the axis of position coding, we will introduce D3Color legend

Learn D3 introduction document: scales
Learn D3 introduction document: scales

Some visualizations require special graphical markers that are not built into SVG or canvas. Next, we will go beyond the basic bar graph and understand the shape of D3.

Next

appendix

Learn D3 introduction document: scales
Learn D3 introduction document: scales
Learn D3 introduction document: scales
Learn D3 introduction document: scales
Learn D3 introduction document: scales

attach

According to the source code, the platform dependency is removed and the main code is extracted. There are the following examples:

reference material

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]