2c:null 2d:["$","title",null,{"children":"Exercise 2: Data questions, visual answers | UdG | Master's in Data Science | Observable"}] 32:T433,// Q1 // This will sum the revenue for each date revenueByDateArray = { const revenueByDate = daily_orders.reduce((acc, { order_date, revenue }) => { // If the date isn't in the accumulator, add it with initial revenue if (!acc[order_date]) { acc[order_date] = 0; } // Add the revenue for the current item to the total for the date acc[order_date] += revenue; return acc; }, {}); // Convert the result into an array suitable for plotting const revenueByDateArray = Object.keys(revenueByDate).map(date => ({ date: new Date(date), fakeDate: new Date(new Date(new Date(new Date(date).setFullYear(2024)).setMonth(0)).setDate(((new Date(date).getDay() + 4) % 7) + 1)), year: new Date(date).getFullYear(), month: new Date(date).getMonth(), weekDay: (new Date(date).getDay() + 4) % 7, weekNumber: getWeekNumber(new Date(date)), totalRevenue: revenueByDate[date] })); // Sort the array by date if needed revenueByDateArray.sort((a, b) => new Date(a.date) - new Date(b.date)); return revenueByDateArray; }33:T57b,// Q2 // This will sum the revenue for each store // This function extracts the year from a date string stackedData = { const getYear = dateString => new Date(dateString).getFullYear(); // Group by store and year const revenueByStoreAndYear = daily_orders.reduce((acc, { store_id, revenue, order_date }) => { const year = getYear(order_date); const key = `${store_id}-${year}`; if (!acc[key]) { acc[key] = { store_id, year, revenue: 0 }; } acc[key].revenue += revenue; return acc; }, {}); // Convert the result into an array const revenueArray = Object.values(revenueByStoreAndYear); // Now we need to nest this array by store, to create arrays of revenue by year for each store const nestedRevenueByStore = Array.from( d3.group(revenueArray, d => d.store_id), ([storeId, values]) => ({ storeId, values }) ); // Prepare data for stacked bar chart // We need to map each store to its revenues per year const stackedData = nestedRevenueByStore.map(({ storeId, values }) => { const revenuesByYear = values.reduce((obj, { year, revenue }) => { obj[year] = revenue; return obj; }, {}); return { storeId, ...revenuesByYear }; }); const tidyData = Object.keys(stackedData[0]).slice(0, 3).flatMap((year) => stackedData.map(d => ({storeId: d.storeId, year, revenue: d[year]}))) return tidyData; }34:T874,// Q3 // Calculate total revenue and orders for each store and each day averageOrderValueArray = { const revenueAndOrdersByStoreAndDay = daily_orders.reduce((acc, { store_id, order_date, revenue, orders }) => { const key = `${store_id}-${order_date}`; if (!acc[key]) { acc[key] = { store_id, order_date, totalRevenue: 0, totalOrders: 0 }; } acc[key].totalRevenue += revenue; acc[key].totalOrders += orders; return acc; }, {}); // Convert the result into an array and calculate the average order value const averageOrderValueArray = Object.values(revenueAndOrdersByStoreAndDay).map(({ store_id, order_date, totalRevenue, totalOrders }) => ({ store_id, order_date, averageOrderValue: totalOrders ? totalRevenue / totalOrders : 0, totalOrders: totalOrders, totalRevenue: totalRevenue })); // Now 'averageOrderValueArray' is ready to be used with a visualization library to plot the data return averageOrderValueArray; // If you want to calculate the average per store regardless of the date: const averageOrderValueByStore = Array.from(d3.group(averageOrderValueArray, d => d.store_id), ([storeId, values]) => { const totalRevenue = d3.sum(values, d => d.totalRevenue); const totalOrders = d3.sum(values, d => d.totalOrders); return { storeId, averageOrderValue: totalOrders ? totalRevenue / totalOrders : 0 }; }); return averageOrderValueByStore; // If you want to calculate the average per day regardless of the store: const averageOrderValueByDay = Array.from(d3.group(averageOrderValueArray, d => d.order_date), ([orderDate, values]) => { const totalRevenue = d3.sum(values, d => d.totalRevenue); const totalOrders = d3.sum(values, d => d.totalOrders); return { orderDate, averageOrderValue: totalOrders ? totalRevenue / totalOrders : 0 }; }); // Sort by storeId or orderDate if necessary before plotting averageOrderValueByStore.sort((a, b) => a.storeId.localeCompare(b.storeId)); averageOrderValueByDay.sort((a, b) => new Date(a.orderDate) - new Date(b.orderDate)); return averageOrderValueByStore; };35:[{"id":"cf7e6ec05ed401a97524ec41bff55ab3340f740190f4bbb94b872e2d677685e385d8efa9f9d7a92cec97d51e6ed84c50e5e2949023b163f5dd6b7a0b86e6a541","href":"https://static.observableusercontent.com/files/cf7e6ec05ed401a97524ec41bff55ab3340f740190f4bbb94b872e2d677685e385d8efa9f9d7a92cec97d51e6ed84c50e5e2949023b163f5dd6b7a0b86e6a541","name":"Probability_density_function_of_Pareto_distribution.svg","type":"image/svg+xml","lastModified":1702575430849.824,"size":40874}] 30:{"id":"7303e5d081758a9e","slug":null,"title":"Exercise 2: Data questions, visual answers","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-12-12T16:33:39.561Z","update_time":"$D2023-12-14T17:57:49.712Z","view_time":null,"first_public_time":"$D2023-12-12T16:33:39.561Z","has_unpublished_edits":null,"fork":{"id":"723babda014c5c9c","slug":"exercise-2-data-questions-visual-answers","title":"Exercise 2: Data questions, visual answers","owner":{"id":"f6d094e91910d678","login":"udg-master-data-science","name":"UdG | Master's in Data Science"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f6d094e91910d678","login":"udg-master-data-science","name":"UdG | Master's in Data Science","avatar_url":"https://avatars-next.observableusercontent.com/43ba1b8a69dd1722287c44e61dfee202393e63b350f5814991b6b0af9418435e","tier":"starter_2024"},"version":1460,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb32add71484fe5c","login":"marti-mas-i-fullana","name":"Martí Mas i Fullana","avatar_url":"https://avatars-next.observableusercontent.com/21b01367fb3e3c0f345e6a528563277d37b1b11c78698e73793f96c6d30e71da","tier":null}],"members":[{"type":"team","id":"f6d094e91910d678","login":"udg-master-data-science","name":"UdG | Master's in Data Science","avatar_url":"https://avatars-next.observableusercontent.com/43ba1b8a69dd1722287c44e61dfee202393e63b350f5814991b6b0af9418435e","tier":"starter_2024","role":"editor"}],"comments":[{"id":"45feef866eb3a247","reply_to_id":null,"content":"This was an intriguing idea. Very straightforward question and visual answer: correlation -> scatterplot.\n\nBut I would have tried faceting (one panel, one store) instead of color coding the stores: the different angles of the linear regression may have given you a better visual answer.","create_time":"$D2023-12-18T08:22:15.107Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Exercise 2: Data questions, visual answers","cells":[{"id":0,"value":"# Exercise 2: Data questions, visual answers\n## Welcome to the data team at Bake Union Pizza —a cooperative of pizza-makers!\n\nThe elected board of directors has hired a new manager of operations. She is very data-driven —great news for your team. She wants to understand how the business is doing and has come to you for answers.\n\n**You'll need to:**\n* Come up with three simple questions for your data\n* Transform the data to answer those questions.\n* Plot it to answer each question with a visualization.\n\n**Extra credit:**\n* Re-read [`Plot` transforms](https://observablehq.com/plot/features/transforms) and use them to arrange the data for one of the questions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"Plot.plot({\n width: width,\n height: 100,\n x: {\n label: \"Weight in the grading (%)\",\n transform: (d) => d * 100\n },\n color: {\n type: \"ordinal\",\n domain: grading.map((d) => d.label),\n range: [\"#f0f0f0\",\"#80d6c2\",\"#00ad85\"]\n },\n marks: [\n Plot.barX(grading, {x1: 0, x2: \"value\", fill: \"label\"}),\n Plot.ruleX([0, 0.5, 1]),\n Plot.ruleX([0.5], { stroke: \"#dcdcdc\" }),\n Plot.text(grading.filter(d=> d.label !== \"This\"), {x: \"x\", text: \"label\", fill: \"#000\" }),\n Plot.text(grading.filter(d=> d.label === \"This\"), {x: \"x\", text: \"label\", fill: \"#FFF\", fontWeight: \"bold\", fontSize: \"1rem\" }),\n\n ],\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"---\n## Data\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":948,"value":"import {daily_orders_product, daily_orders, stores} from \"@udg-master-data-science/data-playground\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"daily_orders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"stores","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":945,"value":"---\n## Questions\n\n1. How does the daily revenue vary over time?\n2. Which store generates the most revenue?\n3. Is there a correlation between the number of orders and the revenue generated?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"---\n## Data transformations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1158,"value":"function getWeekNumber(d) {\n // Copy date so don't modify original\n d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\n // Set to nearest Thursday: current date + 4 - current day number\n // Make Sunday's day number 7\n d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));\n // Get first day of year\n var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));\n // Calculate full weeks to nearest Thursday\n var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);\n // Return array of year and week number\n return weekNo;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"Transform the data and explain why you're doing so.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":903,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"

