2b:null 2c:["$","title",null,{"children":"Introduction to Observable - Joram Kim | 🪦 dis-2025-fall | Observable"}] 31:T53e,

--- # Housekeeping and etiquette **Cells can be rearranged!** Move everything that's not interesting to Appendix, like below. Order of cells doesn't matter for execution. **Use hotkeys** Hotkeys help you to move less clumsy in your notebooks. Especially the ones that allow you to switch between cells and run them. Full reference here: [keyboard shortcuts](https://observablehq.com/documentation/misc/keyboard-shortcuts) **Name the notebook properly** The first cell with `# Title` will appear as title in the catalog **Create a nice sharable link** https://observablehq.com/d/introduction-to-observable is nicer than https://observablehq.com/d/4f46575bdd3fffc9 **Add a thumbnail** Use a screenshot if needed **Keep tutorials in your own workspace** In order to not populate the shared workspace with 50 copies of the same tutorial, use this general rule: these go into private workspace 🟤, these go into shared workspace: 🔴 🟠 **If the notebook becomes too large** Split it into multiple parts and import! [More about imports](https://observablehq.com/documentation/notebooks/imports) **Always check permissions** Very often students would send a link to a notebook that's private. If you want me to modify your notebook make sure i have edit permissions, otherwise view. 32:T624,

