2f:Ta3b,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }30:[] 2d:{"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"},{"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"},{"id":365,"value":"---\n## Data\n","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"import {daily_orders_product, daily_orders, stores} from \"@udg-master-data-science/data-playground\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"SELECT * FROM \"daily_orders_product\"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:daily_orders_product"},{"id":1389,"value":"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:dailyAverages"},{"id":1392,"value":"SELECT * FROM \"daily_orders\"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:daily_orders"},{"id":1394,"value":"SELECT * FROM \"stores\"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:stores"},{"id":945,"value":"---\n## Questions\n\n1. Remember that they begin \n2. with question words\n3. like what, when, where, how many ...","pinned":false,"hidden":false,"mode":"md"},{"id":1022,"value":"Q1. Which item is ordered the most times every day?\n\nQ2. What is the average price of daily orders?\n\nQ3. In which city are the most orders placed every day?","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":924,"value":"---\n## Data transformations","pinned":false,"hidden":false,"mode":"md"},{"id":905,"value":"Transform the data and explain why you're doing so.","pinned":false,"hidden":false,"mode":"md"},{"id":903,"value":"// daily_orders_product data grouped by date to find every order for every day (answer 1 and 2).\ngroupedDate = d3.group(daily_orders_product, d => d.order_date);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1639,"value":"groupedPizza = d3.group(daily_orders_product, d => d.name);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1277,"value":"// combine daily_orders with stores to get the diary orders in the cities (answer 3).\njoinedData = d3.merge(\n daily_orders.map(order =>\n stores\n .filter(store => store.id === order.store_id)\n .map(store => ({ ...order, city: store.city }))\n )\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1662,"value":"function get_pizza_count (pizza_name_list) {\n const groupedCount = [];\n \n groupedDate.forEach(orders => {\n pizza_name_list.forEach(pizza => {\n const orders_pizza = orders.filter(d => d.name == pizza)\n if(orders_pizza.length != 0) {\n groupedCount.push({'order_date': orders[0].order_date, 'name': pizza, 'count': orders_pizza[0].orders, 'price': orders_pizza[0].price})\n }\n })\n })\n \n return groupedCount;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"pizzasName = Array.from(new Set(daily_orders_product.map(pizza => pizza.name)));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1695,"value":"num_pizzas = pizzasName.map((pizza, index) => index + 1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1634,"value":"bestsPizzasDesordered = {\n const pizzaCount = {};\n \n groupedPizza.forEach(pizza_list => {\n pizza_list.forEach(pizza => {\n pizzaCount[pizza.name] = pizzaCount[pizza.name] || 0;\n pizzaCount[pizza.name] += pizza.orders;\n })\n })\n \n return Object.entries(pizzaCount).map(([pizza, count]) => ({ pizza, count }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1652,"value":"bestPizzas = bestsPizzasDesordered.sort((a, b) => b.count - a.count);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1471,"value":"// Answer Q1 --> Grouped product name and order_date for find the most ordered product every day\ndailyProductsCounts = get_pizza_count(pizzasName);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1667,"value":"bestPizzasCount = get_pizza_count(bestPizzas.map(object => object.pizza).slice(0, numBestPizzas))","pinned":true,"hidden":false,"mode":"ojs"},{"id":884,"value":"// Answer Q2 --> New array with the average of price of each day\ndailyAverages = Array.from(groupedDate, ([date, orders, name]) => ({\n date,\n average: d3.mean(orders, d => d.price),\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"---\n## Visual answers","pinned":false,"hidden":false,"mode":"md"},{"id":878,"value":"Code your plots below ...","pinned":false,"hidden":false,"mode":"md"},{"id":1593,"value":"Answer 1 --> That plot shows about the frequency of the products every day with dots because it is easier to visualize (big circle to big frequence and little circle to small frequence).","pinned":false,"hidden":false,"mode":"md"},{"id":1687,"value":"viewof numBestPizzas = Scrubber(num_pizzas, {\n delay: 2000,\n loopDelay: 2000,\n autoplay: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1711,"value":"### Top best pizzas","pinned":false,"hidden":false,"mode":"md"},{"id":1513,"value":"Plot.plot({\n height: 500,\n width: width,\n color: { legend: true },\n marks: [\n Plot.lineY(dailyProductsCounts, {x: \"order_date\", y: \"count\", marker: true}),\n Plot.lineY(bestPizzasCount, {x: \"order_date\", y: \"count\", stroke: \"name\", marker: true, tip: true})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1596,"value":"Answer 2 --> That plot shows the average price every day with plot because you can see the different prices in different moments.","pinned":false,"hidden":false,"mode":"md"},{"id":1156,"value":"Plot.plot({\n height: 500,\n width: width,\n color: { scheme: \"Viridis\"},\n marks: [\n Plot.dot(dailyAverages, {\n x: \"date\",\n y: \"average\",\n stroke: \"average\",\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1599,"value":"Answer 3 --> That bar plot shows the number of orders ordered in cities every day because the colors help to identify the most ordered and the lest ordered.","pinned":false,"hidden":false,"mode":"md"},{"id":1310,"value":"Plot.plot({\n height: 550,\n width: width,\n marginLeft: 100,\n marginBottom: 50,\n padding: 0.05,\n color: { scheme: \"ylorrd\", legend: true },\n marks: [\n Plot.barX(\n joinedData,\n Plot.binX(\n { r: \"count\" },\n { x: \"order_date\",\n y: \"city\",\n fill: \"orders\",\n tip: true,\n sort: {y: \"-fill\"}}\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n#### Addendum: data, libraries, other ...","pinned":false,"hidden":false,"mode":"md"},{"id":982,"value":"import {boxStyles} from \"@udg-master-data-science/data-playground\" ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1691,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}