44:["$","title",null,{"children":"Scales / Observable Plot | 1907040202 | Observable"}] 4c:T6b3,viewof schemeq = Inputs.select(new Map([ ["Blues (sequential, single-hue)", "blues"], ["Greens (sequential, single-hue)", "greens"], ["Greys (sequential, single-hue)", "greys"], ["Purples (sequential, single-hue)", "purples"], ["Reds (sequential, single-hue)", "reds"], ["Oranges (sequential, single-hue)", "oranges"], ["Turbo (sequential, multi-hue)", "turbo"], ["Viridis (sequential, multi-hue)", "viridis"], ["Magma (sequential, multi-hue)", "magma"], ["Inferno (sequential, multi-hue)", "inferno"], ["Plasma (sequential, multi-hue)", "plasma"], ["Cividis (sequential, multi-hue)", "cividis"], ["Cubehelix (sequential, multi-hue)", "cubehelix"], ["Warm (sequential, multi-hue)", "warm"], ["Cool (sequential, multi-hue)", "cool"], ["BuGn (sequential, multi-hue)", "bugn"], ["BuPu (sequential, multi-hue)", "bupu"], ["GnBu (sequential, multi-hue)", "gnbu"], ["OrRd (sequential, multi-hue)", "orrd"], ["PuBuGn (sequential, multi-hue)", "pubugn"], ["PuBu (sequential, multi-hue)", "pubu"], ["PuRd (sequential, multi-hue)", "purd"], ["RdPu (sequential, multi-hue)", "rdpu"], ["YlGnBu (sequential, multi-hue)", "ylgnbu"], ["YlGn (sequential, multi-hue)", "ylgn"], ["YlOrBr (sequential, multi-hue)", "ylorbr"], ["YlOrRd (sequential, multi-hue)", "ylorrd"], ["BrBG (diverging)", "brbg"], ["PRGn (diverging)", "prgn"], ["PiYG (diverging)", "piyg"], ["PuOr (diverging)", "puor"], ["RdBu (diverging)", "rdbu"], ["RdGy (diverging)", "rdgy"], ["RdYlBu (diverging)", "rdylbu"], ["RdYlGn (diverging)", "rdylgn"], ["Spectral (diverging)", "spectral"], ["BuRd (diverging)", "burd"], ["BuYlRd (diverging)", "buylrd"], ["Rainbow (cyclical)", "rainbow"], ["Sinebow (cylical)", "sinebow"] ]), {label: "Color scheme", value: "turbo"})4d:T6b3,viewof schemeo = Inputs.select(new Map([ ["Blues (sequential, single-hue)", "blues"], ["Greens (sequential, single-hue)", "greens"], ["Greys (sequential, single-hue)", "greys"], ["Purples (sequential, single-hue)", "purples"], ["Reds (sequential, single-hue)", "reds"], ["Oranges (sequential, single-hue)", "oranges"], ["Turbo (sequential, multi-hue)", "turbo"], ["Viridis (sequential, multi-hue)", "viridis"], ["Magma (sequential, multi-hue)", "magma"], ["Inferno (sequential, multi-hue)", "inferno"], ["Plasma (sequential, multi-hue)", "plasma"], ["Cividis (sequential, multi-hue)", "cividis"], ["Cubehelix (sequential, multi-hue)", "cubehelix"], ["Warm (sequential, multi-hue)", "warm"], ["Cool (sequential, multi-hue)", "cool"], ["BuGn (sequential, multi-hue)", "bugn"], ["BuPu (sequential, multi-hue)", "bupu"], ["GnBu (sequential, multi-hue)", "gnbu"], ["OrRd (sequential, multi-hue)", "orrd"], ["PuBuGn (sequential, multi-hue)", "pubugn"], ["PuBu (sequential, multi-hue)", "pubu"], ["PuRd (sequential, multi-hue)", "purd"], ["RdPu (sequential, multi-hue)", "rdpu"], ["YlGnBu (sequential, multi-hue)", "ylgnbu"], ["YlGn (sequential, multi-hue)", "ylgn"], ["YlOrBr (sequential, multi-hue)", "ylorbr"], ["YlOrRd (sequential, multi-hue)", "ylorrd"], ["BrBG (diverging)", "brbg"], ["PRGn (diverging)", "prgn"], ["PiYG (diverging)", "piyg"], ["PuOr (diverging)", "puor"], ["RdBu (diverging)", "rdbu"], ["RdGy (diverging)", "rdgy"], ["RdYlBu (diverging)", "rdylbu"], ["RdYlGn (diverging)", "rdylgn"], ["Spectral (diverging)", "spectral"], ["BuRd (diverging)", "burd"], ["BuYlRd (diverging)", "buylrd"], ["Rainbow (cyclical)", "rainbow"], ["Sinebow (cylical)", "sinebow"] ]), {label: "Color scheme", value: "turbo"})4e:[{"id":"bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","href":"https://static.observableusercontent.com/files/bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","name":"gistemp.csv","type":"text/csv","lastModified":1636803217057.69,"size":27014},{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1636803217057.69,"size":15106}] 48:{"id":"a83326835af42ae7","slug":"scales-observable-plot","title":"Scales / Observable Plot","thumbnail":"29887dc726eec614495ff3a77b1d513e18ab4b7d5f2274e019ea761dc4f25434","access_level":"public","create_time":"$D2021-11-13T11:33:37.057Z","update_time":"$D2021-11-15T10:01:25.251Z","view_time":null,"first_public_time":"$D2021-11-13T16:24:50.741Z","has_unpublished_edits":null,"fork":{"id":"859f77bf8cde8dc0","slug":"plot-scales","title":"Scales / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab56f65a3c59a775","login":"1907040202","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1781,"publish_version":1781,"role":null,"authored":false,"authors":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scales / Observable Plot","cells":[{"id":0,"value":"md`

Scales / Observable Plot

Observable Plot › Scales · API

\n\n# Plot: Scales\n\nscale将抽象值（例如时间或温度）映射到视觉值（例如 x 或 y 位置或颜色）。 scale定义了绘图的坐标系。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`在 Plot 中，scale常见命名规则为：**x** 或 **y** 表示位置； **fx** 或 **fy** 用于刻面位置； **r** 为半径；或者颜色。一个图可以有多个scale，但给定名称的最多只有一个scale。标记通道与scale相对应；例如，一个点的 **x** 通道对应 **x** scale。通道名称和scale名称通常相同，但并非总是如此；例如，条形的 **y1** 和 **y2** 通道都对应 **y** 刻度。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`scale主要由其输入域和输出范围决定：域通常是一组从数据中导出来的抽象值，例如时间间隔 [*start*, *end*] 或温度间隔 [*cold*, *hot*]；范围是一组视觉值，例如以像素为单位的图表范围 [*left*, *right*] 或颜色间隔 [*blue*, *red*]。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`为了更好地了解scale，让我们首先看一些只有 x 尺度和一些硬编码域的空图。 x 轴显示相应抽象值（来自域的值）的结果位置（来自范围的值）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## 连续位置\n\n定量scale的域是一个连续的区间 [*min*, *max*]，其中 min 和 max 是数字，例如温度。下面，第一个域值 (x = 0) 对应于图的左边缘，而第二个 (x = 100) 对应于右边缘。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Plot.plot({x: {domain: [0, 100]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`翻转域会反转scale，使得 +x 指向 ←left 而不是 right→。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"Plot.plot({x: {domain: [100, 0]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`或者，使用**reverse**选项；当域从数据中隐含而不是明确指定时，这很方便。（我们将在下面的推理部分更详细地介绍隐含域。）`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"Plot.plot({x: {domain: [0, 100], reverse: true}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`如果域是日期，则 Plot 将默认为 UTC scale。这是基于公历的带有刻度的线性scale。（Plot 使用 [d3.scaleTime](https://github.com/d3/d3-scale#time_ticks) 的“multi-scale”刻度格式，所以一月显示为年份。）Plot 不解析日期；要将字符串转换为 [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 实例，可以使用 [d3.utcParse](https://github.com/d3/d3-time-format#utcParse) 或 [d3.autoType](https://github.com/d3/d3-dsv#autoType) 或者通过指定的转换方式: 例如true就是用Observable 的 FileAttachment 函数进行转换`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Plot.plot({x: {domain: [new Date(\"2021-01-01\"), new Date(\"2022-01-01\")]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`如果要强制使用 UTC scale，例如当数据是自 UNIX 纪元以来的毫秒数而不是日期实例时，要将“utc”作为type选项传递。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"Plot.plot({x: {type: \"utc\", domain: [1609459200000, 1640995200000]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md`如果type是“time”，scale将是本地时间而不是 UTC。这里要小心：如果你的读者在不同的时区，你可能会看到不同的图形。如果要绘制每日（或不那么频繁）的数据，则强烈建议使用 UTC。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Plot.plot({x: {type: \"time\", domain: [new Date(2021, 0, 1), new Date(2022, 0, 1)]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`当绘制变化很大的值时，例如 [HR diagram](/@mbostock/hertzsprung-russell-diagram)中恒星的光度，[对数变换](http://github.com/d3/d3-scale#log-scales)可能会提高可读性；这可以通过type设置为“log”启用，默认为具有指数符号的以 10 为底的刻度。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Plot.plot({x: {type: \"log\", domain: [1e0, 1e5]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"md`如果更喜欢传统的表示法，可以指定 **tickFormat** 选项来更改轴的表现形式。但是请注意，这可能会导致文本重叠。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"Plot.plot({x: {type: \"log\", domain: [1e0, 1e5], tickFormat: \",\"}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`另外它还支持 SI 前缀表示法； tickFormat 选项可以是 [d3.format](https://github.com/d3/d3-format) 字符串，也可以是采用刻度值并返回相应字符串的函数。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"Plot.plot({x: {type: \"log\", domain: [1e0, 1e5], tickFormat: \"~s\"}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`对数scale还支持**base**选项，比如 2 的幂。指数表示法只是以 10 为底的默认值。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"Plot.plot({x: {type: \"log\", base: 2, domain: [1e0, 1e4], ticks: 20}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`对数scale的域不能包含（或交叉）零；为此考虑使用双对称对数([bi-symmetric log](https://github.com/d3/d3-scale#symlog-scales)) scale。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Plot.plot({x: {type: \"symlog\", domain: [-10, 10]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`另外还支持幂scale和平方根scale。 “pow” scale支持**exponent**选项，默认为 1（对于线性scale）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Plot.plot({x: {type: \"sqrt\", domain: [0, 100]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"Plot.plot({x: {type: \"pow\", exponent: 1 / 3, domain: [0, 100]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"md`连续scale还支持一个**clamp**选项，如果为真，则在缩放之前将输入值固定到刻度域。这对于防止标记脱离图表区域很有用。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1753,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`## 离散位置\n\n并非所有数据都是连续和定量的：有些数据只是有序的，例如 T 恤尺寸，还有一些分类（也称为nominal）数据，例如服装品牌。要对这样的数据进行编码，需要point或band scale。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`point scale将空间划分为均匀间隔的离散值。它常用于有序数据的散点图（点标记）。它是 x 和 y 尺度上序数数据的默认尺度类型。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"Plot.plot({x: {type: \"point\", domain: [...\"ABCDEFGHIJ\"]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"md`band scale将空间划分为均匀间隔和大小的离散间隔。它常用于条形图（条形标记）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Plot.plot({x: {type: \"band\", domain: [...\"ABCDEFGHIJ\"]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`当只有网格可见时，point和band scale在视觉上看起来相似，但两者并不相同——它们各自的填充不同。可以使用下面的选项来了解它们对scale表现形式的影响。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"viewof padding = Inputs.range([0, 1], {value: 0.1, step: 0.01, label: \"Padding\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"viewof align = Inputs.range([0, 1], {value: 0.5, step: 0.01, label: \"Align\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"Plot.plot({\n grid: true,\n marginTop: 0.5,\n x: {\n padding,\n align,\n round: false\n },\n marks: [\n Plot.frame({stroke: \"#ccc\"}),\n Plot.tickX([...\"ABCDEFGHIJ\"], {x: d => d, fill: \"none\", stroke: \"currentColor\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"Plot.plot({\n grid: true,\n marginTop: 0.5,\n x: {\n padding,\n align,\n round: false\n },\n marks: [\n Plot.frame({stroke: \"#ccc\"}),\n Plot.cell([...\"ABCDEFGHIJ\"], {x: d => d, fill: \"none\", stroke: \"currentColor\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`还有一个**round**选项，可以强制scale对齐整数像素。这对于point和band scale默认为 true，对于定量scale默认为 false。使用高基数序域（即用于编码许多不同值的point或band scale）时要小心，因为舍入会导致“浪费”空间甚至零宽度带。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## 连续颜色\n\n虽然位置是最突出的特性，但是更重要的是编码，许多可视化也使用颜色编码。与位置一样，定量色标的默认类型是线性的：值的差异应与感知的颜色差异成正比。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"Plot.plot({\n color: {\n scheme: schemeq\n },\n marks: [\n Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"md`默认的配色方案是 [Turbo](https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html)。支持多种顺序、发散和循环方案，包括 ColorBrewer 和 [Viridis](http://bids.github.io/colormap/)。您可以通过指定scale的范围或传递一个内插函数来实现自定义配色方案，该函数采用 [0, 1] 中的参数 t。 interpolate 选项还可用于指定颜色空间或从范围中获取一对值的双参数函数。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"Plot.plot({\n color: {\n type: \"linear\",\n range: [\"steelblue\", \"orange\"] // uses d3.interpolateRgb\n },\n marks: [\n Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"Plot.plot({\n color: {\n type: \"linear\",\n range: [\"steelblue\", \"orange\"],\n interpolate: \"hcl\" // uses d3.interpolateHcl\n },\n marks: [\n Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"Plot.plot({\n color: {\n type: \"linear\",\n interpolate: t => `hsl(${t * 360},100%,50%)` // angry rainbow!\n },\n marks: [\n Plot.cell([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"md`和位置scale一样，你可以应用 sqrt、pow、log 或 symlog 变换；这些在处理非均匀分布的数据时通常很有用。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"html`${[\"log\", \"symlog\", \"sqrt\", \"linear\"].map(type => html`

${type}

${Plot.plot({\n height: 33,\n color: {\n type\n },\n x: {\n round: true,\n padding: 0,\n axis: null\n },\n marks: [\n Plot.cellX({length: 64}, {x: (d, i) => i, fill: (d, i) => (i + 1)})\n ]\n})}`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"md`diverging色标旨在显示正值和负值（或更一般的值高于或低于某个枢轴值）； diverging色标默认为“RdBu”（红蓝）配色方案。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"Plot.plot({\n color: {\n type: \"diverging\"\n },\n marks: [\n Plot.cell([-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"md`枢轴默认为零，但可以使用**pivot**选项更改它，理想情况下应该是域中间附近的值。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"viewof pivot = Inputs.range([-5, 5], {step: 0.1, value: -3, label: \"Pivot\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"Plot.plot({\n color: {\n type: \"diverging\",\n pivot\n },\n marks: [\n Plot.cell([-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"md`下面是一个实际示例，显示了观察到的全球表面温度，表示为相对于 1951-1980 年平均值的“异常”。请注意，使用“BuRd”配色方案是因为蓝色和红色在语义上分别与冷和热相关联。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"Plot.plot({\n grid: true,\n color: {\n type: \"diverging\",\n scheme: \"BuRd\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.dot(gistemp, {x: \"Date\", y: \"Anomaly\", stroke: \"Anomaly\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"gistemp = FileAttachment(\"gistemp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## 离散颜色\n\nPlot 还为离散数据提供配色方案。对分类无序数据使用分类类型，对有序数据使用序数类型。与定量数据的连续配色方案不同，这些离散配色方案针对低基数域进行了优化。注意，如果分类域的大小超过方案中的颜色数量，颜色将被重复使用；建议将值组合到“other”类别中。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"viewof schemec = Inputs.select(new Map([\n[\"Accent (categorical, 8 colors)\", \"accent\"],\n[\"Category10 (categorical, 10 colors)\", \"category10\"],\n[\"Dark2 (categorical, 8 colors)\", \"dark2\"],\n[\"Paired (categorical, 12 colors)\", \"paired\"],\n[\"Pastel1 (categorical, 9 colors)\", \"pastel1\"],\n[\"Pastel2 (categorical, 8 colors)\", \"pastel2\"],\n[\"Set1 (categorical, 9 colors)\", \"set1\"],\n[\"Set2 (categorical, 8 colors)\", \"set2\"],\n[\"Set3 (categorical, 12 colors)\", \"set3\"],\n[\"Tableau10 (categorical, 10 colors)\", \"tableau10\"]\n]), {label: \"Color scheme\", value: \"tableau10\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"Plot.plot({\n color: {\n type: \"categorical\",\n scheme: schemec\n },\n marks: [\n Plot.cell([...\"ABCDEFGHIJ\"], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"Plot.plot({\n color: {\n type: \"ordinal\",\n scheme: schemeo\n },\n marks: [\n Plot.cell([...\"ABCDEFGHIJ\"], {x: d => d, fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## 连续半径\n\n对于点标记[dot marks](/@observablehq/plot-dot)，r 通道使点的面积与相关的定量值成正比。相关 r scale的默认范围被构造为使得零值映射到零以实现准确的区域编码，而值的第一个四分位数映射到三个像素的半径；随着数据的变化，这往往更稳定。通过指定明确的范围，根据需要调整点大小。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"viewof radius = Inputs.range([1, 20], {label: \"Radius\", step: 0.1, value: 8})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"Plot.plot({\n r: {\n range: [0, radius]\n },\n marks: [\n Plot.dot([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {x: d => d, r: d => d, fill: \"black\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"inference = md`## 推论\n\nPlot 力求简洁：与其费力地指定所有内容，Plot 可以通过检查数据进行猜测，因此不必明确设置scale的**类型**、**域**和**范围**（以及颜色、方案）。但是为了使 Plot 的猜测准确，我们的数据必须符合 Plot 的预期。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"md`scale的**类型**最常从关联标记的通道值中推断出来：字符串和布尔值暗示序数刻度；日期意味着 UTC 刻度；其他任何东西都是线性的。 Plot 假设你的数据类型一致，因此推断仅基于第一个非空、非未定义的值。我们推荐typed CSV（通过指定的转换方式：例如true用 FileAttachment函数进行转换的csv 方法）或在加载数据时显式强制类型（例如d3.autoType）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"md`如果明确指定了scale的**域**，则scale的**类型**是从域值而不是如上所述的通道推断出来的。但是，如果域或范围有两个以上的元素，则使用序数类型（或位置标度的点）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`最后，一些标记可以声明关联通道的scale**类型**。例如，Plot.barX 将 y 定义为波段尺度。如果用户定义的scale类型与标记不匹配，则为错误。此外，刻面尺度 fx 和 fy 始终是波段尺度，而半径尺度 r 隐含地是一个 sqrt 尺度。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`如果不指定定量尺度的**域**，除了 r（半径）尺度从零到最大值之外，其他是关联通道值的范围（最小值和最大值）。使用 nice 选项可以将定量域扩展为“漂亮”的人类可读值。对于序数尺度，域默认为关联值的排序联合（所有不同值按自然顺序排列）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"md`所有位置scale（x、y、fx 和 fy）都具有基于图表维度的隐式自动范围。考虑边距，x scale范围从左到右边缘，而 y scale范围从底部到顶部边缘。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"md`## Transforms\n\nscale.**transform**选项允许在所有值通过scale之前将函数应用于所有值。这对于转换scale的数据很方便，比如转换为数千或在温度单位之间转换。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"sftemp = FileAttachment(\"sf-temperatures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"viewof celsius = Inputs.toggle({label: \"Celsius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"Plot.plot({\n y: {\n grid: true,\n label: `↑ Daily temperature range (°${celsius ? \"C\" : \"F\"})`,\n transform: celsius ? f => (f - 32) * (5 / 9) : undefined // Fahrenheit to Celsius\n },\n marks: [\n Plot.areaY(sftemp, {x: \"date\", y1: \"low\", y2: \"high\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"md`简写 scale.**percent** 选项将值乘以 100，并向默认标签添加 % 符号。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"Plot.plot({\n y: {\n percent: true\n },\n color: {\n type: \"diverging\",\n scheme: \"BuRd\"\n },\n marks: [\n Plot.rectY(gistemp, Plot.binX({y: \"proportion\", fill: \"median\"}, {x: \"Anomaly\", fill: \"Anomaly\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"md`接下来我们看看数据转换。\n\nNext \nAPI Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null