3f:null 40:["$","title",null,{"children":"4_Learn D3: Scales | onepisya | Observable"}] 46:T8be,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return htl.svg``; }47:[{"id":"ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","href":"https://static.observableusercontent.com/files/ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","name":"bertin-variables.png","type":"image/png","lastModified":1660579702044.408,"size":329437}] 44:{"id":"7bcfd49572b30d28","slug":"4_learn-d3-scales","title":"4_Learn D3: Scales","thumbnail":"2b51d1b3a7aa67580c068c5222bc4e67096c7703b5ee9b1607ca1b24e46a106c","access_level":"public","create_time":"$D2022-08-15T16:08:22.044Z","update_time":"$D2022-10-18T04:57:10.238Z","view_time":null,"first_public_time":"$D2022-08-15T16:08:39.009Z","has_unpublished_edits":null,"fork":{"id":"68c99514280dff28","slug":"learn-d3-scales","title":"Learn D3: Scales","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":4509,"publish_version":4509,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"4_Learn D3: Scales","cells":[{"id":75,"value":"# 4_Learn D3: Scales\n\n在所有D3用于数据图形(data graphics)的工具中，最基本的是 `scale`，它将数据的抽象维度映射到视觉变量。\n为了品尝一下，请考虑这个小小的（但美味！）的水果数据集。\n\nscale 其实和比例尺有点相似。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4503,"value":"{\n const run2pixels = d3\n .scaleLinear()\n .domain([0, 42.195]) // unit: km\n .range([0, 600]); // unit: pixels\n\n const a = run2pixels(0); // The start line return 0\n const b = run2pixels(42.195); // 全程马拉松42.195公里;以600像素表示\n return [a, b];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3042,"value":"我们通常将维度视为空间，例如在三个维度中的位置，但是抽象维度不必是空间。它可能是定量的，例如上面的每个水果的计数 `count`。或者可能是名义上的，例如名称 `name`。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3825,"value":"fruits.map(d => d.count) // the count dimension (quantitative)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3828,"value":"fruits.map(d => d.name) // the name dimension (nominal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"在图形的半神学(*Semiology of Graphics*)中，雅克·伯丁（Jacques Bertin）描述了图形标记（graphical marks），比如 `points` 和 `lines` 可以 “表示差异 (≠), 相似指之处 (≡), 一个量化 order (Q), or 一个非量化 order (O)，并可以使用以使用 position, size, color,来表示 groups（群组）,hierarchies(层次)，vertical movements（垂直移动)，图形标记的这些属性就是我们的视觉变量。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3075,"value":"md`

From *Semiology of Graphics*, colorized by the author.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3394,"value":"与许多可视化一样，下面的柱状图将两个抽象维度映射到两个可视化变量: `name` 维度映射到柱状图的 `y位置`，而 `count` 维度映射到 `x位置`。这些映射是通过随后的`x`和 `y` `scales` 来实现的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3396,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"x = d3\n .scaleLinear()\n .domain([0, d3.max(fruits, (d) => d.count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2237,"value":"y = d3.scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3081,"value":"(请随意编辑代码，看看会发生什么!)\n\n> D3(scales) 有多种类型。您使用哪个取决于抽象维度。quantitative or nominal?（定量或名义？）和视觉变量（位置还是颜色？position or color?）。\n\n\n> 在这里，`X` 是 [linear scale 线性 scale](/@d3/d3-scalelinear) ，因为计数 `count` 是定量 `quantitative` 的，条形长度(bar length) 应与值 value 成正比，而 `Y` 是一个 [刻度 band scale](/@d3/d3-scaleband)，因为 `name` 为标称(nominal) 和条形(bars) 厚度。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3474,"value":"每个尺度(scale)由抽象数据(`domain`)到可视变量(`range`)的成对,对应来配置。\n\n> 例如，将 `x`-domain 的下值(0) 映射到 `x`-range 的下值(图表的左边缘)，而将 `domain` 的上值(最大计数)映射到 `range` 范围的上值(右边缘)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3539,"value":"对于线性(scale) ，domain 和 range 是连续间隔（从最小 `min` 到最大 `max`）。对于(brand scale) 频段刻度，`domain` 是离散值的数组（🍊，🍇，🍏，…），而 `range` 是连续的间隔。频带刻度(brand scale) 会自动确定如何将范围 `range` 切成离散的填充带(padded bands)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4036,"value":"上面的 scales 是使用方法链式(*methods chaining*) 配置的。这种简洁的样式之所以可以使用，是因为配置比例尺(scale)（例如 `scale`.domain）返回比例尺 (scale) 的方法。这是等效的写法(longhand)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"{\n const x = d3.scaleLinear();\n x.domain([0, d3.max(fruits, d => d.count)]);\n x.range([margin.left, width - margin.right]);\n x.interpolate(d3.interpolateRound);\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"如果您没有参数，则比例(scale)方法也可以用于检索其关联的值。这对于得出新的量表(scales)或调试很有用。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"x.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"什么是D3 `scale` ?一个函数。调用它将返回与给定抽象值(如计数 `count`)相对应的视觉值(如 `x` 位置)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"y(\"🍇\") // the y-coordinate for name = grapes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2720,"value":"x(21) // the x-coordinate corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4313,"value":"x(0) // the x-coordinate corresponding to count = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4191,"value":"按照惯例[convention](/@d3/margin-convention)，大多数D3图在插入刻度范围(scale ranges)时使用边距，并为轴留出空间。因此，`x(0)` 通常不为零;关键在于左页边距的大小。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4076,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"value":"这些量表(scales) 返回的`XY` 位置是一个点，例如[*x* = 640, *y* = 30] 。但是，由于 `bars` 不是无限的（它们的宽度和高度），因此该位置对应于 `bars` 的右上角。`bar`'s 的宽度为 *x*(*count*) - *x*(0)，其高度定义为 *y*.bandwidth() 由频段刻度(brand scale) 定义。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3541,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3595,"value":"x(21) - x(0) // the width of the bar corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"y.bandwidth() // the height of each bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3620,"value":"让我们再剥一层洋葱(或香蕉?)，看看如何使用 `scales`。下面是一个单独的 `bar` 的代码。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"viewof count = Inputs.range([0, 21], {value: 12, step: 1, label: \"Count\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3607,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"md`上面的代码使用超文本文字 [hypertext literal (htl)](/@observablehq/htl)，这是一种在 **Observable** 中渲染 **HTML** 或 **SVG** 标记的方便方法。动态表达式（例如 **bar** 的宽度）可以嵌入文字中为 \\$ {…}。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"md`不过，超文本字面量的真正魔力在于，嵌入表达式可以是DOM元素，甚至可以是DOM元素的数组!因此，通过将数据映射到SVG元素，我们可以同时生成所有的条形图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"（这些嵌套表达式使用 `htl.svg` - 专门针对SVG而不是HTML的超文本字面文字 - 因为SVG元素具有其自己的XML名称空间。您可以将 `htl.svg` 或`htl.html` 用于外部SVG元素，但在SVG中，文字是必要的。因为名称空间。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"使用量表(scales)的另一个很好的理由是，D3提供了明确显示位置量表(scale's)编码的轴，并配有漂亮的人类可读刻度(ticks)。轴改善了图表的可读性，帮助您进行交流。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4347,"value":"D3 axes 需要 [selections](https://github.com/d3/d3-selection)，到目前为止，我们一直在避免选择，而倾向于声明式超文本字面量(htl)。但如上所述，这两者是可以和谐搭配的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"要添加轴(axis)，我们首先使用 `htl.svg` 创建（尚未分离的）`G` 元素。然后，我们通过将其传递给 [d3.select](https://github.com/d3/d3-selection/blob/main/README.md#select) 选择此元素。然后，我们调用 [*selection*.call](https://github.com/d3/d3-selection/blob/main/README.md#selection_call)一次将轴渲染到G元素中，然后再次删除 (domain path)（用于简约的样式）。最后，我们通过调用[*selection*.node](https://github.com/d3/d3-selection/blob/main/README.md#selection_node) 来检索 G 元素，然后将其嵌入外面文字中。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"位置是最强的视觉变量，所以到目前为止，我们对尺度(scales)的讨论都集中在位置(position)上，这并不是巧合。\n\n然而，刻度还可以用于其他视觉变量，如颜色(color)。🌈","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3763,"value":"color = d3.scaleSequential()\n .domain([0, d3.max(fruits, d => d.count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3940,"value":"上面的代码定义了一个顺序刻度(sequential scale)，该刻度(scale)与线性比例(linear scale)相似，除非它依赖于插值器。插装器是一个函数，该函数的值在0到1之间，返回相应的视觉值。通常，这个插值器是D3 [内置的配色方案 built-in color schemes](/@d3/color-schemes)之一。\n\n比如下方的示例，传递一个值，返回一个颜色字符串。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3918,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3921,"value":"color(21)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3953,"value":"现在，我们可以在条形图(bar)中添加一个冗余编码，将计数(count)映射到(color)颜色以及 `X postion`。为了记录颜色编码，类似于位置编码的轴，我们将导入[D3 color legend 图例](/@d3/color-legend).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3767,"value":"Legend(color, {title: \"Number of fruit\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3765,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"一些可视化需要**不在SVG或画布内置的专门图形标记**。接下来，我们将超越基本条形图并访问D3的 **shapes**。\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"height = 202","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2307,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3769,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"