NOTE
If you have trouble transforming your data using JavaScript, you can do those transformations somewhere else and then bring your data back here. I strongly recommend you not doing so, but I won't penalize you if you do.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"---\n## Visual answers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":878,"value":"Code your plots below ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"//Your first plot here\nPlot.plot({\n title: \"Q1: How does the daily revenue vary over a week?\",\n subtitle: \"Grouped by day of week. We can see that overall, stores sell a lot more on Thursdays. We also can see that, in terms of revenue, 2020 is generally outperformed by both 2021 and 2022, which themselves perform about the same. However, for 2022, Thursday revenues are generally down compared to previous years.\",\n marginBottom: 60,\n color: {type: \"categorical\", scheme: \"Spectral\", legend: \"swatches\", width: 340, label: \"Year\"},\n marks: [\n Plot.dotY(revenueByDateArray, {x: \"fakeDate\", y: \"totalRevenue\", z:\"year\", tip: true, stroke: \"year\", opacity: 0.5, dx: 20}),\n Plot.axisX({ticks: \"1 day\", tickFormat: \" %A\", tickRotate: -45, tickSize: 6, dx: 20, label: \"Week day\"}),\n Plot.axisY({label: \"Revenue\"}),\n Plot.ruleY([0], {dx: 20})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"\n \n \n \n

