25:["$","title",null,{"children":"Plot Cheatsheets - Colors | A L | Observable"}] 49:T437,quantitative = ({ controls: [ { type: "text", value: "// Temp. over time\nPlot.plot({" }, { type: "text", value: "marks:[Plot.dot(data, {", indent: 1 }, { param: "fill", value: "air_temp" }, { type: "text", value: "})],", indent: 1 }, { type: "text", value: "color: {", indent: 1 }, { param: "scheme", type: "select", value: "scheme", options: scheme }, { param: "type", type: "select", options: quantScaleTypes }, { type: "text", value: "// Clamp the domain", indent: 2 }, { param: "domain", type: "textInput", value: `[0, 30]` }, { type: "text", value: `// Restrict output range`, indent: 2 }, { param: "range", type: "textInput", value: `[0, 1]` }, { type: "text", value: "}})" } ], plot: (config) => `Plot.plot({ marks: [Plot.dot(data, { x: "date", y: "air_temp", fill: "air_temp" })], color: { type: "${config.type}", scheme: "${config.scheme}", legend: true${config.domain ? `,\n\t\tdomain: ${config.domain}` : ''}${config.range ? `,\n\t\trange: ${config.range}` : ""} }, width: ${plotWidth} })` })4a:[{"id":"bd925b628e2cfcef33ca7ddb96b499d848a94d4f4a7d65e30e615daa23af85d07171f123349d27c3b1cbea43cbe04fd7c14b32d3c875930c90f344c56ba22f6c","href":"https://static.observableusercontent.com/files/bd925b628e2cfcef33ca7ddb96b499d848a94d4f4a7d65e30e615daa23af85d07171f123349d27c3b1cbea43cbe04fd7c14b32d3c875930c90f344c56ba22f6c","name":"denver.csv","type":"text/csv","lastModified":1704648512842.268,"size":508918}] 29:{"id":"795d63ac9afbb806","slug":null,"title":"Plot Cheatsheets - Colors","thumbnail":"fc6a59e4efa819668f1221ac1284aef9bb4eb2df869024876d4db28dee240091","access_level":"public","create_time":"$D2024-01-07T17:28:32.842Z","update_time":"$D2024-01-07T17:29:29.290Z","view_time":null,"first_public_time":"$D2024-01-07T17:28:32.842Z","has_unpublished_edits":null,"fork":{"id":"12ff6a73be2ff423","slug":"plot-cheatsheets-colors","title":"Plot Cheatsheets - Colors","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5e812fddf934bbad","login":"arjunl","name":"A L","avatar_url":"https://avatars-next.observableusercontent.com/d67e4aff64e42f2549bdb9bec66141f93580b4bd178acf725d5e8103c346953d","tier":"starter_2024","bio":"","following":false},"version":2203,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"77b1e636bfb35a11","login":"arjunl","name":"A L","avatar_url":"https://avatars-next.observableusercontent.com/d67e4aff64e42f2549bdb9bec66141f93580b4bd178acf725d5e8103c346953d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"77b1e636bfb35a11","login":"arjunl","name":"A L","avatar_url":"https://avatars-next.observableusercontent.com/d67e4aff64e42f2549bdb9bec66141f93580b4bd178acf725d5e8103c346953d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot Cheatsheets - Colors","cells":[{"id":0,"value":"# Plot Cheatsheets - Colors\n## Set the colors of your marks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1780,"value":"deck(\"colors\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"welcomeBox()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"download({label: \"Download the cheatsheets PDF\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"introParagraph()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"toc({headers: \"h2, h3\", hideStartingFrom: \"Appendix\", skip: \"Set the colors of your marks\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"## Overview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1222,"value":"When you assign a mark's `fill` or `stroke` channel, Plot will apply a set of default colors depending on the data type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1254,"value":"Plot.plot({\n marks: [\n Plot.dot(d3.range(10000), {x: d => d, y: d => Math.sin(d), fill: d => d, r: 1})\n ], \n color: {\n legend: true, \n label: \"Default continuous palette: turbo\"\n }, \n caption: \"Fill based on the x value\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"For categorical data, Plot will use the `Observable10` color scheme, which consists of these colors:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1250,"value":"Plot.legend({\n color: {\n type: \"categorical\",\n domain:d3.range(10).map(d => `Category ${d + 1}`), \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"In each case, Plot is mapping from your **data domain** (values) to an **output range** (colors). You can set the output range using one of dozens of _schemes_ (see [below](https://observablehq.com/@observablehq/plot-colors-cheatsheet#cell-857)) or by declaring the colors explicitly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1329,"value":"// Use a scheme to choose the colors\nPlot.legend({\n color: {\n type: \"categorical\",\n domain: d3.range(10).map((d) => `Category ${d + 1}`),\n scheme: \"accent\" // use the \"accent\" scheme\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"// Manually set the colors using the `range`\nPlot.legend({\n color: {\n type: \"categorical\",\n domain: d3.range(10).map(d => `Category ${d + 1}`), \n range: [\"green\", \"purple\", \"orange\", \"yellow\", \"blue\", \"pink\", \"brown\", \"grey\", \"green\", \"lavender\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"Explore below to learn how to set the scale type, assign different color schemes, and customize your color usage.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"---\n## Quantitative\n_Use color to express a numeric value_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"viewof scheme = Inputs.radio(quantSchemeMap, {label: \"Select Color Type:\", value: schemeMap.get(\"multiHue\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"createDemo(quantitative)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"### Diverging\n_Use color to show distance from a meaningful mid-point_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":543,"value":"viewof divergingScheme = Inputs.radio(divergingSchemeMap, {label: \"Select Color Type:\", value: divergingSchemeMap.get(\"diverging\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"createDemo(diverging)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"### Threshold\n_Apply different colors at explicit cut-points_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1711,"value":"createDemo(threshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n## Ordinal\n_Use color to distinguish and rank groups_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"Note: if your data is discrete (instead of continuous) you can use the same color schemes as above, but discrete color bands will be created instead of a continuous range.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":759,"value":"viewof ordinalScheme = Inputs.radio(quantSchemeMap, {label: \"Select Color Type:\", value: schemeMap.get(\"singleHue\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"createDemo(ordinal)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"---\n## Categorical\n_Use color to distinguish between unordered categories_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"colorsExample = createDemo(categorical)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"---\n## Compare Schemes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":862,"value":"viewof showSchemes = Inputs.radio(schemeMap, {value: schemeMap.get(\"singleHue\"), label: \"Choose Color Schemes:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"viewof nCategories = Inputs.range([3, 9], {label:\"Number of categories\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"$${showSchemes.map(showScheme)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1560,"value":"---\n## Dataset used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1566,"value":"This notebook uses hourly air temperature data from Denver, Colorado collected by [NOAA](https://www.ncei.noaa.gov/products/land-based-station/integrated-surface-database). See [this notebook](https://observablehq.com/@observablehq/noaa-weather-data-by-major-u-s-city?collection=@observablehq/analyzing-time-series-data) for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1564,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2163,"value":"_Last updated for Plot version 0.4.0_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1835,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"import {\n createDemo,\n intro,\n plotWidth,\n welcomeBox,\n download,\n inputStyles,\n deck\n} with { data, evalCodeStr } from \"@observablehq/cheatsheet-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"### File attachments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2129,"value":"denverRaw = await FileAttachment(\"denver.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":1657,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"data = aq.from(denverRaw)\n .derive({tempBin: aq.escape(d => `${floor10(d.air_temp)} - ${floor10(d.air_temp) + 4}`)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"// Domain for the temperature bins\ndomain = data\n .select(\"tempBin\")\n .dedupe()\n .objects()\n .sort((a, b) => +a.tempBin.split(\" -\")[0] - +b.tempBin.split(\" -\")[0])\n .map((d) => d.tempBin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"function floor10(x)\n{\n return Math.floor(x/10)*10;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"evalCodeStr = (str) => {\n const func = new Function(\"data\", \"Plot\", \"width\", \"d3\", \"domain\", `return ${str}`)\n return func(data, Plot, width, d3, domain);\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"introParagraph = () => htl.html`

Observable Plot can encode data values using a color channel. This allows you to express quantitative or qualitative data through each mark's fill or stroke. To configure the relationship between your input data and the output colors, set the color channel's scheme or range in your Plot.plot() function.

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"showScheme = (scheme, {w = width/2} = {}) => {\n const categoricalLegend = Plot.legend({\n color: {\n scheme: scheme,\n label: scheme,\n ticks: 0,\n tickFormat: (d) => \"\",\n type: \"categorical\",\n domain: d3.range(nCategories)\n },\n swatchWidth: w / nCategories,\n swatchHeight: 25,\n width: w\n });\n const continuousLegend =\n schemes.categorical.indexOf(scheme) !== -1\n ? htl.html`

${scheme}

`\n : Plot.legend({\n color: {\n scheme: scheme,\n label: scheme,\n ticks: 0,\n tickFormat: (d) => null,\n type: \"linear\"\n },\n columns: null,\n height: 65,\n width: w\n });\n\n return htl.html`

${continuousLegend}${categoricalLegend}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1644,"value":"### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1977,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1981,"value":"diverging = ({\n controls: [\n { type: \"text\", value: \"// Diverging temp.\\nPlot.plot({\" },\n { type: \"text\", value: \"marks:[Plot.dot(data, {\", indent: 1},\n { type: \"text\", value: `fill: \"air_temp\"`, indent: 2},\n \n { type: \"text\", value: \"})],\", indent: 1},\n { type: \"text\", value: \"color: {\", indent: 1 },\n { param: \"scheme\", type: \"select\", value: \"scheme\", options: divergingScheme},\n { param: \"type\", type: \"select\", options: divergingScaleTypes },\n { param: \"pivot\", type: \"range\", min: -25, max: 25, step: 1 },\n { param: \"symmetric\", type: \"toggle\", value: true},\n { type: \"text\", value: \"}})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.dot(data, { x: \"date\", y: \"air_temp\", fill: \"air_temp\" }),\n Plot.ruleY([${config.pivot}], { stroke: \"#d3d3d3\" })\n ], \n color: {\n type: \"${config.type}\",\n scheme: \"${config.scheme}\", \n legend: true, \n pivot: ${config.pivot}, \n symmetric: ${config.symmetric}\n },\n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1983,"value":"threshold = ({\n controls: [\n { type: \"text\", value: \"// Color thresholds\\nPlot.plot({\" },\n { type: \"text\", value: \"marks:[Plot.dot(data, {\", indent: 1 },\n { type: \"text\", value: `fill: \"air_temp\"`, indent: 2 },\n\n { type: \"text\", value: \"})],\", indent: 1 },\n { type: \"text\", value: \"color: {\", indent: 1 },\n { param: \"type\", value: \"threshold\" },\n { param: \"scheme\", type: \"select\", value: \"scheme\", options: scheme },\n {\n param: \"domain\",\n type: \"select\",\n options: [\"[-10, 0, 10]\", \"d3.range(-15, 25, 10)\", \"d3.range(-20, 25, 5)\"], \n value: d3.range(-15, 25, 10)\n },\n { type: \"text\", value: \"}})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.dot(data, { x: \"date\", y: \"air_temp\", fill: \"air_temp\" }),\n Plot.ruleY(${config.domain}, { stroke: \"#D3D3D3\" })\n ],\n color: {\n type: \"threshold\",\n domain: ${config.domain},\n scheme: \"${config.scheme}\",\n reverse: true,\n legend: true\n },\n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1988,"value":"ordinal = ({\n controls: [\n { type: \"text\", value: \"// Ordered categories\\nPlot.plot({\" },\n { type: \"text\", value: \"marks:[Plot.dot(data, {\", indent: 1},\n { type: \"text\", value: `fill: \"tempBin\"`, indent: 2},\n \n { type: \"text\", value: \"})],\", indent: 1},\n { type: \"text\", value: \"color: {\", indent: 1 },\n { param: \"scheme\", type: \"select\", value: \"scheme\", options: ordinalScheme}, \n { type: \"text\", value: \"}})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [Plot.dot(data, { x: \"date\", y: \"air_temp\", fill: \"tempBin\" })],\n color: {\n domain: domain,\n scheme: \"${config.scheme}\",\n legend: true,\n tickFormat: (d) => d + \"°c\"\n },\n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"categorical = ({\n controls: [\n { type: \"text\", value: \"// Categorical colors\\nPlot.plot({\" },\n { type: \"text\", value: \"marks:[Plot.dot(data, {\", indent: 1},\n { type: \"text\", value: `fill: \"month\"`, indent: 2}, \n { type: \"text\", value: \"})],\", indent: 1},\n { type: \"text\", value: \"color: {\", indent: 1 },\n { param: \"scheme\", type: \"select\", value: \"tableau10\", options: schemeMap.get(\"categorical\")},\n { type: \"text\", value: `type: \"categorical\"`, indent: 2}, \n { type: \"text\", value: \"}})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.dot(data, {\n x: \"date\",\n y: \"air_temp\",\n fill: (d) => d3.utcMonth(d.date)\n })\n ], \n color: {\n type: \"categorical\",\n scheme: \"${config.scheme}\", \n legend: true, \n tickFormat: ${(d) => d3.utcFormat(\"%b\")(d)}, \n columns: \"50px\"\n },\n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"divergingScaleTypes = [\n \"diverging\",\n \"diverging-log\",\n \"diverging-pow\",\n \"diverging-sqrt\",\n \"diverging-symlog\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"schemeMap = new Map(Object.entries(schemes).map(([key, value]) => [key, value]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"quantSchemeMap = new Map(\n Object.entries(schemes)\n .filter(([key]) => key !== \"categorical\" && !key.match(\"iverging\"))\n .map(([key, value]) => [key, value])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"divergingSchemeMap = new Map(\n Object.entries(schemes)\n .filter(([key]) => key.match(\"iverging\"))\n .map(([key, value]) => [key, value])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"quantScaleTypes = [\n \"linear\",\n \"sqrt\",\n \"pow\",\n \"log\",\n \"symlog\",\n \"sequential\",\n \"cyclical\",\n \"quantile\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"schemes = ({\n categorical: [\n \"accent\",\n \"category10\",\n \"dark2\",\n \"paired\",\n \"pastel1\",\n \"pastel2\",\n \"set1\",\n \"set2\",\n \"set3\",\n \"tableau10\"\n ],\n diverging: [\n \"brbg\",\n \"prgn\",\n \"piyg\",\n \"puor\",\n \"rdbu\",\n \"rdgy\",\n \"rdylbu\",\n \"rdylgn\",\n \"spectral\"\n ],\n reversedDiverging: [\"burd\", \"buylrd\"],\n singleHue: [\"blues\", \"greens\", \"greys\", \"oranges\", \"purples\", \"reds\"],\n multiHue: [\n \"turbo\",\n \"viridis\",\n \"magma\",\n \"inferno\",\n \"plasma\",\n \"cividis\",\n \"cubehelix\",\n \"warm\",\n \"cool\",\n \"bugn\",\n \"bupu\",\n \"gnbu\",\n \"orrd\",\n \"pubu\",\n \"pubugn\",\n \"purd\",\n \"rdpu\",\n \"ylgn\",\n \"ylgnbu\",\n \"ylorbr\",\n \"ylorrd\"\n ],\n cyclical: [\"rainbow\", \"sinebow\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"### Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1103,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":974,"value":"labelStyles = ({\n fontFamily:\"system-ui, sans-serif\",\n fontSize: \"10px\", \n \"font-variant\": \"tabular-nums\",\n width:\"65px\", \n \"font-weight\":700\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1819,"value":"inputStyles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null