--- # Assignment _This assignment is taken from Data Visualization Fundamentals and Best Practices Course by Robert Kosara @rkosara_ 🟠 Students get their grades in the separate individual assignment "Pizza orders" + 1p For long a dataset (⚫️ Number Mage) Use the provided dataset about orders at a pizza chain. You can import it into your own notebook using this line: `import {pizzaorders} from "@observablehq/data-vis-course-assignment"` Create a notebook consisting of three visualizations with a brief description for each. Use the data table, the chart cell and low-code Observable Plot library like shown in this tutorial. 1. Explore the data using a chart 2. Explain something in the data using a chart: find an interesting pattern or factoid and explain it using a chart and text **Rubrik and tips** 0.5p the charts are completely useless but you tried! 🌟 ${useless} 1p you have used summary statistics that didn't gave you any good insights because you computed them wrong (such as you've computed COUNT of the orders instead of SUM of the orders — a very common mistake) ${incorrect_aggr} 2p: you have used summary statistics that did give you correct analysis (here that mistake is fixed) ${correct_aggr} 4p: you made your analysis on the level of individual orders, not summary statistics and discovered interesting patterns over time, such as Veggie only offered/ordered in Large size, but over christmas a bit in Medium too. What specific data transformation would be needed here? ${detailed} 33:[{"id":"849e04cb377ec5b858ed19ab257774c5ae34f2cbb4e90bb98cbb5b81a40a434caf4a771de51bad5bf57bc7244e2c78a824e4cc565ca83996eed47f31b55866ab","href":"https://static.observableusercontent.com/files/849e04cb377ec5b858ed19ab257774c5ae34f2cbb4e90bb98cbb5b81a40a434caf4a771de51bad5bf57bc7244e2c78a824e4cc565ca83996eed47f31b55866ab","name":"6107068.jpg","type":"image/jpeg","lastModified":1756919065517.351,"size":105072},{"id":"46f8f9c972ca448653cae432c9e6511524f49e8c0d2209f70a69a799b751d788658c662da4ec0fffa0c5f2e71d195cbbd5e8c234782fb38b5d37c2e7ce05bdd8","href":"https://static.observableusercontent.com/files/46f8f9c972ca448653cae432c9e6511524f49e8c0d2209f70a69a799b751d788658c662da4ec0fffa0c5f2e71d195cbbd5e8c234782fb38b5d37c2e7ce05bdd8","name":"Screenshot 2025-01-15 at 20.44.55.png","type":"image/png","lastModified":1756919065517.351,"size":99273},{"id":"b405398ba0dc65b35f4daae5fb4aaa2596ea5d576fcb497fcf0ecd2b2d7bac87d3f942405ff1887e2b4945f8fa1559acca36043b3081c8fcecca91a58bf81f3b","href":"https://static.observableusercontent.com/files/b405398ba0dc65b35f4daae5fb4aaa2596ea5d576fcb497fcf0ecd2b2d7bac87d3f942405ff1887e2b4945f8fa1559acca36043b3081c8fcecca91a58bf81f3b","name":"anscombe@2.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1756932011283.223,"size":9828},{"id":"d2ad7e84b65a68e20c9f03b4186be8367de812579d80c92ae25fc2bbcc1124f9a769d98ef957e0b6224f42988612d71599c4df202fc4fb18e84adf2b8a6e151e","href":"https://static.observableusercontent.com/files/d2ad7e84b65a68e20c9f03b4186be8367de812579d80c92ae25fc2bbcc1124f9a769d98ef957e0b6224f42988612d71599c4df202fc4fb18e84adf2b8a6e151e","name":"Screenshot 2025-01-15 at 19.55.22.png","type":"image/png","lastModified":1756919065517.351,"size":29003},{"id":"d5d9c915b0fcd753b0bb096eed1883e10d6396d68c532ac3889833d2a5f619b060708233f52c52a3f210e77673970396fb62042eeb2d2158fab9a4a5d80b80b9","href":"https://static.observableusercontent.com/files/d5d9c915b0fcd753b0bb096eed1883e10d6396d68c532ac3889833d2a5f619b060708233f52c52a3f210e77673970396fb62042eeb2d2158fab9a4a5d80b80b9","name":"Screenshot 2025-01-15 at 19.29.56.png","type":"image/png","lastModified":1756919065517.351,"size":68329},{"id":"61511c5058d3112acb68eded7766d76f39112bbfd1c7790ca5197b038c73f15c261a562f973cb074c7173c85bbfe6a3496359b9c162cc27a592eb4442976be5b","href":"https://static.observableusercontent.com/files/61511c5058d3112acb68eded7766d76f39112bbfd1c7790ca5197b038c73f15c261a562f973cb074c7173c85bbfe6a3496359b9c162cc27a592eb4442976be5b","name":"Screenshot 2025-01-15 at 19.16.14.png","type":"image/png","lastModified":1756919065517.351,"size":724620},{"id":"5f1cfda5a56ebcfa9129289c1bbf70ab3b594ee4c0bff6b6aafebbaf591bcf67d3f621b89e3719095d60fdc9796254f00f680d66dfad01bd599237831c3a513c","href":"https://static.observableusercontent.com/files/5f1cfda5a56ebcfa9129289c1bbf70ab3b594ee4c0bff6b6aafebbaf591bcf67d3f621b89e3719095d60fdc9796254f00f680d66dfad01bd599237831c3a513c","name":"Screenshot 2025-01-15 at 19.08.37.png","type":"image/png","lastModified":1756919065517.351,"size":114349},{"id":"73c8ed8f5f2ea74666d1c46bce0d59134480e6bba12ca44d6a39ab26e08029894f85d5a72b69bb67cfa2837a27841010d86eb4b03907ffbd2a80c8dfa95b989d","href":"https://static.observableusercontent.com/files/73c8ed8f5f2ea74666d1c46bce0d59134480e6bba12ca44d6a39ab26e08029894f85d5a72b69bb67cfa2837a27841010d86eb4b03907ffbd2a80c8dfa95b989d","name":"image-e3e822d8-d619-4afc-ae8f-26461062b13c.png","type":"image/png","lastModified":1756919065517.351,"size":176734},{"id":"7837b9cd4b7a30a254512802119d0d98132310eececaedc4ec6a61f2409c2534620a382a0892f331a6260f1f972ae5cceaa40637df24e97d5339955a54fcaa8a","href":"https://static.observableusercontent.com/files/7837b9cd4b7a30a254512802119d0d98132310eececaedc4ec6a61f2409c2534620a382a0892f331a6260f1f972ae5cceaa40637df24e97d5339955a54fcaa8a","name":"image-cdf0b0e4-fc75-4cf4-8bc4-a05b49509cdc.png","type":"image/png","lastModified":1756919065517.351,"size":85808},{"id":"69c68f1bdeef934c5593d3024e2e4183128f7156b19c0549b43576b7b7eb9eb0bf5db30a6b2dad6c948d301fb3c09df9dfdc48d82453116f8a633ee43a800b19","href":"https://static.observableusercontent.com/files/69c68f1bdeef934c5593d3024e2e4183128f7156b19c0549b43576b7b7eb9eb0bf5db30a6b2dad6c948d301fb3c09df9dfdc48d82453116f8a633ee43a800b19","name":"image-657921d3-d15e-4feb-8fce-dadfe4a75e5f.png","type":"image/png","lastModified":1756919065517.351,"size":21197},{"id":"2813db45c54a0ac827d3f8e3ec8d7a28be785d43be847b4f17a159e2e4230aa2ca82d6ac59385b636e4aad6edf4f69fb1eba5f986131cff8d8128cd40a3703d1","href":"https://static.observableusercontent.com/files/2813db45c54a0ac827d3f8e3ec8d7a28be785d43be847b4f17a159e2e4230aa2ca82d6ac59385b636e4aad6edf4f69fb1eba5f986131cff8d8128cd40a3703d1","name":"image-f2ee3249-ece6-45e9-9682-75d6832edd06.png","type":"image/png","lastModified":1756919065517.351,"size":87415}] 2f:{"id":"f413d170c1aa75ea","slug":"sixseven","title":"Introduction to Observable - Joram Kim","thumbnail":"46185ee1d2b974947da4ca34e7ef2ecc2817921a3006766a121936b0d356c984","access_level":"public","create_time":"$D2025-09-03T17:04:25.517Z","update_time":"$D2025-09-04T14:24:54.810Z","view_time":null,"first_public_time":"$D2025-09-03T21:02:13.728Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024"},"version":3552,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1ef264f5339d7a4","login":"joramkim7","name":"joramkim7","avatar_url":"https://avatars-next.observableusercontent.com/8edbe2b2ac5c20ec8b6a24583eb54d1469c4c23c0658dad5bd1652ede8bbad1a","tier":null}],"members":[{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"a1ef264f5339d7a4","login":"joramkim7","name":"joramkim7","avatar_url":"https://avatars-next.observableusercontent.com/8edbe2b2ac5c20ec8b6a24583eb54d1469c4c23c0658dad5bd1652ede8bbad1a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to Observable - Joram Kim","cells":[{"id":0,"value":"# Introduction to Observable - Joram Kim\n## Interactive workshop materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":986,"value":"This workshop introduces a browser-based data analysis workflow on Observable using [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot). It covers loading, visualizing, and interacting with data. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2207,"value":"*Follow along with the video above using the interactive prompts below!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2213,"value":"\nEach prompt in the workshop has a corresponding ***Show me*** cell containing the code and expected results:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2363,"value":"sampleData = d3.range(100).map(d => ({x: Math.random(), y: Math.random()}))","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"showMe(`Plot.dot(sampleData, { x: \"x\", y: \"y\" }).plot({ height: 200 })`, {\n open: true,\n dependencies: { sampleData }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"toc({headers:\"h1,h2,h3\", skip: \"Interactive workshop materials\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2428,"value":"# Activity 1: What is a notebook?\nA notebook is a ${textcolor('reactive', color)} document made of cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2443,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#079c77\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2438,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2499,"value":"

