How does the area relate to the line and points? It looks very different. Also, I don't get what this image is trying to convey.

If you’re interested, I recommend reading Semiology of Graphics. Here’s how Bertin describes these three different types of graphical marks (“significations”): > A POINT represents a location on the plane that has no theoretical length or area. This signification is independent of the size and character of the mark which renders it visible. > A LINE signifies a phenomenon on the plane which has measurable length but no area. This signification is independent of the width and characteristics of the mark which renders it visible. > AN AREA signifies something on the plane that has a measurable size. This signification applies to the entire area covered by the visible mark. Bertin’s framework describes how abstract information can be encoded in the appearance of marks (shapes) in a way that generalizes to any possible visualization. That, in a nutsell, is what this figure attempts to convey: the concept of mapping abstract dimensions of data (such as the count and name of fruit) to visual variables of graphical marks (such as the position and length of bars) to allow viewers to interpret relationships in the data using only their eyes.

为什么 interpolate(d3.interpolateRound) interpolate不是传递参数a和b吗？ d3.interpolatedRound又是什么鬼

The scale passes the parameters a and b (from its range) to its interpolator, which is set by scale.interpolate. https://github.com/d3/d3-scale/blob/master/README.md#continuous_interpolate

传递参数 a 和 b 是 d3.interpolate，但这里是 continuous.interpolate，它接收的是一个 d3.interpolate，即 d3.interpolatedRound 它们来自于不同的模块，对于 continuous 请参考 d3-scale 模块；而 d3.interpolate 所在的模块就是 d3-interpolate

顺便多提一句，continuous.interpolate 的默认值就是 d3.interpolate（如果不显式指定的话），这个例子里指定了 d3.interpolateRound 是为了四舍五入。 可能你会想：为什么 continuous 不能像 band 一样直接提供一个 .round() 方法？这样不是更简单么？ 原因是 continuous.range 不只是能使用 numbers，也可以用于其他类型的数据，比如用一些颜色名称来作为 range，此时 .round() 是没有意义的，需要更合适的“解释器”，比如说 d3.interpolateRgb 等等。仔细阅读 continuous.interpolate 的文档，可以看到更多详细的解释和范例

Can you do something like this with JSX instead of hypertext literal? ${d3.select(svg`<g transform="translate(0,${margin.top})">`) .call(d3.axisTop(x)) .call(g => g.select(".domain").remove()) .node()} Especially the inline select expression.

To answer myself, I guess not. JSX doesn't return a DOM object that can be d3.selected like HTL does.

Why are they required or recommended? I have seen d3.append used instead, for example in the D3 Chart Template nb.

width是多少？

the chart width is defined in the width cell in the Appendix below https://observablehq.com/@d3/learn-d3-scales#width

how does one find these delicious emoticons? are they utf-8?

Emoji are part of unicode. https://unicode.org/emoji/charts/full-emoji-list.html