31:T45d,viewof q2 = Q({ title: "3. Is the distribution of the value column different each hour of each month?", questions: [ `Create a grid of small multiples by adding a facet in the X direction by hour to the chart above`, ], guides: [ `Set the [facet option](https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot)'s \`x\` property to break your chart into small multiples horizontally.`, `Add a [\`Plot.frame()\`](https://observablehq.com/@observablehq/plot-frame?collection=@observablehq/plot) mark to improve readability.` ], hints: [ `// Update the chart to a grid Plot.tickX(data, { x: "value", strokeOpacity: 0.1 }).plot({ facet: { data: data, y: "month", marginLeft: 100 }, // add an x facet! fy: { domain: domains.month }, width, marks:[ … // add a Plot.frame(), ], })` ], solutions: [ `Plot.tickX(data, { x: "value", strokeOpacity: 0.1 }).plot({ facet: { data: data, x: "hour", y: "month", marginLeft:100}, fy: { domain:domains.month, }, width, marks:[Plot.frame()] })` ] })32:T533,viewof q3 = Q({ title: "4. Can you add a visual queue to compare the average of each month / hour combination ?", questions: [ `Add a background rectangle showing the _mean energy consumption_ for each month / hour in the grid.`, ], guides: [ `Add a [\`Plot.rect()\`](https://observablehq.com/@observablehq/plot-rect?collection=@observablehq/plot) mark to show the mean energy consumption as a background color (this is tricky!), and set the color option to be \`{scheme:"reds"}\`` ], hints: [ ` // Fill in the Plot.rect() and color settings below Plot.tickX(data, { x: "value", strokeOpacity: 0.1 }).plot({ facet: { data: data, x: "hour", y: "month", marginLeft:100}, fy: { domain:domains.month, }, width, marks:[ Plot.frame(), // Set the x, y, and fill Plot.rect(data, Plot.groupZ({fill:"mean"}, {x:…, y:…, fill:…, fillOpacity:.6})) ], // Set the scheme to "reds" color: { … } })` ], solutions: [ `Plot.tickX(data, { x: "value", strokeOpacity: 0.1 }).plot({ facet: { data: data, x: "hour", y: "month", marginLeft:100 }, fy: { domain:domains.month, }, width, marks:[Plot.frame(), Plot.rect(data, Plot.groupZ({fill:"mean"}, { fill:"value", fillOpacity:.6}))], color: { scheme:"reds" } })` ] })33:T53d,viewof q4 = Q({ title: "5. Create an interactive interface to select the x and y facets", questions: [ ], guides: [ `Switch out the x and y facets from the chart above with the variables \`xFacet\` and \`yFacet\``, `Update the \`fx\` and \`fy\` domains to match the selected facets.` ], hints: [ `// Update the hard coded variables to \`xFacet\` and \`yFacet\` Plot.tickX(data, { x: "value", strokeOpacity: 0.1 }).plot({ // update the x and y variables facet: { data: data, x: "hour", y: "month", marginLeft:100}, fy: { domain:domains.month, // update this to match the yFacet }, fx: { domain:domains.hour, // update this to match the xFacet }, marks:[Plot.frame(), Plot.rect(data, Plot.groupZ({fill:"mean"}, {x:xFacet, y:yFacet, fill:"value", fillOpacity:.6}))], color: { scheme:"reds" }, width })` ], solutions: [ `Plot.tickX(data, { x: "value", strokeOpacity: 0.1 }).plot({ facet: { data: data, x: xFacet, y: yFacet, marginLeft: 100 }, fy: { domain: domains[yFacet] }, fx: { domain: domains[xFacet] }, marks: [ Plot.frame(), Plot.rect( data, Plot.groupZ( { fill: "mean" }, { x: xFacet, y: yFacet, fill: "value", fillOpacity: 0.6 } ) ) ], color: { scheme: "reds" }, width })` ] })34:[{"id":"a9f4100f0a6126438fcbed2f0f4114dfd51931ee177dfc7f238f08d2c6ae0dea6ecda2070c7c612ec463191d501af41610fc3312341b7cbd9cdc174f34ea2e19","href":"https://static.observableusercontent.com/files/a9f4100f0a6126438fcbed2f0f4114dfd51931ee177dfc7f238f08d2c6ae0dea6ecda2070c7c612ec463191d501af41610fc3312341b7cbd9cdc174f34ea2e19","name":"data.csv","type":"text/csv","lastModified":1634579306350.959,"size":583555}] 2f:{"title":"Part 2: Discovering Date Patterns","cells":[{"id":0,"value":"# Part 2: Discovering Date Patterns\n## Based on the article [Discovering Date Patterns](https://observablehq.com/@observablehq/discovering-date-patterns) and part of the [Analyzing Time Series Data Workshop](https://observablehq.com/@observablehq/timeseries-workshop-materials)","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":411,"value":"*The video embedded above will start where Part 2 begins*","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"data = await FileAttachment(\"data.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof q0 = Q({\n title: \"1. What is the distribution of the value column?\",\n questions: [\n `Plot a \\`tickX\\` mark displaying the *value* on the *x* axis.`\n ],\n guides: [\n `Use [Plot.**tickX**](https://observablehq.com/@observablehq/plot-tick?collection=@observablehq/plot)\\`(data, {x: \"…\"})\\` to create a one-dimensional tick plot.`,\n `For readability, set the \\`strokeOpacity\\` to a low value (e.g., .1)`\n ],\n hints: [\n `// change the code here\nPlot.tickX(data, {x: \"…\", strokeOpacity:.1}).plot() // replace … with value`\n \n ],\n solutions: [\n `Plot.tickX(data, {x: \"value\", strokeOpacity:.1}).plot()`\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"// Your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"A(q0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"viewof q1 = Q({\n title: \"2. Is the distribution of the value column different each month?\",\n questions: [\n `**Facet** the chart above to create small multiples of the tick chart for each month.`\n ],\n guides: [\n `Set the [facet option](https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot) to break your chart into small multiples`,\n `Set the \\`fy\\` domain to \\`domains.months\\` to set the month order`,\n `Set the \\`width\\` option to the variable \\`width\\``,\n ],\n hints: [\n `// Set the facet options\nPlot.tickX(data, { x: \"value\", strokeOpacity: 0.1 }).plot({\n facet: { data: …, y: \"…\", marginLeft: 100 }, // set the data and y facet\n fy: {\n … // set the domain here\n }\n})`\n \n ],\n solutions: [\n `Plot.tickX(data, { x: \"value\", strokeOpacity: 0.1 }).plot({\n facet: { data: data, y: \"month\", marginLeft: 100 },\n fy: {\n domain: domains.month\n },\n width\n})`\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"// Your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"A(q1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"// Your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"A(q2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"// Your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"A(q3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof xFacet = Inputs.radio([\"day\", \"month\", \"hour\"], {value:\"hour\", label:\"Select an X facet:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof yFacet = Inputs.radio([\"day\", \"month\", \"hour\"], {value:\"month\", label:\"Select a Y facet:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"// Your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"A(q4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Conclusion\n\nFill out this brief [post-workshop survey](https://docs.google.com/forms/d/e/1FAIpQLScBnHKBQj1l9c4oO3ZPivkhrPP1UP4Ul0TwIWUJJ3K6naGtfw/viewform?usp=sf_link) to help us design more and better workshops in the future!","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"---\n# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"domains = ({\n month:[\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \n day:[\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"]\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"---\n## Worksheet internals\nThe following functions enable the functionality of prompts, hints and solutions","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"import {Q, A, styles} with {renderSnippetOverride as renderSnippet} from \"@observablehq/plot-exploration-penguins\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":28,"value":"function renderSnippetOverride(str) {\n try {\n // TODO: if you want to support more variables in the solutions you add them as a string and pass them in here\n const func = new Function(\"data\", \"Plot\", \"d3\", \"width\", \"domains\", \"xFacet\", \"yFacet\", `return ${str}`)\n return func(data, Plot, d3, width, domains, xFacet, yFacet);\n }\n catch(e) {\n console.error(e)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}