2e:["$","title",null,{"children":"Plot Cheatsheets - Marks | Observable | Observable"}] 33:T4a0,link = ({ controls: [ { type: "text", value: "// Sales v.s. profit\nPlot.link({ length: 1 }, {" }, { param: "x1", type: "range", min: 0, max: 100, value: regressionLine.x1, step: 1 }, { param: "x2", type: "range", min: 0, max: 500, value: regressionLine.x2, step: 1 }, { param: "y1", type: "range", min: -100, max: 400, value: regressionLine.y1, step: 1 }, { param: "y2", type: "range", min: 0, max: 9185, value: regressionLine.y2, step: 1 }, { type: "text", value: "})" } ], plot: (config) => { const slope = (config.y2 - config.y1) / (config.x2 - config.x1); const intercept = config.y1 - slope * config.x1; return `Plot.plot({ marks: [ // Values based on a linear regression below Plot.link({length: 1}, { x1: ${config.x1}, x2: ${config.x2}, y1: ${config.y1}, y2: ${config.y2} }), Plot.dot(data, { x: "count", y: "value", fill: (d) => (d.value > d.count * ${slope} + ${intercept} ? true : false), fillOpacity: 0.4 }) ], width: ${plotWidth}, height: 200, color: { domain: [true, false], range: ["red", "blue"] } })`; } })34:T5ee,rectY = ({ // Control panel (the code on the left): an array of controls, one for each line (including text) controls: [ { type: "text", value: "// Sales histogram \nPlot.rectY(data,", indent: 0 }, { type: "text", value: "Plot.binX({", indent: 1 }, { param: "reducer", label: "y", type: "select", options: ["sum", "count"], value: "count" }, { type: "text", value: "},{", indent: 1 }, { param: "x", value: "date" }, { param: "y", value: "value" }, { param: "fill", options: ["blue", "brand", "red"], type: "select" }, { param: "thresholds", options: [10, 50, "d3.utcDay", "d3.utcWeek", "d3.utcMonth"], type: "select" }, { param: "fillOpacity", type: "range", min: 0.1, max: 1, value: 0.5, step: 0.05 }, { type: "text", value: "}", indent: 1 }, { type: "text", value: "})" } ], // Function that returns a string of the plot code: input is key/value pairs of the controls plot: (config) => `Plot.plot({ marks: [ Plot.rectY( data, Plot.binX( { y: "${config.reducer}" }, { x: "date", y: "value", fill: "${config.fill}", fillOpacity: ${config.fillOpacity}, thresholds: ${config.thresholds} } ) ) ], marginLeft: 100, height: 200, width: ${plotWidth} })` })35:T5d6,rectX = ({ // Control panel (the code on the left): an array of controls, one for each line (including text) controls: [ { type: "text", value: "// Sales histogram \nPlot.rectX(data,", indent: 0 }, { type: "text", value: "Plot.binY({", indent: 1 }, { param: "reducer", label: "x", type: "select", options: ["sum", "count"], value: "sum" }, { type: "text", value: "},{", indent: 1 }, { param: "y", value: "date" }, { param: "fill", options: ["blue", "brand", "red"], type: "select" }, { param: "thresholds", options: [10, 50, "d3.utcDay", "d3.utcWeek", "d3.utcMonth"], type: "select" }, { param: "fillOpacity", type: "range", min: 0.1, max: 1, value: 0.5, step: 0.05 }, { type: "text", value: "}", indent: 1 }, { type: "text", value: "})" } ], // Function that returns a string of the plot code: input is key/value pairs of the controls plot: (config) => `Plot.plot({ marks: [ Plot.rectX( data, Plot.binY( { x: "${config.reducer}" }, { x: "value", y: "date", fill: "${config.fill}", fillOpacity: ${config.fillOpacity}, thresholds: ${config.thresholds} } ) ) ], marginLeft: 100, width: ${plotWidth}, y: { reverse: true }, height: 200 })` })36:T48f,text = ({ controls: [ { type: "text", value: "// Add text lables \nPlot.text(data, " }, { type: "text", value: "Plot.groupY({", indent: 1 }, { param: "reducer", label: "x", value: "sum" }, { param: "textReducer", label: "text", value: "first" }, { type: "text", value: "}, {", indent: 1 }, { param: "x", value: "value" }, { param: "y", value: "brand" }, { param: "text", value: "brand" }, { param: "fill", value: "brand" }, { type: "text", value: "}))" } ], plot: (params) => `Plot.plot({ marks: [ Plot.textX( data, Plot.groupY( { x: "sum", text: "first" }, { x: "value", y: "brand", text: "brand", textAnchor: "start", fill: "brand" } ) ), Plot.barX( data, Plot.groupY( { x: "sum", text: "first" }, { x: "value", y: "brand", text: "brand", textAnchor: "start", fill: "brand" } ) ) ], marginRight: 50, marginLeft: 10, width: ${plotWidth}, y: { label: null, tickFormat: null, tickSize: 0 } })` })37:T467,ruleY = ({ controls: [ { type: "text", value: "// Add horizontal lines \nPlot.ruleY(data, " }, { type: "text", value: "Plot.groupZ({", indent: 1 }, { param: "reducer", label: "y", type: "select", options: ["mean", "median", "min", "max"], value: "mean" }, { type: "text", value: "{...}", indent: 1 }, { type: "text", value: "})" } ], plot: (params) => `Plot.plot({ marks: [ Plot.dot(data, { x: "date", y: "value", stroke: "brand", strokeOpacity: 0.4 }), Plot.ruleY( data, Plot.groupZ({ y: "${params.reducer}" }, { y: "value", stroke: "brand" }) ), Plot.text( data, Plot.groupZ( { y: "${params.reducer}", text: "first", x: () => d3.max(data, (dd) => dd.date) }, { y: "value", x: "date", fill: "brand", text: "brand", textAnchor: "start", dx: 0 } ) ) ], width: ${plotWidth}, height: 230, x: { ticks: 3 }, y: { type: "log", label: "Log total sales" }, marginLeft: 50, marginRight: 100 })` })38:[{"id":"f06990c669c6571a25995fd1282640b5b352f0608e78914239554db701641dd2db875745e588bc35546ecedf8ddffa56e25af3f702b4f500bf4d57d8024baa34","href":"https://static.observableusercontent.com/files/f06990c669c6571a25995fd1282640b5b352f0608e78914239554db701641dd2db875745e588bc35546ecedf8ddffa56e25af3f702b4f500bf4d57d8024baa34","name":"purchase_data.csv","type":"text/csv","lastModified":1642628805223.653,"size":1848918},{"id":"38366b46e64ba8f382a18051e899616c8ad2aa5d35e87470e891a6439221e2945b73366237dfc00b26b8d9ef9aa6637b4957a5d2133d32b803f5851ee262bcaf","href":"https://static.observableusercontent.com/files/38366b46e64ba8f382a18051e899616c8ad2aa5d35e87470e891a6439221e2945b73366237dfc00b26b8d9ef9aa6637b4957a5d2133d32b803f5851ee262bcaf","name":"androidImg.png","type":"image/png","lastModified":1641933459765.174,"size":1730},{"id":"3cf2d4d48da9fa4ce0bf772acc6e299ce98d49baf95d3b8319947ef65c01c0d57c5950466e30983c8e917773b13842b16c98b8757a52d41a8efe53327545355e","href":"https://static.observableusercontent.com/files/3cf2d4d48da9fa4ce0bf772acc6e299ce98d49baf95d3b8319947ef65c01c0d57c5950466e30983c8e917773b13842b16c98b8757a52d41a8efe53327545355e","name":"googleCloudImg.png","type":"image/png","lastModified":1641933436330.563,"size":3365},{"id":"62896dcc9298fd5a56f63cb77e8a6ca6bc6d9617f26a49e6d458380914d6c81e4ba9a8e56cc9caa4df8a8869ecaba3d0027f94f6ab5f8c1d52f0dd42066072fc","href":"https://static.observableusercontent.com/files/62896dcc9298fd5a56f63cb77e8a6ca6bc6d9617f26a49e6d458380914d6c81e4ba9a8e56cc9caa4df8a8869ecaba3d0027f94f6ab5f8c1d52f0dd42066072fc","name":"googleImg@1.png","type":"image/png","lastModified":1641933415076.015,"size":3716},{"id":"dd9624e7da061d6bcfa3cba4e71981d23cf2945f02b99777c3c66d48cf36c3afc48e375faaf1c18d47ca854d6f13b5c4e16fb4582e228cd16bc13e5fd2be8313","href":"https://static.observableusercontent.com/files/dd9624e7da061d6bcfa3cba4e71981d23cf2945f02b99777c3c66d48cf36c3afc48e375faaf1c18d47ca854d6f13b5c4e16fb4582e228cd16bc13e5fd2be8313","name":"youtubeIcon.png","type":"image/png","lastModified":1641933261125.513,"size":1823}] 31:{"id":"d2dffac0e42406e8","slug":"plot-cheatsheets-marks","title":"Plot Cheatsheets - Marks","thumbnail":"2f53d0ca240cd2258e9a8f2874535630a88cb53c562eaa7f718f46a18cf2f81a","access_level":"public","create_time":"$D2021-10-21T14:53:36.873Z","update_time":"$D2022-01-24T18:11:28.942Z","view_time":null,"first_public_time":"$D2022-01-24T19:39:12.725Z","fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":3045,"publish_version":3045,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"8b68b0299161eb57","reply_to_id":null,"content":"i made a change to tickX and tickY to differentiate them from the rules. what do you think?","create_time":"$D2021-11-01T22:22:33.023Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"062f0201e1594d0b","reply_to_id":"8b68b0299161eb57","content":"also reordered them so the x and y align vertically and the left column goes from simple to \"complex\" from top to bottom","create_time":"$D2021-11-01T22:25:24.621Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"fe6568be3d44c5c3","reply_to_id":null,"content":"You can remove the awaits here if you like (and below).","create_time":"$D2022-01-20T18:03:16.396Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"f14ca61454cf3a8f","reply_to_id":"fe6568be3d44c5c3","content":"Ah, because I end up awaiting them later when I call the async methods (e.g., .url())?","create_time":"$D2022-01-20T19:38:46.014Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"6cc8bb6fa914578e","reply_to_id":null,"content":"Would you be able to publish the notebook you link to?","create_time":"$D2022-01-26T17:47:01.639Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"57cf11a158915776","login":"monitus","name":"Michael Whitaker","avatar_url":"https://avatars-next.observableusercontent.com/cc05689d8d87654987960b89e63fcb1fcb8c308529b4fcfd6078ce315af75b94","tier":null}},{"id":"5a7f898ebb23cf1c","reply_to_id":"6cc8bb6fa914578e","content":"Thanks for pointing that out! The link has been updated.","create_time":"$D2022-01-26T20:51:07.231Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":32,"collection":{"id":"d5ac08ebaaeb6a53","slug":"plot-cheatsheets","title":"Plot Cheatsheets","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Plot Cheatsheets - Marks","cells":[{"id":0,"value":"# Plot Cheatsheets - Marks\n## Geometric symbols that represent your data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1824,"value":"deck(\"marks\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1740,"value":"welcomeBox()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1806,"value":"download({label: \"Download the cheatsheets PDF\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1604,"value":"introParagraph()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"toc({\n headers: \"h2\",\n skip: \"Geometric symbols that represent your data\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1670,"value":"---\n## Overview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1674,"value":"To create a Plot, pass an **array of Marks** to your `Plot.plot` function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1678,"value":"// Create a plot\nPlot.plot({\n // Pass in an array of desired marks\n marks: [\n // Create a line mark\n Plot.line(data, {\n x: \"date\", // feature for the x channel\n y: \"value\", // feature for the y channel\n stroke: \"brand\", // feature for the stroke\n }), \n\n // Create a dot mark\n Plot.dot(data, {\n x: \"date\", // feature for the x channel\n y: \"value\", // feature for the y channel\n fill: \"brand\", // feature for the stroke\n }), \n\n // Display a horizontal line at y = 0\n Plot.ruleY([0])\n ], \n \n // Include a legend for the color channel \n color: {\n legend: true,\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1686,"value":"Explore below to familiarize yourself with the different mark types and associated channels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"---\n## [Lines](https://observablehq.com/@observablehq/plot-line?collection=@observablehq/plot) and [Areas](https://observablehq.com/@observablehq/plot-area?collection=@observablehq/plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"$${[line, areaY, areaX].map(createDemo)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"---\n## [Dots](https://observablehq.com/@observablehq/plot-dot?collection=@observablehq/plot) and [Links](https://observablehq.com/@observablehq/plot-link?collection=@observablehq/plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"$${[dot, link].map(createDemo)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1078,"value":"---\n## [Bars](https://observablehq.com/@observablehq/plot-bar?collection=@observablehq/plot) and [Rects](https://observablehq.com/@observablehq/plot-rect?collection=@observablehq/plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"$${[barY, barX, rectY, rectX].map(createDemo)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"---\n## [Ticks](https://observablehq.com/@observablehq/plot-tick?collection=@observablehq/plot) and [Rules](https://observablehq.com/@observablehq/plot-rule?collection=@observablehq/plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"$${[tickX, tickY, ruleX, ruleY].map(createDemo)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1089,"value":"---\n## [Cells](https://observablehq.com/@observablehq/plot-cell?collection=@observablehq/plot) and [Text](https://observablehq.com/@observablehq/plot-text?collection=@observablehq/plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1093,"value":"$${[cell, text].map(createDemo)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2195,"value":"---\n## [Images](https://observablehq.com/@observablehq/plot-image)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2131,"value":"createDemo(image)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2802,"value":"---\n## [Arrows](https://observablehq.com/@observablehq/plot-arrow)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2852,"value":"createDemo(arrow)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2870,"value":"---\n## [Vectors](https://observablehq.com/@observablehq/plot-vector)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3014,"value":"createDemo(vector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"---\n## Dataset Used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1155,"value":"dataDescription()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1052,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1714,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2771,"value":"_Last updated for Plot version 0.4.0_|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2220,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1042,"value":"ss = require(\"simple-statistics@7.7.3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":846,"value":"import {\n createDemo,\n intro,\n getConfig,\n plotWidth,\n dataDescription,\n download,\n welcomeBox,\n inputStyles, \n allCheatsheets, \n deck\n} with { data, evalCodeStr } from \"@observablehq/cheatsheet-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1129,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2229,"value":"### File attachments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2041,"value":"youtubeImg = await FileAttachment(\"youtubeIcon.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2043,"value":"googleImg = await FileAttachment(\"googleImg@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"androidImg = FileAttachment(\"androidImg.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2085,"value":"googleCloudImg = FileAttachment(\"googleCloudImg.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2030,"value":"Images downloaded from [IconFinder](https://www.iconfinder.com/), specified as free for commercial use.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2235,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1040,"value":"// Purchase event data -- queried from this notebook using this query:\n// https://observablehq.com/@observablehq/bigquery-e-commerce-public-data\n/* select * from events \njoin items on events.item_id = items.id\nwhere type = 'purchase' */\nevents = await FileAttachment(\"purchase_data.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1045,"value":"// Aggregate the data\ndata = aq.from(events)\n .derive({date: aq.escape(d => d3.utcDay(d.date))})\n .groupby(\"date\", \"brand\")\n .rollup({value: d => aq.op.sum(d.price_in_usd), count: aq.op.count()})\n .orderby(\"date\", \"brand\")\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2060,"value":"images = ([\n {brand: \"YouTube\", imgUrl: youtubeImg}, \n {brand: \"Google\", imgUrl: googleImg}, \n {brand: \"Google Cloud\", imgUrl: googleCloudImg}, \n {brand: \"Android\", imgUrl: androidImg}, \n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2090,"value":"imageData = aq.from(data)\n .groupby(\"brand\")\n .rollup({value: d => aq.op.sum(d.value)})\n .join_right(aq.from(images))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2806,"value":"// Get the sales on the first and last day for each brand for the arrow example\nwideData = aq\n .from(data)\n .groupby(\"brand\")\n .filter((d) => d.date === aq.op.min(d.date) || d.date === aq.op.max(d.date))\n .derive({\n time: (d) => (d.date === aq.op.min(d.date) ? \"startValue\" : \"endValue\")\n })\n .derive({ startDate: (d) => aq.op.min(d.date) })\n .derive({ endDate: (d) => aq.op.max(d.date) })\n .select(aq.not(\"date\", \"count\"))\n .groupby(\"brand\", \"startDate\", \"endDate\")\n .pivot(\"time\", \"value\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2874,"value":"// Compute the difference between dates to draw vectors\ndiffData = aq.from(data)\n .groupby(\"brand\")\n .derive({diff: d => d.value - aq.op.lead(d.value)}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2915,"value":"// Apply a scaling function to the diffData to compute degrees of rotation\nchangeData = diffData.derive({diffRotate: aq.escape(d => rotateScale(d.diff))})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2550,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2120,"value":"// Exposing variables for evaluating code strings\nevalCodeStr = (str) => {\n const func = new Function(\"changeData\", \"wideData\", \"imageData\", \"data\", \"Plot\", \"width\", \"d3\", `return ${str}`)\n return func(changeData, wideData, imageData, data, Plot, width, d3);\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1635,"value":"introParagraph = () => htl.html`

Observable Plot creates visualizations by combining geometric shapes (e.g., lines, dots, areas) referred to as marks. This approach enables multiple layered representations of your data in the same chart. Use mark functions to create geometric shapes (e.g., Plot.line, Plot.dot, Plot.areaY) and pass them to your Plot.plot() function.

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2722,"value":"marksExample = () => createDemo(rectY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2888,"value":"// Rotate\n// value of 0 is 90 degrees\n// largest negative value is 180\n// largest positive value is 0\nrotateScale = {\n const domainSize = d3.max(d3.extent(diffData, (d) => d.diff))\n return d3\n .scaleLinear()\n .domain([-domainSize, domainSize])\n .range([0, 180]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2560,"value":"line = ({\n controls: [\n { type: \"text\", value: \"// Sales over time \\nPlot.line(data, {\" },\n { param: \"x\", value: \"date\" },\n { param: \"y\", value: \"value\" },\n { param: \"stroke\", value: \"brand\" },\n {\n param: \"strokeWidth\",\n type: \"range\",\n value: 2,\n min: 0.1,\n max: 4,\n step: 0.1\n },\n { param: \"curve\", ...curveOptions },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.line(data, {\n x: \"${config.x}\",\n y: \"${config.y}\",\n stroke: \"${config.stroke}\",\n strokeWidth: ${config.strokeWidth},\n curve: \"${config.curve}\"\n })\n ],\n ${plotConfig}, \n ${legendConfig}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2849,"value":"arrow = ({\n controls: [\n { type: \"text\", value: \"// Start/end sales \\nPlot.arrow(wideData, {\" },\n { param: \"x1\", value: \"startDate\" },\n { param: \"x2\", value: \"endDate\" },\n { param: \"y1\", value: \"startValue\" },\n { param: \"y2\", value: \"endValue\" }, \n { param: \"bend\", value: true, type: \"toggle\" },\n\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.arrow(wideData, {\n x1: \"${config.x1}\",\n x2: \"${config.x2}\",\n y1: \"${config.y1}\",\n y2: \"${config.y2}\",\n bend: ${config.bend}, \n stroke: \"brand\"\n })\n ],\n ${plotConfig}, \n ${legendConfig}, \n marginTop: 30, \n height: 300, \n caption: \"Sales on the first and last day of the dataset\"\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2568,"value":"areaY = ({\n controls: [\n { type: \"text\", value: \"// Sales over time \\nPlot.areaY(data, {\" },\n { param: \"x\", value: \"date\" },\n { param: \"y\", value: \"value\" },\n { param: \"order\", value: \"value\" },\n { param: \"fill\", value: \"brand\" },\n {\n param: \"fillOpacity\",\n value: 0.5,\n type: \"range\",\n min: 0.1,\n max: 1,\n step: 0.05\n },\n { param: \"curve\", ...curveOptions },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.areaY(data, {\n x: \"${config.x}\",\n y: \"${config.y}\",\n order: \"${config.order}\",\n fill: \"${config.fill}\",\n fillOpacity: ${config.fillOpacity},\n curve: \"${config.curve}\" \n })\n ],\n ${plotConfig}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2575,"value":"areaX = ({\n controls: [\n { type: \"text\", value: \"// Sales over time \\nPlot.areaX(data, {\" },\n { param: \"x\", value: \"value\" },\n { param: \"y\", value: \"date\" },\n { param: \"order\", value: \"value\" },\n { param: \"fill\", value: \"brand\" },\n {\n param: \"fillOpacity\",\n value: 0.5,\n type: \"range\",\n min: 0.1,\n max: 1,\n step: 0.05\n },\n { param: \"curve\", ...curveOptions },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.areaX(data, {\n x: \"${config.x}\",\n y: \"${config.y}\",\n order: \"${config.order}\",\n fill: \"${config.fill}\",\n fillOpacity: ${config.fillOpacity},\n curve: \"${config.curve}\" \n })\n ],\n width: ${plotWidth}, \n marginLeft: 80, \n y: { reverse: true }, \n height: 200\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2581,"value":"dot = ({\n controls: [\n { type: \"text\", value: \"// Sales each day \\nPlot.dot(data, {\" },\n { param: \"x\", value: \"date\" },\n { param: \"y\", value: \"value\" },\n {\n param: \"fill\",\n type: \"select\",\n options: [\"blue\", \"red\", \"brand\"],\n value: \"brand\"\n },\n {\n param: \"stroke\",\n type: \"color\",\n value: \"#544f4f\"\n },\n {\n param: \"strokeWidth\",\n type: \"range\",\n value: 1,\n min: 0.1,\n max: 4,\n step: 0.1\n },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.dot(data, {\n x: \"${config.x}\",\n y: \"${config.y}\",\n fill: \"${config.fill}\",\n stroke: \"${config.stroke}\",\n strokeWidth: ${config.strokeWidth}\n })\n ],\n ${plotConfig}\n})`\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2588,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2650,"value":"barY =( {\n controls: [\n {\n type: \"text\",\n value: `// Sales by day \\nPlot.barY(data, `\n },\n {\n type: \"text\",\n value: `Plot.groupX({`,\n indent: 1\n },\n { param: \"reducer\", label: \"y\", value: \"sum\" },\n {\n type: \"text\",\n value: `}, {`,\n indent: 1\n },\n { param: \"x\", value: \"...\" },\n { param: \"y\", value: \"value\" },\n { param: \"stroke\", value: \"brand\" },\n { type: \"text\", value: \"})\", indent: 1 },\n { type: \"text\", value: \")\" }\n ],\n plot: () => `Plot.plot({\n marks: [\n Plot.barY(\n data,\n Plot.groupX(\n { y: \"sum\" },\n { x: (d) => d3.utcFormat(\"%a\")(d.date), y: \"value\", stroke: \"brand\" }\n )\n )\n ],\n width: ${plotWidth},\n height: 130,\n x: { ticks: 3, domain: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"] },\n marginLeft: 50, \n ${legendConfig}\n})`\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2654,"value":"barX = ({\n controls: [\n {\n type: \"text\",\n value: `// Sales by day \\nPlot.barX(data, `\n },\n {\n type: \"text\",\n value: `Plot.groupY({`,\n indent: 1\n },\n { param: \"reducer\", label: \"x\", value: \"sum\" },\n {\n type: \"text\",\n value: `}, {`,\n indent: 1\n },\n { param: \"x\", value: `value` },\n { param: \"y\", value: \"...\" },\n { param: \"stroke\", value: \"brand\" },\n { type: \"text\", value: \"})\", indent: 1 },\n { type: \"text\", value: \")\" }\n ],\n plot: () => `Plot.plot({\n marks: [\n Plot.barX(\n data,\n Plot.groupY(\n { x: \"sum\" },\n { x: \"value\", y: (d) => d3.utcFormat(\"%a\")(d.date), stroke: \"brand\" }\n )\n )\n ],\n width: ${plotWidth}, \n height: 130, \n marginLeft: 50,\n y: { domain: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"] }\n})`\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2662,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2667,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2671,"value":"cell = ({\n controls: [\n {\n type: \"text\",\n value: `// Create a heatmap \\nPlot.cell(data, {`\n },\n { param: \"x\", value: \"date\" },\n { param: \"y\", value: \"brand\" },\n { param: \"fill\", value: \"value\" },\n // { type: \"text\", value: \"})\", indent: 1 },\n { type: \"text\", value: \"}), \\n color: {\" },\n {\n param: \"scheme\",\n options: [\"blues\", \"greens\", \"greys\", \"oranges\", \"purples\", \"reds\"],\n value: \"blues\",\n type: \"select\"\n },\n { param: \"reverse\", type: \"toggle\" },\n { type: \"text\", value: \"}\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [Plot.cell(data, { x: \"${config.x}\", y: \"${config.y}\", fill: \"${config.fill}\" })],\n color: { scheme: \"${config.scheme}\", legend: true, reverse: ${config.reverse} },\n marginLeft: 100,\n x: { tickFormat: null }, \n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2676,"value":"tickY = ({\n controls: [\n { type: \"text\", value: \"// Draw each sale \\nPlot.tickY(data, {\" },\n { param: \"x\", value: \"brand\" },\n { param: \"y\", value: \"date\" },\n { param: \"stroke\", value: \"brand\" },\n {\n param: \"strokeWidth\",\n type: \"range\",\n min: 0.1,\n max: 2,\n value: 0.5,\n step: 0.1\n },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.tickY(data, {\n x: \"${config.x}\",\n y: \"${config.y}\",\n stroke: \"${config.stroke}\",\n strokeWidth: ${config.strokeWidth}\n })\n ],\n width: ${plotWidth},\n height: 200,\n marginLeft: 100,\n y: { reverse: true }\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2679,"value":"tickX = ({\n controls: [\n { type: \"text\", value: \"// Draw each sale \\nPlot.tickX(data, {\" },\n { param: \"x\", value: \"date\" },\n { param: \"y\", value: \"brand\" },\n { param: \"stroke\", value: \"brand\" },\n {\n param: \"strokeWidth\",\n type: \"range\",\n min: 0.1,\n max: 2,\n value: 0.5,\n step: 0.1\n },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.tickX(data, { \n x: \"${config.x}\",\n y: \"${config.y}\",\n stroke: \"${config.stroke}\",\n strokeWidth: ${config.strokeWidth}\n })\n ],\n width: ${plotWidth}, \n height: 200, \n marginLeft: 100, \n y: { reverse: true }\n})`\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2682,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2685,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2688,"value":"ruleX = ({\n controls: [\n { type: \"text\", value: \"// Add vertical lines \\nPlot.ruleX(data, \" },\n { type: \"text\", value: \"Plot.groupZ({\", indent: 1 },\n {\n param: \"reducer\",\n label: \"x\",\n type: \"select\",\n options: [\"mean\", \"median\", \"min\", \"max\"],\n value: \"mean\"\n },\n { type: \"text\", value: \"{...}\", indent: 1 },\n { type: \"text\", value: \"})\" }\n ],\n plot: (params) => `Plot.plot({\n marks: [\n Plot.dot(data, { x: \"value\", fill: \"brand\", fillOpacity: 0.3 }),\n Plot.ruleX(\n data,\n Plot.groupZ({ x: \"${params.reducer}\" }, { x: \"value\", stroke: \"brand\" })\n )\n ],\n width: ${plotWidth},\n height: 150,\n facet: {\n data,\n y: \"brand\",\n marginLeft: 100\n },\n fy: {\n axis: \"left\"\n },\n marginRight: 100\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2691,"value":"image = ({\n controls: [\n { type: \"text\", value: \"// Display images\" },\n { type: \"text\", value: \"Plot.image(imageData, {\", indent: 1 },\n { param: \"x\", value: \"value\" },\n { param: \"y\", value: \"brand\" },\n { param: \"src\", value: \"imgUrl\" },\n { param: \"height\", value: 40, type: \"range\", min: 5, max: 100, step: 1 },\n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.image(imageData, {\n x: \"value\",\n y: \"brand\",\n src: \"imgUrl\", \n height: ${config.height}\n }), \n Plot.bar\n ],\n marginLeft: 100,\n height: 200,\n insetLeft: 30, \n width: ${plotWidth}\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3003,"value":"vector = ({\n controls: [\n { type: \"text\", value: \"// Sales slope \\nPlot.vector(changeData, {\" },\n { param: \"x\", value: \"date\" },\n { param: \"y\", value: \"value\" },\n { param: \"rotate\", value: \"diffRotate\" }, \n { type: \"text\", value: \"})\" }\n ],\n plot: (config) => `Plot.plot({\n marks: [\n Plot.vector(changeData, {\n x: \"date\",\n y: \"value\",\n rotate: \"diffRotate\",\n stroke: \"brand\"\n }),\n Plot.line(data, {\n x: \"date\",\n y: \"value\",\n stroke: \"brand\",\n strokeOpacity: 0.3\n })\n ], \n ${plotConfig}, \n ${legendConfig}, \n height: 300\n})`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1047,"value":"// Regression points for the scatter plot\nregressionLine = ({\n x1: 0, \n y1: linearRegression.b, \n x2: 450, \n y2: linearRegression.m * 450 + linearRegression.b\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1046,"value":"// Linear regression for the link plot example\nlinearRegression = ss.linearRegression(data.map(d => [d.count, d.value]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":896,"value":"// Default plot properties\nplotConfig = `width: ${plotWidth}, \n height: 130, \n x: { ticks: 3 }, \n marginLeft: 50`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1462,"value":"// Default legend properties\nlegendConfig = `color: {\n legend: true,\n width: ${plotWidth},\n columns: \"120px\"\n }`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1041,"value":"// Options for curves\ncurveOptions = ({\n type: \"select\",\n details: \"set curve\",\n options: [\n \"linear\",\n \"step\",\n \"step-after\",\n \"step-before\",\n \"basis\",\n \"cardinal\",\n \"catmull-rom\",\n \"monotone-x\",\n \"bump-x\",\n \"natural\"\n ],\n value: \"linear\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2225,"value":"### Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2000,"value":"inputStyles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1427,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@observablehq/plot-cheatsheets-marks;307;"}