\n ${plt}\n

\n ${plt2}\n

\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1436,"value":"We can see that the revenue distribution between stores follows a Pareto distribution, as would be expected in this sort of scenario.\n![Probability_density_function_of_Pareto_distribution.svg](${await FileAttachment(\"Probability_density_function_of_Pareto_distribution.svg\").url()})\n\n[Source of image](https://en.wikipedia.org/wiki/Pareto_distribution#/media/File:Probability_density_function_of_Pareto_distribution.svg)\n\nBy plotting the same graph with a log() on the Y axis, we can see that the ordered per-store revenues are linear, confirming that we are, in fact, looking at a Pareto distribution (which is basically an exponential).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":913,"value":"//Your second plot here\n// Second plot, part 1\nplt = Plot.plot({\n title: \"Q2: Which store generates the most revenue?\",\n subtitle: \"Split by year.\",\n marginBottom: 60,\n width: width/2,\n marginLeft: 60,\n color: {type: \"categorical\", scheme: \"Spectral\", legend: \"swatches\", width: 340, label: \"Year\"},\n marks: [\n Plot.barY(stackedData, {x: \"storeId\", y: \"revenue\", tip: true, fill: \"year\", sort: {color: null, x: \"-y\"}}),\n Plot.axisX({tickRotate: -45, tickSize: 6, label: \"Store ID\"}),\n Plot.axisY({label: \"Revenue\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"// Second plot, part 2\nplt2 = Plot.plot({\n title: \".\", // This is just so that the subtitle appears lower\n subtitle: \"Y axis in log scale.\",\n marginBottom: 60,\n width: width/2,\n marginLeft: 60,\n y: {type: \"log\"},\n // y: {transform: (y) => Math.log(y)},\n color: {type: \"categorical\", scheme: \"Spectral\", legend: \"swatches\", width: 340, label: \"Year\"},\n marks: [\n Plot.barY(stackedData, {x: \"storeId\", y: \"revenue\", tip: true, fill: \"year\", sort: {color: null, x: \"-y\"}}),\n Plot.axisX({tickRotate: -45, tickSize: 6, label: \"Store ID\"}),\n Plot.axisY({label: \"log(Revenue)\"}),\n Plot.linearRegressionY(stackedData, {x: \"storeId\", y: \"revenue\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"//Your third plot here\nPlot.plot({\n title: \"Q3: Is there a correlation between the number of orders and the revenue generated?\",\n subtitle: \"It appears there is an almost perfect correlation between # of orders and revenue on any given day, by any given store. This probably means that stores' main revenues come from the same set of products, so X% higher sales equals X% higher revenues.\",\n marginBottom: 50,\n marginLeft: 60,\n color: {type: \"categorical\", scheme: \"Spectral\", legend: \"swatches\", width: 340, label: \"Store ID\"},\n marks: [\n Plot.dotY(averageOrderValueArray, {x: \"totalOrders\", y: \"totalRevenue\", opacity: 0.5, stroke: \"store_id\", tip: true}),\n Plot.axisX({tickRotate: -45, tickSize: 6, label: \"# Orders\"}),\n Plot.linearRegressionY(averageOrderValueArray, {x: \"totalOrders\", y: \"totalRevenue\"}),\n Plot.axisY({label: \"Revenue\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"---\n#### Addendum: data, libraries, other ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":982,"value":"import {boxStyles} from \"@udg-master-data-science/data-playground\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"grading = [\n {value: 1, label: \"Total grade\", x: 0.65},\n {value: .3, label: \"Weekly exercises\", x: 0.2},\n {value: .1, label: \"This\", x: 0.05}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"