2f: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} })` })30:[{"id":"bd925b628e2cfcef33ca7ddb96b499d848a94d4f4a7d65e30e615daa23af85d07171f123349d27c3b1cbea43cbe04fd7c14b32d3c875930c90f344c56ba22f6c","href":"https://static.observableusercontent.com/files/bd925b628e2cfcef33ca7ddb96b499d848a94d4f4a7d65e30e615daa23af85d07171f123349d27c3b1cbea43cbe04fd7c14b32d3c875930c90f344c56ba22f6c","name":"denver.csv","type":"text/csv","lastModified":1697747981133.702,"size":508918}] 2d:{"title":"Plot Cheatsheets - Colors","cells":[{"id":0,"value":"# Plot Cheatsheets - Colors\n## Set the colors of your marks","pinned":false,"hidden":false,"mode":"md"},{"id":1780,"value":"deck(\"colors\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"welcomeBox()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"download({label: \"Download the cheatsheets PDF\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"introParagraph()","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"toc({headers: \"h2, h3\", hideStartingFrom: \"Appendix\", skip: \"Set the colors of your marks\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"## Overview","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":1282,"value":"For categorical data, Plot will use the `Tableau10` color scheme, which consists of these colors:","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":14,"value":"---\n## Quantitative\n_Use color to express a numeric value_","pinned":false,"hidden":false,"mode":"md"},{"id":395,"value":"viewof scheme = Inputs.radio(quantSchemeMap, {label: \"Select Color Type:\", value: schemeMap.get(\"multiHue\")})","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"createDemo(quantitative)","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"### Diverging\n_Use color to show distance from a meaningful mid-point_","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"viewof divergingScheme = Inputs.radio(divergingSchemeMap, {label: \"Select Color Type:\", value: divergingSchemeMap.get(\"diverging\")})","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"createDemo(diverging)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1714,"value":"### Threshold\n_Apply different colors at explicit cut-points_","pinned":false,"hidden":false,"mode":"md"},{"id":1711,"value":"createDemo(threshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"---\n## Ordinal\n_Use color to distinguish and rank groups_","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":759,"value":"viewof ordinalScheme = Inputs.radio(quantSchemeMap, {label: \"Select Color Type:\", value: schemeMap.get(\"singleHue\")})","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"createDemo(ordinal)","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"---\n## Categorical\n_Use color to distinguish between unordered categories_","pinned":false,"hidden":false,"mode":"md"},{"id":586,"value":"colorsExample = createDemo(categorical)","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"---\n## Compare Schemes","pinned":false,"hidden":false,"mode":"md"},{"id":862,"value":"viewof showSchemes = Inputs.radio(schemeMap, {value: schemeMap.get(\"singleHue\"), label: \"Choose Color Schemes:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"viewof nCategories = Inputs.range([3, 9], {label:\"Number of categories\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"$${showSchemes.map(showScheme)}","pinned":false,"hidden":false,"mode":"html"},{"id":1560,"value":"---\n## Dataset used","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":1564,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2163,"value":"_Last updated for Plot version 0.4.0_","pinned":false,"hidden":false,"mode":"md"},{"id":1835,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":58,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2177,"value":"### File attachments","pinned":false,"hidden":false,"mode":"md"},{"id":2129,"value":"denverRaw = await FileAttachment(\"denver.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1657,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":1635,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":665,"value":"function floor10(x)\n{\n return Math.floor(x/10)*10;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":1644,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":1977,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":412,"value":"schemeMap = new Map(Object.entries(schemes).map(([key, value]) => [key, value]))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":1653,"value":"### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":1103,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":1819,"value":"inputStyles","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}