\n## Cell types\n### 1. Markdown cell\n * does formatting like you would explain a plain text to work\n * the data is kept in plain text\n * enables smooth writing of basic documents\n * can be interactive: this notebook is HOW MANY? pixels wide \n\n**Add a variable above**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2501,"value":"showMe(`This notebook is ${width} pixels wide`, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2522,"value":"

2. HTML cell

This is what web pages are made of
Cumbersome to write, since everything is made of tags you need to close
Change box background to yellow -->

But look what it can do!

\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2599,"value":"showMe(`background: yellow;`, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3188,"value":"### 3. JavaScript cell\n[Time formatting reference](https://d3js.org/d3-time-format)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2557,"value":"{\n //here you can write calculations and logic\n //comments are ignored\n while(true) { // Loop goes on forever\n await Promises.delay(1000); // This causes the loop to \"wait\" 1000 milliseconds instead of spamming your computer\n yield \"The time is now \" + d3.timeFormat(\"%Y-%m-%d of %H:%M:%S\")(Date.now()) + \". Try adding date!\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2606,"value":"showMe(`d3.timeFormat(\"%Y-%m-%d %H:%M:%S\")(Date.now())`, { })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2486,"value":"

\n----\n# Activity 2: NOCODE data prep and vis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2423,"value":"## Built-in datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2481,"value":"Take a look at the datasets \"cars\" and \"penguins\". Where do they come from? These are provided by Observable and available in every notebook. The list of all built-in datasets is [here](https://observablehq.com/@observablehq/sample-datasets)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3404,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x: \"power (hp)\", y: \"economy (mpg)\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3408,"value":"cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3410,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2477,"value":"//type here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"showMe(\"cars\", { evaluate: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2490,"value":"

