2c:null 2d:["$","title",null,{"children":"Exercise 2: Data questions, visual answers | UdG | Master's in Data Science | Observable"}] 32:T488,// Agrupem les dades, calculem la mediana i fem el càlcul de la diferència afegint una nova columna a la taula de dades que s'utilitzarà per fer el plot arr_day_category_orders = { //agrupem les dades let day_category_orders = groupByAndAggregate(daily_orders_product, ['day_of_week','category'] , ['orders'], sum); // Convertiles dades a array per facilitar la seva manipulació let arr_day_category_orders = Object.keys(day_category_orders).map(key => day_category_orders[key]); // Obtenim les quantitats d'ordres de l'agrupació anterior let ordersArray = arr_day_category_orders.map(item => item.orders); // Ordenem les ordres per obtenir la mediana ordersArray.sort((a, b) => a - b); // Calcular la mediana let median; if (ordersArray.length % 2 === 0) { median = (ordersArray[ordersArray.length / 2 - 1] + ordersArray[ordersArray.length / 2]) / 2; } else { median = ordersArray[Math.floor((ordersArray.length - 1) / 2)]; } // Calcular la diferencia i afegir columna arr_day_category_orders.forEach((item) => { item.diferencia = item.orders - median; }); return arr_day_category_orders; }33:Tb5d,//Your first plot here plot2 = (() => { const start = d3.utcDay.offset(d3.min(arr_day_order, (d) => new Date(d.order_date))); const end = d3.utcDay.offset(d3.max(arr_day_order, (d) => new Date(d.order_date))); // Escala de color para el número de órdenes const orderColorScale = d3.scaleSequential(d3.interpolateViridis) .domain([d3.min(arr_day_order, (d) => d.orders), d3.max(arr_day_order, (d) => d.orders)]); // Escala de color original para el gráfico y la leyenda const originalColorScale = d3.scaleSequential(d3.interpolateViridis) .domain([d3.min(arr_day_order, (d) => d.orders), d3.max(arr_day_order, (d) => d.orders)]); return Plot.plot({ width: 1152, height: d3.utcYear.count(start, end) * 160 + 40, //afegim marge per la llegenda... axis: null, padding: 0, title: 'What are the days with the highest demand for orders, and is there a recurring pattern in those days?', x: { domain: d3.range(54) // or 54, if showing weekends }, y: { axis: "left", domain: [-1, 1, 2, 3, 4, 5, 6, 7], // hide 0 and 6 (weekends); use -1 for labels ticks: [1, 2, 3, 4, 5, 6, 7], // don’t draw a tick for -1 tickSize: 0, tickFormat: Plot.formatWeekday() }, fy: { padding: 0.1, reverse: true }, color: { scale: orderColorScale, legend: { position: 'right', inset: 10 }, percent: true, ticks: 10, tickFormat: "+d", label: "Numero de ordres" }, marks: [ Plot.text( d3.utcYears(d3.utcYear(start), end), calendar({text: d3.utcFormat("%Y"), frameAnchor: "right", x: 0, y: -1, dx: -20}) ), Plot.text( arr_day_order.map(d => new Date(d.order_date)), calendar({text: d3.utcFormat("%b"), frameAnchor: "left", y: -1}) ), // Draw a cell for each day in our dataset. The color of the cell encodes // the number of orders. Plot.cell( arr_day_order, calendar({ date: "order_date", fill: (d) => orderColorScale(d.orders), tip: (d) => `Número de órdenes: ${d.orders}`, // mostrar informació al pasar el ratoli sobre la casella mouseover: (d, i, nodes) => { console.log(`Número de órdenes: ${d.orders}`); } }) ), // Draw a line delineating adjacent months. new MonthLine( d3.utcMonths(d3.utcMonth(start), end) .map((d) => d3.utcDay.offset(d, d.getUTCDay() === 0 ? 1 : d.getUTCDay() === 6 ? 2 : 0)), calendar({stroke: "white", strokeWidth: 3}) ), // Lastly, draw the date for all days spanning the dataset, including // days for which there is no data. Plot.text( arr_day_order.map(d => new Date(d.order_date)), calendar({text: d3.utcFormat("%-d")}) ) ] }); })(); 34:T65f,plot3 = (() => { // Definir colors per cada dia de la setmana const dayColors = { Sunday: "#1f77b4", Monday: "#ff7f0e", Tuesday: "#2ca02c", Wednesday: "#d62728", Thursday: "#9467bd", Friday: "#8c564b", Saturday: "#e377c2", }; // Plot return Plot.plot({ marginRight: 50, marginLeft: 50, label: null, title: 'How is the number of orders distributed between different pizza categories throughout the week, and how do they vary?', x: { axis: "top", label: "← decrease · Change in orders · increase →", labelAnchor: "center", tickFormat: (d) => d3.format(".0f")(d), }, color: { range: Object.values(dayColors), type: "ordinal", legend: true }, marks: [ Plot.barX(data_arr_day_category_orders, { x: "diferencia", y: "day_category", fill: (d) => dayColors[d.day_category.split(" - ")[0]], }), Plot.gridX({ stroke: "white", strokeOpacity: 0.5 }), d3 .groups(data_arr_day_category_orders, (d) => d.diferencia > 0) .map(([growth, categories]) => [ Plot.axisY({ x: 0, ticks: categories.map((d) => d.day_category), tickSize: 0, anchor: growth ? "left" : "right", }), Plot.textX(categories, { x: "diferencia", y: "day_category", text: ((f) => (d) => f(d.diferencia))(d3.format("+.1f")), textAnchor: growth ? "start" : "end", dx: growth ? 4 : -4, }), ]), Plot.ruleX([0]), ], }); })(); 35:[] 30:{"id":"2ee488d6c46aff25","slug":null,"title":"Exercise 2: Data questions, visual answers","thumbnail":"cb87c7bfd219e996dbb82aa5a0c5578da99ab592041ed5c2cfa042fc220d0ef7","access_level":"public","create_time":"$D2023-12-12T14:57:38.464Z","update_time":"$D2023-12-21T20:23:54.346Z","view_time":null,"first_public_time":"$D2023-12-12T14:57:38.464Z","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":1958,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8239937d98642997","login":"mayssae-essabbar","name":"Mayssae Essabbar","avatar_url":"https://avatars-next.observableusercontent.com/977c5817834477c2e933864a8e025eddd58b142b1e7c99b5d2a0fbc557568baa","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":"aefe7f82a4e71917","reply_to_id":null,"content":"Are you sure the data rendered is correct? This implies fewer orders on Friday, Saturday, and Sunday than on the other days. Isn't there a jump in orders on the weekends?","create_time":"$D2023-12-17T21:21:29.850Z","update_time":null,"resolved":true,"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_product","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1035,"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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1037,"value":"1. How is the number of orders distributed to all stores over time?\n2. What are the days with the highest demand for orders, and is there a recurring pattern in those days?\n3. How is the number of orders distributed between different pizza categories throughout the week, and how do they vary?","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":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":1586,"value":"Some of the necessary transformations in the data are to join tables and group the data by applying an aggregation function. We create the functions that perform these transformations to facilitate their use.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1041,"value":"//key1 i key2 son els noms de les columnes (id) per comprovar els camps al fer el join\nfunction joinArrays(arr1, arr2, key1, key2) {\n return arr1.map(item1 => {\n const item2 = arr2.find(item => item[key2] === item1[key1]);\n\n // Join de arrays si hi ha coincidència\n if (item2) {\n // Crear i retorna nou objecte amb la combinació\n return { ...item1, ...item2 };\n } else {\n // Si no hi ha coincidencia, notificar-ho\n console.log(\"No s'ha realitzat el join\");\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"function groupByAndAggregate (array, groupByProps, aggregateProps, aggregateFunction){\n return array.reduce((result, current) => {\n const keys = groupByProps.map(prop => current[prop]);\n const key = keys.join('_'); \n\n if (!result[key]) {\n result[key] = {};\n groupByProps.forEach(prop => {\n result[key][prop] = current[prop];\n });\n aggregateProps.forEach(prop => {\n result[key][prop] = 0;\n });\n }\n\n aggregateProps.forEach(prop => {\n result[key][prop] = aggregateFunction(result[key][prop], current[prop]);\n });\n\n return result;\n }, {});\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"We also create the aggregation function that we will apply when grouping the data, in this case we need the sum.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1060,"value":"sum = (a, b) => a + b;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1753,"value":"QUESTION 1:\nTo answer the first question it is necessary to transform the data to obtain from each store the amount of orders made over time from the data, also obtaining the names of the stores to identify them. For that we join the daily_orders table (information of orders made in all stores) i stores (information of stores).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1746,"value":"// Join de les dues taules\norders_with_stores = joinArrays(daily_orders, stores, 'store_id', 'id');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1760,"value":"// Group by per codi de botiga i pel seu nom (ciutat, on es troba la botiga) i sumem els nombre d'ordres de les agrupacions\nstores_orders = groupByAndAggregate(orders_with_stores, ['id', 'city'], ['orders'], sum)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"//Convertim les dades transformades en una array\narr_stores_orders = Object.keys(stores_orders).map(key => stores_orders[key]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"QUESTION 2:\nTo answer this question you need to have for each day of data the number of orders that have been made that day. That’s why we group the data in the daily_orders_product table by 'order_date' and apply the aggregate function (sum) to sum each day’s orders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1548,"value":"//Agrupem les dades\nday_order = groupByAndAggregate(daily_orders_product, ['order_date'] , ['orders'], sum);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"//Convertim a array\narr_day_order = Object.keys(day_order).map(key => day_order[key]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"QUESTION 3:\nTo address this question, I seek to represent the number of orders for each pizza category based on the day of the week. In this representation, the goal is to visualize the variation between the average number of orders and the specific number of orders on that day of the week. This will allow you to identify if the orders for each category are below or above average.\n\nTo perform this analysis, we need the day of the week information and, for every day, the total number of orders for each of the pizza categories. This information will be obtained by grouping the data according to the \"day_of_week\" and by category applying the aggregation function \"sum\" by the commands of each category. In addition, it will be essential to calculate the median number of orders and to determine the difference between the specific day orders and that median. Thus we can clearly visualize deviations and identify if a category has a tendency to be below or above the average for every day of the week.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1918,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"//Ajustem les dades finals per poder visualitzar-les, ajuntant el codi de la botiga amb la ciutat\ndata_arr_day_category_orders = arr_day_category_orders.map((item) => ({\n day_category: `${item.day_of_week} - ${item.category}`,\n diferencia: item.diferencia,\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"// Ordenar segons els dia de la setmana\ndata_arr_day_category_orders.sort((a, b) => {\n const daysOfWeek = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n return daysOfWeek.indexOf(a.day_category.split(\" - \")[0]) - daysOfWeek.indexOf(b.day_category.split(\" - \")[0]);\n});","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\nbars = Plot.plot({\n marginTop: 50,\n marginRight: 20,\n marginLeft: 150,\n title:'How is the number of orders distributed to all stores over time?',\n x: {\n axis: \"top\",\n grid: true,\n },\n \n y: {\n grid: true,\n },\n \n marks: [\n Plot.ruleX([0]),\n Plot.barX(arr_stores_orders, {\n x: \"orders\",\n y: (d) => `${d.city} ${d.id}`,\n sort: { y: \"x\", reverse: true }\n }),\n Plot.text(arr_stores_orders, {\n text: \"orders\",\n y: (d) => `${d.city} ${d.id}`,\n x: \"orders\",\n textAnchor: \"end\",\n dx: -3,\n fill: \"white\",\n }),\n ],\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1485,"value":"// funció necessària per el plot de calendari\nfunction calendar({\n date = Plot.identity,\n inset = 0.5,\n ...options\n} = {}) {\n let D;\n return {\n fy: {transform: (data) => (D = Plot.valueof(data, date, Array)).map((d) => d.getUTCFullYear())},\n x: {transform: () => D.map((d) => d3.utcWeek.count(d3.utcYear(d), d))},\n y: {transform: () => D.map((d) => d.getUTCDay())},\n inset,\n ...options\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"// funció necessària per el plot de calendari\nclass MonthLine extends Plot.Mark {\n static defaults = {stroke: \"currentColor\", strokeWidth: 1};\n constructor(data, options = {}) {\n const {x, y} = options;\n super(data, {x: {value: x, scale: \"x\"}, y: {value: y, scale: \"y\"}}, options, MonthLine.defaults);\n }\n render(index, {x, y}, {x: X, y: Y}, dimensions) {\n const {marginTop, marginBottom, height} = dimensions;\n const dx = x.bandwidth(), dy = y.bandwidth();\n return htl.svg` `${Y[i] > marginTop + dy * 1.5 // is the first day a Monday?\n ? `M${X[i] + dx},${marginTop}V${Y[i]}h${-dx}` \n : `M${X[i]},${marginTop}`}V${height - marginBottom}`)\n .join(\"\")\n }>`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"$34","pinned":false,"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"},{"id":1281,"value":"import {Icicle} from \"@d3/icicle\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"