2f:Te39,chart = { const width = 500; const height = width; const radius = width / 6; const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)); const hierarchy = d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); root.each(d => d.current = d); const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .style("font", "10px sans-serif"); const path = svg.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)); path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); const format = d3.format(",d"); path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); const label = svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(d => d.data.name); const parent = svg.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = svg.transition().duration(750); path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }30:[{"id":"70aeb9d2f06a5a228d2152ea3f633848e0f9e72cdcb987ca29df6e8b1d790dae929cc6ca2b66c9a9717f6a600ce127b5da7dde6d169b5c44e5e79dd07f4a3b6d","href":"https://static.observableusercontent.com/files/70aeb9d2f06a5a228d2152ea3f633848e0f9e72cdcb987ca29df6e8b1d790dae929cc6ca2b66c9a9717f6a600ce127b5da7dde6d169b5c44e5e79dd07f4a3b6d","name":"imageedit_3_9594925531.png","type":"image/png","lastModified":1718813626854.554,"size":905218}] 2d:{"title":"Suburt analysis","cells":[{"id":0,"value":"# Suburt analysis","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":1008,"value":"daily_orders_product","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"daily_orders","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"stores","pinned":true,"hidden":false,"mode":"ojs"},{"id":945,"value":"---\n## Questions\n\n1. How popular are our different pizza types?\n2. If we were to close two days a week, which would be the two ideal ones?\n3. Where is our store coverage lacking in California?","pinned":false,"hidden":false,"mode":"md"},{"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":1477,"value":"---\nFirst question: \nWe will need to group pizzas by type and also by size. ","pinned":false,"hidden":false,"mode":"md"},{"id":1481,"value":"This function counts how many times words appear in a column in an array.","pinned":false,"hidden":false,"mode":"md"},{"id":1051,"value":"wordCountMapReducer = function (wordCountMap, word) {\n if (wordCountMap.has(word)) {\n wordCountMap.set(word, wordCountMap.get(word) + 1)\n } else {\n wordCountMap.set(word, 1)\n }\n return wordCountMap\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"This function gets the unique values of a column of an array. ","pinned":false,"hidden":false,"mode":"md"},{"id":1103,"value":"function getUniqueValues(columnArray) {\n const uniqueValues = new Set(columnArray);\n\n const uniqueArray = [...uniqueValues];\n\n return uniqueArray;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1483,"value":"Here we can see what different pizzas we have. We realize we haven't got many types, so we can consider to do certain types of graph that we wouldn't do otherwise. ","pinned":false,"hidden":false,"mode":"md"},{"id":1098,"value":"uniqueNames = getUniqueValues(daily_orders_product.map(item => item.name));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1486,"value":"The next steps will get a function that gives us both the count as the accumulated sum. We do a couple extra steps to get only the keywords we want in the name, as well as constructing an array as output. ","pinned":false,"hidden":false,"mode":"md"},{"id":1299,"value":"function getUniqueValuesWithAccumulatedSum(data) {\n const uniqueValuesMap = new Map();\n\n data.forEach(item => {\n const name = item.name;\n const orders = item.orders;\n\n if (uniqueValuesMap.has(name)) {\n uniqueValuesMap.set(name, {\n count: uniqueValuesMap.get(name).count + 1,\n accumulatedSum: uniqueValuesMap.get(name).accumulatedSum + orders\n });\n } else {\n uniqueValuesMap.set(name, {\n count: 1,\n accumulatedSum: orders\n });\n }\n });\n\n const uniqueValuesArray = Array.from(uniqueValuesMap.entries());\n\n return uniqueValuesArray;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2216,"value":"We change extra large to one word for later (extra_large).","pinned":false,"hidden":false,"mode":"md"},{"id":2205,"value":"daily_orders_product2 = daily_orders_product.map(item => {\n item.name = item.name.replace('Extra Large', 'Extra_Large');\n return item;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2220,"value":"Now we group the data by pizza type, and we do series of transformations: in order to use the graphic we want we need a particular structure. ","pinned":false,"hidden":false,"mode":"md"},{"id":1301,"value":"uniqueNames2 = getUniqueValuesWithAccumulatedSum(daily_orders_product2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2049,"value":"uniqueNames4 =uniqueNames2.map(([name, { count, accumulatedSum }]) => ({\n name,\n count,\n accumulatedSum,\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":2106,"value":"uniqueNames7 = uniqueNames4.reduce((result, item) => {\n const [mainName] = item.name.split(' ');\n const mainNameLower = mainName.toLowerCase();\n\n const pizzaSize = item.name.split(' ').pop();\n\n const data11 = {\n count: item.count,\n accumulatedSum: item.accumulatedSum\n };\n\n if (!result[mainNameLower]) {\n result[mainNameLower] = {\n children: []\n };\n }\n\n const existingPizza = result[mainNameLower];\n const existingSize = existingPizza.children.find(entry => entry.name === pizzaSize);\n\n if (existingSize) {\n existingSize.data.push(data11);\n } else {\n existingPizza.children.push({\n name: pizzaSize,\n data: [data11]\n });\n }\n\n return result;\n}, {});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2110,"value":"function uni8(inputObject) {\n return Object.entries(inputObject).map(([name, { children }]) => ({\n name,\n children: children.map(({ name, data }) => ({\n name,\n children: data.map(({ count, accumulatedSum }) => ({\n name: `Pizzas sold: ${accumulatedSum}`,\n value: accumulatedSum\n }))\n }))\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2114,"value":"data={\n const uniqueNames8= {\n name: \"pizza\",\n children: uni8(uniqueNames7)\n}\nreturn uniqueNames8\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1543,"value":"---\n\nSecond question:","pinned":false,"hidden":false,"mode":"md"},{"id":1572,"value":"What we want to do is to calculate what days are the slowest ones; i.e., in which days we earn less money. We will proceed to calculate the acumulated weekly data about our revenue, divided by the number of days opened, so we compare the average daily income. ","pinned":false,"hidden":false,"mode":"md"},{"id":1544,"value":"function getUniqueValuesWithAccumulatedSumWeek(data) {\n const uniqueValuesMap = new Map();\n\n data.forEach(item => {\n const day_of_week = item.day_of_week;\n const revenue = item.revenue;\n\n if (uniqueValuesMap.has(day_of_week)) {\n uniqueValuesMap.set(day_of_week, {\n number_of_days_open: uniqueValuesMap.get(day_of_week).number_of_days_open + 1,\n accumulatedSum: uniqueValuesMap.get(day_of_week).accumulatedSum + revenue\n });\n } else {\n uniqueValuesMap.set(day_of_week, {\n number_of_days_open: 1,\n accumulatedSum: revenue\n });\n }\n });\n\n const uniqueValuesArray = Array.from(uniqueValuesMap.entries());\n\n return uniqueValuesArray;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1915,"value":"We obtain the accumulated sum, as well as how many days the stores have been open. We clean the format. ","pinned":false,"hidden":false,"mode":"md"},{"id":1546,"value":"weekdays2=getUniqueValuesWithAccumulatedSumWeek(daily_orders_product)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1552,"value":"weekdays3 =weekdays2.map(([day_of_week, { number_of_days_open, accumulatedSum }]) => ({\n day_of_week,\n accumulatedSum,\n number_of_days_open\n}));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1913,"value":"We divide the columns to obtain the daily income. ","pinned":false,"hidden":false,"mode":"md"},{"id":1907,"value":"weekday= weekdays3.map(d => ({\n day_of_week: d.day_of_week,\n daily_revenue: parseFloat((d.accumulatedSum / d.number_of_days_open).toFixed(2)),\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1510,"value":"---\nThird question:\n","pinned":false,"hidden":false,"mode":"md"},{"id":1871,"value":"We are going to map where the shops are located. Ideally we would use a geojson of the population density. Unfortunately, I didn't found one, so we improvise. First, we use the following geojson, which represents the california counties. This allows us to put the shops in their geographical location. Next, we superimpose an appropiate map of the population density, adjusting it to our geojson. Then we make the geojson transparent, and voilà!, we got our density map with geographically correct shop locations. ","pinned":false,"hidden":false,"mode":"md"},{"id":1521,"value":"cal_counties=d3.json(\"https://gis-calema.opendata.arcgis.com/datasets/59d92c1bf84a438d83f78465dce02c61_0.geojson?outSR=%7B%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%7D\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1862,"value":"We create a transparent color for our graphic axis.","pinned":false,"hidden":false,"mode":"md"},{"id":1845,"value":"import {colorOpacity} from '@mootari/color-opacity'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1852,"value":"colores=colorOpacity({ max: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"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":360,"value":"---\n## Visual answers","pinned":false,"hidden":false,"mode":"md"},{"id":1994,"value":"In the following graphic we can see the pizzas sold. The are ordered form the most popular (veggie), to the least (meat), in clockwise manner. The graph is clickable and zoomable, so you can see the exact numbers. Click the center to zoom out. ","pinned":false,"hidden":false,"mode":"md"},{"id":2002,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1997,"value":"In this graphic we see the daily weekly revenue. Accentuated in red we find the two slowest days.","pinned":false,"hidden":false,"mode":"md"},{"id":913,"value":"Plot.plot({ \n title: \"Daily revenue by weekday\",\n marginLeft: 60,\n x: {reverse: true, label: \"\"},\n y: { grid: true, label: \"Revenue ($)\" },\n marks: [\n Plot.barY(weekday, {\n y: 'daily_revenue',\n x: 'day_of_week',\n tip: {\n format: {\n fill: false,\n name: true,\n daily_revenue: false,\n }\n },\n fill: (d) => (d.day_of_week === 'Wednesday' || d.day_of_week === 'Thursday'? \"red\" : \"black\"),\n channels: {daily_revenue: {value: 'daily_revenue'}, order: \"descending\"},\n sort: {x: 'daily_revenue'}\n }),\n Plot.ruleY([0]) \n ]\n}) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1999,"value":"In the following graphic, we see in purple the locations of the company stores. The map reflects the population density in CA. Note how there is no store around the Los Angeles-Orange-San Diego area. ","pinned":false,"hidden":false,"mode":"md"},{"id":914,"value":"Plot.plot({\n title: \"Store location in CA\",\n city: {legend: true},\n marginLeft: 116,\n marginTop: 16,\n marginBottom: 30,\n width: 900,\n height: 910,\n x: {label: \"East\"},\n y: {label: \"North\"},\n style: {\n padding: 10,\n color: \"black\",\n background: `url(${await FileAttachment(\"imageedit_3_9594925531.png\").url()})`,\n backgroundSize: \"cover\",\n marginBottom: 300,\n },\n marks: [\n Plot.geo(cal_counties, { strokeOpacity: 0 }),\n Plot.dot(stores, {x: \"longitude\", y: \"latitude\", fill: \"#d002ad\", r: 10, channels: {'Store in': \"city\"}, tip: {format:{x: false, y:false, city: true }}}),\n Plot.axisX({\n stroke: \"white\",\n textStroke: \"white\",\n textStrokeOpacity: 0,\n color: \"colores\"\n }),\n Plot.axisY({\n stroke: \"white\",\n textStroke: \"white\",\n textStrokeOpacity: 0,\n color: \"colores\"\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"}],"files":"$W30","stdlib":"1","titling":"auto"}