2f:T672,// Create a list of examples continuousExamples = ["linear", "log", "symlog", "pow", "sqrt", "identity"] .sort() .map((type) => { const header = { type: "text", value: `// ${continuousComments.get(type)}\nPlot.plot({x: {` }; const typeControl = { param: "type", value: type }; const closer = { type: "text", value: "}})" }; const extraControl = type === "log" ? { param: "extra", label: "base", type: "radio", options: [2, 10], value: 10 } : type === "pow" ? { param: "extra", label: "exponent", type: "range", min: 0, max: 10, step: 0.5, value: 2 } : type === "symlog" ? { param: "extra", label: "constant", type: "range", min: 0, max: 1000, step: 5, value: 5 } : null; const extraDetail = (value) => type === "log" ? `,\n\t\tbase: ${value}` : type === "pow" ? `,\n\t\texponent: ${value}` : type === "symlog" ? `,\n\t\tconstant :${value}` : ""; const domain = type === "log" ? "[100, 1000]" : "[-1000, 1000]"; const controls = [header, typeControl, extraControl, closer].filter( (d) => d !== null ); return { controls, plot: (config) => `Plot.plot({ x: { domain: ${domain}, type: "${type}", grid: true${extraDetail(config.extra)} }, height: 50, width: ${plotWidth} })` }; })30:T427,oneNumberConfig = ({ controls: [ { type: "text", value: `// Tick formatting:` }, { param: "symbol", type: "select", options: ["", "$", "#"], value: "" }, { param: "comma", type: "toggle", value: true }, { param: "precision", type: "range", min: 0, max: 10, value: 1, step: 1 }, { param: "type", type: "select", options: typeOptions, value: "f" }, {type: "text", value: "// data options"}, { param: "domain", type: "textInput", value: "[1, 10000]" }, { param: "log", type: "toggle", value: false }, ], plot: (config) => `Plot.plot({ x: { tickFormat: d3.format("${config.symbol}${config.comma ? "," : ""}.${config.precision}${config.type}"), domain: ${config.domain}, type: "${config.log ? "log" : "linear"}", ticks: 5, line: true, nice: true }, width: ${plotWidth}, marginRight: 50, marginLeft: 50 })` })31:T594,// Set of examples to create optionsExamples = [ { param: "tickRotate", value: -45, type: "range", min: -90, max: 90, group: "tick", step: 1 }, { param: "ticks", value: 5, type: "range", min: 0, max: 15, step: 1, group: "tick" }, { param: "axis", value: "top", type: "select", options: ["top", "bottom"] }, { param: "tickSize", type: "range", step: 1, min: 0, max: 15, group: "tick", value: 5 }, { param: "line", value: true, type: "toggle", group: "tick" }, { param: "tickPadding", value: 10, type: "range", step: 1, min: 0, max: 15, group: "tick" }, { param: "labelAnchor", type: "select", options: ["left", "center", "right"], value: "left", group: "tick" }, { param: "labelOffset", value: 0, min: -20, max: 20, type: "range", step: 1, group: "tick" }, { param: "grid", value: true, type: "toggle" }, { param: "percent", value: true, type: "toggle" }, { param: "reverse", value: true, type: "toggle" }, { param: "zero", value: false, type: "toggle" }, { param: "nice", value: true, type: "toggle", group: "tick" }, { param: "inset", value: 75, type: "range", min: 0, max: 99, step: 1 }, { param: "label", type: "textInput", value: "My label", group: "tick" }, { param: "domain", type: "textInput", value: `[1, 30]` } ]32:T4f9,typeOptions = new Map( [ { value: "e", label: "exponent notation." }, { value: "f", label: "fixed point notation." }, { value: "g", label: "either decimal or exponent notation, rounded to significant digits." }, { value: "r", label: "decimal notation, rounded to significant digits." }, { value: "s", label: "decimal notation with an SI prefix, rounded to significant digits." }, { value: "%", label: "multiply by 100, and then decimal notation with a percent sign." }, { value: "p", label: "multiply by 100, round to significant digits, and then decimal notation with a percent sign." }, { value: "b", label: "binary notation, rounded to integer." }, { value: "o", label: "octal notation, rounded to integer." }, { value: "d", label: "decimal notation, rounded to integer." }, { value: "x", label: "hexadecimal notation, using lower-case letters, rounded to integer." }, { value: "X", label: "hexadecimal notation, using upper-case letters, rounded to integer." }, { value: "c", label: "character data, for a string of text." } ].map((d) => [`${d.value} (${d.label})`, d.value]) )33:[] 2d:{"title":"Plot Cheatsheets - Scales","cells":[{"id":0,"value":"# Plot Cheatsheets - Scales\n## Project from data values to pixel values","pinned":false,"hidden":false,"mode":"md"},{"id":3256,"value":"download({label: \"Download the cheatsheets PDF\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2915,"value":"introParagraph()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"toc({\n headers: \"h2, h3\",\n hideStartingFrom: \"Imports\",\n skip: \"Project from data values to pixel values\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3043,"value":"---\n## Overview","pinned":false,"hidden":false,"mode":"md"},{"id":3071,"value":"To customize the default scale for each channel, set it in your `Plot.plot` function:","pinned":false,"hidden":false,"mode":"md"},{"id":3049,"value":"Plot.plot({\n // Configure the x scale\n x: {\n type: \"log\", // set the type\n axis: \"top\" // place the axis on top of the chart\n },\n // Display dots for 100 random numbers\n marks: [\n Plot.dotX(\n d3.range(100).map((d) => Math.random() * 100 + 1),\n { strokeWidth: 0.5, fill: \"blue\" }\n )\n ],\n height: 50,\n marginBottom: 10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3079,"value":"Explore below to learn about scale types, display options, and formatting. ","pinned":false,"hidden":false,"mode":"md"},{"id":1939,"value":"---\n## Types\n_Configure how data values are projected into a visual space_","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"### Continuous Scales","pinned":false,"hidden":false,"mode":"md"},{"id":1596,"value":"$${continuousExamples.map(createDemo)}","pinned":false,"hidden":false,"mode":"html"},{"id":255,"value":"### Categorical Scales","pinned":false,"hidden":false,"mode":"md"},{"id":1654,"value":"$${categoricalExamples.map(createDemo)}","pinned":false,"hidden":false,"mode":"html"},{"id":289,"value":"### Date Scales\nSet the scale type to UTC or (local) time. Helpful if dates are represented in milliseconds. UTC time recommended.","pinned":false,"hidden":false,"mode":"md"},{"id":1692,"value":"createDemo(dateExamples)","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"---\n## Axis Options\n_Configure the representation of your scale_","pinned":false,"hidden":false,"mode":"md"},{"id":1971,"value":"### Axis","pinned":false,"hidden":false,"mode":"md"},{"id":2156,"value":"createDemo(axisDemo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"### Ticks and Labels","pinned":false,"hidden":false,"mode":"md"},{"id":2216,"value":"scalesExample = createDemo(tickDemo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2380,"value":"---\n## Tick Formatting\n_Set the format for tick values_","pinned":false,"hidden":false,"mode":"md"},{"id":2458,"value":"### Numbers","pinned":false,"hidden":false,"mode":"md"},{"id":821,"value":"Set the `tickFormat` using [${tc(\"symbol\")}][${tc(\"comma\")}][${tc(\"precision\")}][${tc(\"type\")}], for example:","pinned":false,"hidden":false,"mode":"md"},{"id":846,"value":"\n \n \n \n \n \n \n${formats.map(format => {\n const formatter = d3.format(`${format.syntax}`)\n const formatSpecified = d3.formatSpecifier(formatter)\n const formatStr = format.properties.map(prop => {\n const text = prop === \"comma\" ? \",\" : \n prop === \"precision\" ? \".\" + formatSpecified[prop] : \n formatSpecified[prop];\n return tv(text, prop)\n })\n return htl.html` \n \n \n \n \n `\n})}\n