\n## Data table cell\nCreate a data table cell and make it show data from `penguins`, which will only appear if you reference penguins locally","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2626,"value":"mypenguins = penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3332,"value":"smolPenguins = mypenguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"smolPenguins","database":"$undefined"},{"id":2632,"value":"showMe(\"mypenguins = penguins\", { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2385,"value":"Let's do data analysis\n\nFilter the table above to only show you the smallest (below 4000 g) penguins who were recorded on Dream island. Use interactive tools on the top of the table. You should get about 96 penguins.\n\nSave your result. Name the table output smolPenguins\n\nWhich penguin species passed the filter and which did not?\n\n${adelie}\n_Adelie penguin, [National Geographic](https://www.nationalgeographic.com/animals/birds/facts/adelie-penguin)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2689,"value":"

\n## Chart cell\n\nAdd a chart cell and point it to smolPenguins \nExplore how the smolness of penguins related to sex and species","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3337,"value":"Plot.plot({\n title: \"penguin smolness\",\n caption: \"white caption here\",\n color: {\n scheme: \"Set1\",\n legend: true\n },\n marks: [\n Plot.auto(smolPenguins, {x: \"body_mass_g\", fx: \"species\", fy: \"sex\", color: \"sex\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2826,"value":"Suggested result: \n${screenshot20250115At190837}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2418,"value":"

