27:null 28:["$","title",null,{"children":"Scales / Observable Plot | Antoine Faché | Observable"}] 2d: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"})2e: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"})2f:[{"id":"bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","href":"https://static.observableusercontent.com/files/bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","name":"gistemp.csv","type":"text/csv","lastModified":1682488761346.363,"size":27014},{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1682488761346.363,"size":15106}] 2b:{"id":"7f8b1f9f56497c04","slug":null,"title":"Scales / Observable Plot","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-04-26T05:59:21.346Z","update_time":"$D2023-04-26T05:59:21.346Z","view_time":null,"first_public_time":"$D2023-04-26T05:59:21.346Z","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":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":"starter_2024"},"version":1625,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null}],"members":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scales / Observable Plot","cells":[{"id":0,"value":"

Scales / Observable Plot

Observable Plot › Scales · API

\n\n# Plot: Scales\n\nScales map an abstract value such as time or temperature to a visual value such as *x*- or *y*-position or color. Scales define a plot’s coordinate system.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"In Plot, scales are named: **x** or **y** for position; **fx** or **fy** for facet position; **r** for radius; or **color**. A plot can have multiple scales but at most one scale of a given name. Mark channels are bound to scales; for example, a dot’s **x** channel is bound to the **x** scale. The channel name and the scale name are often the same, but not always; for example, a bar’s **y1** and **y2** channels are both bound to the **y** scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"A scale is configured primarily by its input **domain** and output **range**: the domain is a set of abstract values typically derived from data, such as a time interval [*start*, *end*] or temperature interval [*cold*, *hot*]; the range is a set of visual values, such as an extent of the chart in pixels [*left*, *right*] or a color interval [*blue*, *red*].","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"To observe scale behavior, let’s first look at some empty plots with only an *x*-scale and some hard-coded domains. The *x*-axis reveals the resulting position (a value from the range) for the corresponding abstract value (a value from the domain).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## Continuous position\n\nThe domain of a quantitative scale is a continuous interval [*min*, *max*] where *min* and *max* are numbers, such as temperatures. Below, the first domain value (*x* = 0) corresponds to the left edge of the plot while the second (*x* = 100) corresponds to the right edge.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"Plot.plot({x: {domain: [0, 100]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"Flipping the domain reverses the scale so that +*x* points ←left instead of right→.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"Plot.plot({x: {domain: [100, 0]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"Alternatively, use the **reverse** option; this is convenient when the domain is implied from data rather than specified explicitly. (We’ll cover implied domains in more detail in the *inference* section below.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":44,"value":"If the domain is dates, Plot will default to a UTC scale. This is a linear scale with ticks based on the Gregorian calendar. (Plot uses [d3.scaleTime](https://github.com/d3/d3-scale#time_ticks)’s “multi-scale” tick format, so January shows the year.) Plot doesn’t parse dates; convert your strings to [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) instances with [d3.utcParse](https://github.com/d3/d3-time-format#utcParse) or [d3.autoType](https://github.com/d3/d3-dsv#autoType), or by passing typed: true to Observable’s FileAttachment function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":482,"value":"To force a UTC scale, say when the data is milliseconds since UNIX epoch rather than Date instances, pass “utc” as the **type** option.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":485,"value":"If the *type* is “time”, the ticks will be in local time rather than UTC. Be careful here: if your reader is in a different time zone, you may see different plots! UTC is strongly recommended if you are plotting daily (or less frequent) data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":279,"value":"When plotting values that vary widely, such as the luminosity of stars in an [HR diagram](/@mbostock/hertzsprung-russell-diagram), a [logarithmic transformation](http://github.com/d3/d3-scale#log-scales) may improve readability; this can be enabled with type “log”. This defaults to base-10 ticks with exponential notation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":522,"value":"If you prefer conventional notation, you can specify the **tickFormat** option to change the behavior of the axis. Note, however, that this may result in overlapping text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":537,"value":"SI-prefix notation is also supported; the **tickFormat** option can either be a [d3.format](https://github.com/d3/d3-format) string or a function that takes a tick value and returns the corresponding string.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":546,"value":"Log scales also support a **base** option, say for powers of two. Exponential notation is only the default for base 10.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":549,"value":"The domain of a log scale cannot include (or cross) zero; for this, consider a [bi-symmetric log](https://github.com/d3/d3-scale#symlog-scales) scale instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":557,"value":"Power scales and square-root scales are also supported. The “pow” scale supports the **exponent** option, which defaults to 1 (for a linear scale).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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","output":"$undefined","database":"$undefined"},{"id":1244,"value":"Continuous scales also support a **clamp** option, which if true, clamps input values to the scale’s domain before scaling. This is useful for preventing marks from escaping the chart area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"## Discrete position\n\nSadly, not all data is continuous and quantitative: some data is merely ordinal such as t-shirt sizes, and some categorical (*a.k.a.* nominal) such as brands of clothing. To encode such data as position, a point or band scale is required.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"A point scale divides space into uniformly-spaced discrete values. It is commonly used for scatterplots (dot marks) of ordinal data. It is the default scale type for ordinal data on the *x* and *y* scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"Plot.plot({x: {type: \"point\", domain: [...\"ABCDEFGHIJ\"]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"A band scale divides space into uniformly-spaced and -sized discrete intervals. It is commonly used for bar charts (bar marks).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"Plot.plot({x: {type: \"band\", domain: [...\"ABCDEFGHIJ\"]}, grid: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"While *point* and *band* scales appear visually similar when only the grid is visible, the two are not identical — they differ respective to padding. Play with the options below to get a sense of their effect on the scale’s behavior.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":789,"value":"Positions scales also have a **round** option which forces the scale to snap to integer pixels. This defaults to true for point and band scales, and false for quantitative scales. Use caution with high-cardinality ordinal domains (*i.e.*, a point or band scale used to encode many different values), as rounding can lead to “wasted” space or even zero-width bands.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"## Continuous color\n\nWhile position is the most salient, and thus more important, encoding, many visualizations also employ a color encoding. As with position, the default type of quantitative color scale is *linear*: the difference in value should be proportional to the perceived difference in color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":743,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1100,"value":"The default color scheme is [Turbo](https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html). A wide variety of sequential, diverging, and cyclical schemes are supported, including ColorBrewer and [Viridis](http://bids.github.io/colormap/). You can implement a custom color scheme by specifying the scale’s *range*, or by passing an *interpolate* function that takes a parameter *t* in [0, 1]. The *interpolate* option can also be used to specify a color space, or a two-argument function that takes a pair of values from the range.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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","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","output":"$undefined","database":"$undefined"},{"id":901,"value":"And like position scales, you can apply a *sqrt*, *pow*, *log*, or *symlog* transform; these are often useful when working with non-uniformly distributed data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":754,"value":"Diverging color scales are intended to show positive and negative values (or more generally values above or below some *pivot* value); diverging color scales default to the “RdBu” (red–blue) color scheme.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":756,"value":"The pivot defaults to zero, but you can change it with the **pivot** option, which should ideally be a value near the middle of the domain.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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","output":"$undefined","database":"$undefined"},{"id":938,"value":"Here is a practical example showing observed global surface temperatures, represented as “anomalies” relative to the 1951–1980 average. Note that the “BuRd” color scheme is used since blue and red are semantically associated with cold and hot, respectively.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":934,"value":"gistemp = FileAttachment(\"gistemp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Discrete color\n\nPlot also provides color schemes for discrete data. Use the *categorical* type for categorical (nominal) unordered data, and the *ordinal* type for ordered data. Unlike continuous color schemes for quantitative data, these discrete color schemes are optimized for low-cardinality domains. Note that if the size of the categorical domain exceeds the number of colors in the scheme, colors will be reused; combining values into an “other” category is recommended.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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","output":"$undefined","database":"$undefined"},{"id":1058,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"Plot.plot({\n color: {\n type: \"ordinal\",\n domain: \"ABCDEFGHIJ\",\n scheme: schemeo,\n unknown: \"gray\"\n },\n marks: [\n Plot.cell([...\"ABCDEFGHIJ\", null], {x: d => d ?? \"N/A\", fill: d => d})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"Note that we are using the **unknown** option to set the color of invalid values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"## Continuous radius\n\nFor [dot marks](/@observablehq/plot-dot?collection=@observablehq/plot), the *r* channel makes the dots’ area proportional to the associated quantitative value. The default range for the associated *r* scale is constructed such that a zero value maps to zero for an accurate areal encoding, while the first quartile of values is mapped to a radius of three pixels; this tends to be more stable with varying data. Adjust the dot size as needed by specifying an explicit range.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Inference\n\nPlot strives to be concise: rather than you laboriously specifying everything, Plot can guess by inspecting the data so you don’t have to set the **type**, **domain**, and **range** (and for color, **scheme**) of scales explicitly. But for Plot’s guesses to be accurate, your data must match Plot’s expectations. Here they are.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"inference","database":"$undefined"},{"id":1178,"value":"A scale’s **type** is most often inferred from associated marks’ channel values: strings and booleans imply an ordinal scale; dates imply a UTC scale; anything else is linear. Plot assumes that your data is consistently typed, so inference is based solely on the first non-null, non-undefined value. We recommend typed CSV (passing typed: true to FileAttachment’s csv method) or explicitly coercing types when loading data (*e.g.*, d3.autoType).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"If a scale’s **domain** is specified explicitly, the scale’s **type** is inferred from the domain values rather than channels as described above. However, if the domain or range has more than two elements, the ordinal type (or point for position scales) is used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"Finally, some marks declare the scale **type** for associated channels. For example, Plot.barX defines *y* as a band scale. It is an error if the user-defined scale type does not match the mark. Further, the facet scales *fx* and *fy* are always band scales, and the radius scale *r* is implicitly a sqrt scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"If you don’t specify a quantitative scale’s **domain**, it is the extent (minimum and maximum) of associated channel values, except for the *r* (radius) scale where it goes from zero to the maximum. A quantitative domain can be extended to “nice” human-readable values with the **nice** option. For an ordinal scale, the domain defaults to the sorted union (all distinct values in natural order) of associated values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1211,"value":"All position scales (*x*, *y*, *fx*, and *fy*) have implicit automatic ranges based on the chart dimensions. The *x*-scale ranges from the left to right edge, while the *y*-scale ranges from the bottom to top edge, accounting for margins.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1256,"value":"## Transforms\n\nThe *scale*.**transform** option allows you to apply a function to all values before they are passed through the scale. This is convenient for transforming a scale’s data, say to convert to thousands or between temperature units.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1388,"value":"sftemp = FileAttachment(\"sf-temperatures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"viewof celsius = Inputs.toggle({label: \"Celsius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1362,"value":"The shorthand *scale*.**percent** option multiplies values by 100, and adds a % symbol to the default label.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":1292,"value":"Next we’ll look at data transformations.\n\nNext \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"