Syntax	Small #: ${smallNumber}	Large #: ${largeNumber}	Description
${formatStr}	${formatter(smallNumber)}	${formatter(largeNumber)}	${format.description}

","pinned":false,"hidden":false,"mode":"html"},{"id":2508,"value":"createDemo(oneNumberConfig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2384,"value":"### Dates","pinned":false,"hidden":false,"mode":"md"},{"id":2234,"value":"$${dateConfig.map(createDemo)}","pinned":false,"hidden":false,"mode":"html"},{"id":2451,"value":"You can combine all of these options into a custom format:","pinned":false,"hidden":false,"mode":"md"},{"id":2395,"value":"createDemo(customDateConfig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2712,"value":"### Custom","pinned":false,"hidden":false,"mode":"md"},{"id":1170,"value":"To customize your `tickFormat`, pass a function: ","pinned":false,"hidden":false,"mode":"md"},{"id":2718,"value":"createDemo(customConfig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":3518,"value":"_Last updated for Plot version 0.4.0_","pinned":false,"hidden":false,"mode":"md"},{"id":3408,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1589,"value":"import {\n createDemo,\n intro,\n plotWidth,\n // welcomeBox,\n download,\n inputStyles, \n // deck\n} from \"@observablehq/cheatsheet-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1963,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3109,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":1591,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1651,"value":"categoricalExamples = [\"point\", \"band\"].map((type) => ({\n controls: [\n {\n type: \"text\",\n value: `// ${\n type === \"point\" ? \"Point scale\" : \"Band scale\"\n }\\nPlot.plot({x: {`\n },\n {\n param: \"type\",\n value: type\n },\n {\n param: \"padding\",\n type: \"range\",\n min: 0,\n max: 1,\n value: 0.1,\n step: 0.1\n },\n {\n param: \"align\",\n type: \"range\",\n min: 0,\n max: 1,\n value: 0.5,\n step: 0.1\n },\n {\n type: \"text\",\n value: `})`\n }\n ],\n plot: (config) => {\n return `Plot.plot({\n x: {\n padding: ${+config.padding},\n align: ${+config.align},\n type: \"${type}\", \n domain: [...\"ABCDEFGHIJ\"]\n },${\n type === \"point\"\n ? ``\n : `\\n\\tmarks: [\n Plot.cell([...\"ABCDEFGHIJ\"], {\n x: (d) => d,\n fill: \"none\",\n stroke: \"currentColor\"\n })\n ],`\n } \n grid: true, \n width: ${plotWidth}\n})`;\n }\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2391,"value":"customDateConfig = ({\n controls: [\n {\n type: \"text\", \n value: `// Custom date format`\n },\n {\n type: \"text\", \n value: `Plot.plot({x:{`\n },\n \n {\n param: \"time\",\n label: `tickFormat`,\n type: \"textInput\",\n value: \"%A %B %d, %Y\"\n }, \n {\n type: \"text\", \n value: `}})`\n },\n ],\n plot: (config) => `Plot.plot({\n x: {\n tickFormat: d3.utcFormat(\"${config.time}\"),\n domain: [d3.utcYear.offset(d3.utcYear(), -2), d3.utcYear()],\n ticks: 3,\n nice: true\n }, \n marginLeft: 100, \n marginRight: 100, \n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2500,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1708,"value":"dateExamples =({\n controls: [\n {\n type: \"text\",\n value: `// Date scales\\nPlot.plot({x: {`\n },\n { param: \"type\", type: \"radio\", options: [\"utc\", \"time\"], value: \"utc\"}, \n {\n type: \"text\",\n value: `}})`\n },\n ],\n plot: (config) =>\n `Plot.plot({\n x: { type: \"${config.type}\", domain: [1614556800000, 1614637527840.0002] },\n grid: true,\n width: ${plotWidth}\n})\n`,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2214,"value":"tickDemo = ({\n controls: [\n { type: \"text\", value: \"// Format ticks\\nPlot.plot({x: \" },\n ...optionsExamples.filter((d) => d.group === \"tick\"),\n { type: \"text\", value: \"}})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.dot(\n [{ value: 0.1 }, { value: 0.25 }, { value: 0.3 }, { value: 0.42 }],\n { x: \"value\" }\n )\n ],\n x: {\n tickRotate: ${config.tickRotate},\n ticks: ${config.ticks},\n tickSize: ${config.tickSize},\n line: ${config.line},\n tickPadding: ${config.tickPadding},\n labelAnchor: \"${config.labelAnchor}\",\n labelOffset: ${config.labelOffset},\n nice: ${config.nice},\n label: \"${config.label}\"\n },\n height: 200,\n width: ${plotWidth},\n marginBottom: 100\n})`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2319,"value":"dateConfig = Object.entries({\n Year: [\"%Y\", \"%y\"],\n Month: [\"%b\", \"%B\", \"%m\"],\n Day: [\"%a\", \"%A\", \"%d\", \"%e\"],\n Hour: [\"%H:%M\", \"%I%p\"]\n}).map(([time, options]) => ({\n controls: [\n {\n type: \"text\",\n value: `// ${time} formatting:`\n },\n {\n type: \"text\",\n value: `Plot.plot({x:{`\n },\n\n {\n param: \"time\",\n label: `tickFormat`,\n type: \"select\",\n options: options,\n value: options[0]\n },\n {\n type: \"text\",\n value: `}})`\n }\n ],\n plot: (config) => `Plot.plot({\n x: {\n tickFormat: d3.utcFormat(\"${config.time}\"), \n domain: [d3.utc${time}.offset(d3.utc${time}(), -${\n time === \"Day\" ? 7 : 12\n }), d3.utc${time}()]\n }, \n width: ${plotWidth}\n})`\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2204,"value":"axisDemo = ({\n controls: [\n { type: \"text\", value: \"// Customize axis\\nPlot.plot({x:\" },\n ...optionsExamples.filter((d) => d.group !== \"tick\"),\n { type: \"text\", value: \"}})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.dot(\n [{ value: 0.1 }, { value: 0.25 }, { value: 0.3 }, { value: 0.42 }],\n { x: \"value\" }\n )\n ],\n x: {\n axis: \"${config.axis}\",\n grid: ${config.grid},\n percent: ${config.percent},\n reverse: ${config.reverse},\n zero: ${config.zero},\n inset: ${config.inset},\n domain: ${config.domain}\n },\n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1734,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2720,"value":"customConfig = ({\n controls: [\n {\n type: \"text\",\n value: `// Custom formatting:`\n },\n {\n type: \"text\",\n value: `Plot.plot({x:{`\n },\n\n {\n param: \"tickFormat\",\n label: `tickFormat`,\n type: \"select\",\n options: new Map([\n [\"d => d\", (d) => d],\n [\"d => d.slice(0,3)\", (d) => d.slice(0, 3)],\n [\n \"d => 'My group is: ' + d.match(/[0-9]/)[0]\",\n (d) => \"My group is: \" + d.match(/[0-9]/)[0]\n ],\n [\"d => d.split(' ')[1]\", (d) => d.split(\" \")[1]],\n [\"d => d.toUpperCase()\", (d) => d.toUpperCase()],\n [\"null\", null]\n ]),\n value: (d) => d.slice(0, 3)\n },\n {\n type: \"text\",\n value: `}})`\n }\n ],\n plot: (config) => `Plot.plot({\n x: {\n tickFormat: ${config.tickFormat},\n domain: [\"group 1\", \"group 2\", \"group 3\"],\n ticks: 3,\n nice: true\n }, \n marginLeft: 100, \n marginRight: 100, \n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2533,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3295,"value":"continuousComments = new Map([\n [\"identity\", \"No transformation\"],\n [\"linear\", \"Linear scale\"],\n [\"log\", \"Log scale\"],\n [\"pow\", \"Exponential scale\"],\n [\"sqrt\", \"Square root scale\"],\n [\"symlog\", \"Symetric log scale\"]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"formats = [\n {\n syntax: \"s\",\n properties: [\"type\"],\n description: \"International System of Units (SI).\"\n },\n {\n syntax: \".2s\",\n properties: [\"precision\", \"type\"],\n description: \"Two significant digits, shown in SI.\"\n },\n { syntax: \",\", properties: [\"comma\"], description: \"Comma separated\" },\n {\n syntax: \",.1f\",\n properties: [\"comma\", \"precision\", \"type\"],\n description: \"Comma separated, one fixed value after the decimal place\"\n },\n {\n syntax: \",.1p\",\n properties: [\"comma\", \"precision\", \"type\"],\n description: \"Comma separated, one digit, percentage type\"\n },\n {\n syntax: \"$,.1\",\n properties: [\"symbol\", \"comma\", \"precision\", \"type\"],\n description: \"Currency syntax, Comma separated, one digit, percentage type\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2694,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":826,"value":"color = d3\n .scaleOrdinal()\n .domain([\"symbol\", \"comma\", \"precision\", \"type\"])\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"tv = (value, text) => textcolor(value, { color: color(text), padding: \"0\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"tc = (text) => textcolor(text, { color: color(text), padding: \"0\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2920,"value":"introParagraph = () => htl.html`

Observable Plot uses scales to map abstract values in your data, such as time or temperature, to visual values in plot, such as x- or y- position, or color. The scale’s type, as well as the visual marks that accompany it (such as axes, ticks, and labels) can be configured in the Plot.plot() function.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"smallNumber = .00013","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"largeNumber = 543005","pinned":true,"hidden":false,"mode":"ojs"},{"id":3420,"value":"### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":2094,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":3404,"value":"inputStyles","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}