\n----\n# Activity 3: Data import and using LOWCODE tool Observable Plot\n\n## Import a custom dataset from a spreadsheet\n1. Go to this article on Wikipedia about [Anscombe's Quartet](https://en.wikipedia.org/wiki/Anscombe%27s_quartet) — we will now replicate the chart from this article\n2. Find the data table there and copy it to a spreadsheet like Microsoft excel\n3. Rearrange the table as shown: make sure there is only one observation per row and label classes go into a new column instead\n${screenshot20250115At191614}\n\n4. Drag and drop the spreadsheet file into this notebook\n5. Press insert, you will get a few new cells\n6. Change `headers:false` to `headers:true`, so that the headers are parsed correctly\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3347,"value":"workbook = FileAttachment(\"anscombe@2.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3348,"value":"workbook.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3349,"value":"data = workbook.sheet(0, {\n headers: true,\n range: \"A1:C45\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3350,"value":"data1 = data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data1","database":"$undefined"},{"id":3478,"value":"Plot.plot({\n marks: [\n Plot.auto(data1, {x: \"x\", y: \"y\", fx: \"class\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3483,"value":"cellToExport = Plot.plot({\n title: \"Quartet\",\n style: {fontSize: 16},\n marginBottom: 50,\n marginTop:40,\n width: width,\n height: 800,\n fx: {axis: null},\n fy: {axis: null},\n x: { grid: true, domain:[3, 21] },\n y: { grid: true, domain:[2, 14] },\n marks: [\n Plot.frame({ strokeOpacity: 1 }),\n Plot.dot(data1, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: \"x\", y: \"y\", stroke: \"blue\", fill: \"orange\", r: 5, tip: true }),\n Plot.linearRegressionY(data1, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: \"x\", y: \"y\", stroke: \"blue\", fill: \"orange\", r: 5, tip: true, ci: confidence })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3491,"value":"niceFx = (key) => key == \"a\" || key == \"c\" ? 1 : 2;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3493,"value":"niceFy = (key) => key == \"a\" || key == \"b\" ? 1 : 2;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3514,"value":"viewof confidence = Inputs.range([0, 0.99], {label: \"Confidence Interval\", step: 0.01})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3518,"value":"Plot.plot({\n marks: [\n Plot.linearRegressionY(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", stroke: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2865,"value":"

\n## Use the Chart cell to generate a lowcode template\nUse the already familiar chart cell to get as close to the original chart as possible (use Facet X for \"class\"), then create a cell right below it and press \"💡 Convert to javascript\". This option appears only if you create the new cell exactly below \n\n${screenshot20250115At192956}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2903,"value":"//add your cells here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2894,"value":"showMe(`Plot.plot({\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }),\n Plot.dot(data, { fx: \"class\", x: \"x\", y: \"y\", tip: true })\n ]\n })\n`, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2905,"value":"

\n## Use both facets to create the layout\n\nLet's create logic for making 4 panels in 2x2 arrangement instead of 1x4\n\nWe need to first add the `fy` encoding:\n```js\n fy: \"class\"\n```\n\nNow, instead of fx and fy fixed to `\"class\"`, let's use the *accessor* functions to redirect the result to our custom logic based on `class`\n\n```js\n d => getNiceFx(d.class)\n d => getNiceFy(d.class)\n```\n\nAnd don't forget to add the custom logic\n```js\n const getNiceFx = (key) => key === \"A\" || key == \"B\"? 1 : 2\n const getNiceFy = (key) => key === \"A\" || key == \"C\"? 1 : 2\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2891,"value":"//add code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2920,"value":"showMe(`{\n const getNiceFx = (key) => key === \"A\" || key == \"B\"? 1 : 2\n const getNiceFy = (key) => key === \"A\" || key == \"C\"? 1 : 2\n \n return Plot.plot({\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }),\n Plot.dot(data, { fx: d => getNiceFx(d.class), fy: d => getNiceFy(d.class), x: \"x\", y: \"y\", tip: true })\n ]\n })\n}`, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2946,"value":"

\n## Styling\nImprove looks and styling. This is what to aim for\n${screenshot20250115At195522}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2951,"value":"showMe(`{\n const getNiceFx = (key) => key === \"A\" || key == \"B\"? 1 : 2\n const getNiceFy = (key) => key === \"A\" || key == \"C\"? 1 : 2\n return Plot.plot({\n title: \"Quartet\",\n width: 600,\n style: {fontSize: 16},\n marginBottom: 50,\n marginTop: 30,\n x: {domain: [0,20], grid: true},\n y: {domain: [0,15], grid: true},\n fx: {axis: null},\n fy: {axis: null},\n marks: [\n Plot.frame(),\n Plot.dot(data, {x: \"x\", y: \"y\", fill: \"class\", fx: d => getNiceFx(d.class), fy: d => getNiceFy(d.class)}),\n ]\n })\n}`, { evaluate: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2943,"value":"Add regression lines using `Plot.linearRegressionY`: bash \"regr\" in search when creating a new cell, add a suggested cell! Look how it's done, practice on penguins and adapt to our case","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2976,"value":"showMe(`{\n const getNiceFx = (key) => key === \"A\" || key == \"B\"? 1 : 2\n const getNiceFy = (key) => key === \"A\" || key == \"C\"? 1 : 2\n return Plot.plot({\n width: 600,\n style: {fontSize: 16},\n marginBottom: 50,\n marginTop: 30,\n x: {domain: [0,20], grid: true},\n y: {domain: [0,15], grid: true},\n fx: {axis: null},\n fy: {axis: null},\n marks: [\n Plot.frame(),\n Plot.dot(data, {x: \"x\", y: \"y\", fill: \"class\", fx: d => getNiceFx(d.class), fy: d => getNiceFy(d.class)}),\n Plot.linearRegressionY(data, {x: \"x\", y: \"y\", stroke: \"class\", fx: d => getNiceFx(d.class), fy: d => getNiceFy(d.class)}),\n ]\n })\n}`, { evaluate: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2986,"value":"

\n## Interactive elements\nFinally, let's add an interactive element!\n\nLook for \"slider\" in add-cell menu, make it go from 0 to 0.99 with 0.01 step. Add label: \"Confidence interval\", and call it just \"slider\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2264,"value":"viewof slider = Inputs.range([0, 0.99], {label: \"Confidence interval\", step: 0.01})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2997,"value":"Add a parameter `ci: slider` in the options of linearRegressionY\n\nNotice how slider changes the confidence interval","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3150,"value":"Final view: \n${screenshot20250115At204455}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3208,"value":"

\n## Embedding the results to an external website\nNotebook must be publicly viewable.\n\nThe cells you want to embed must be named! For JS cells you just add a variable in the beginning. For HTML and markdown cells you can name them using the field in bottom-left. For example, this cell is named \"Hello\".\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"Hello","database":"$undefined"},{"id":2175,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3322,"value":"import {pizzaorders} from \"@observablehq/data-vis-course-assignment\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3325,"value":"pizzaorders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3532,"value":"Plot.plot({\n width: width,\n height: 800,\n marks: [\n Plot.density(penguins, { x: \"culmen_length_mm\", y: \"culmen_depth_mm\", fill: \"species\", stroke: \"species\", fillOpacity: 0.1, strokeOpacity: 0.8})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3536,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3277,"value":"

\n---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3089,"value":"import {showMe} from \"@observablehq/show-me\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2816,"value":"screenshot20250115At190837 = FileAttachment(\"Screenshot 2025-01-15 at 19.08.37.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2833,"value":"screenshot20250115At191614 = FileAttachment(\"Screenshot 2025-01-15 at 19.16.14.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2876,"value":"screenshot20250115At192956 = FileAttachment(\"Screenshot 2025-01-15 at 19.29.56.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2964,"value":"screenshot20250115At195522 = FileAttachment(\"Screenshot 2025-01-15 at 19.55.22.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3147,"value":"screenshot20250115At204455 = FileAttachment(\"Screenshot 2025-01-15 at 20.44.55.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3265,"value":"adelie = FileAttachment(\"6107068.jpg\").image({width: 300})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"detailed = FileAttachment(\"image-657921d3-d15e-4feb-8fce-dadfe4a75e5f.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3298,"value":"incorrect_aggr = FileAttachment(\"image-cdf0b0e4-fc75-4cf4-8bc4-a05b49509cdc.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3299,"value":"useless = FileAttachment(\"image-e3e822d8-d619-4afc-ae8f-26461062b13c.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3300,"value":"correct_aggr = FileAttachment(\"image-f2ee3249-ece6-45e9-9682-75d6832edd06.png\").image({width: 500})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"