2c:null 2d:["$","title",null,{"children":"Exercise 2: Data questions, visual answers | UdG | Master's in Data Science | Observable"}] 32:T521,function calculateMeanRevenues() { // Group data by month and category const groupedData = {}; daily_orders_product_copy.forEach(order => { // Here I get the Year and the Month of the order const year = order.order_date.getFullYear(); const month = order.order_date.getMonth() + 1; // We add 1 because months go from 0 to 11 // Here I create an identifier for the agrupation, like Category_Year-Month const group_id = `${order.category}_${year}-${month}`; console.log(group_id); // Here I create the aggrupations of category-year-month if (!groupedData[group_id]) { groupedData[group_id] = { totalRevenue: 0, count: 0, date: new Date(year, month - 1, 1).toISOString().split('T')[0], category: order.category }; } // Add the revenues to the total groupedData[group_id].totalRevenue += order.revenue; groupedData[group_id].count++; }); // Get de means and create dataset const averageRevenueByCategoryAndMonthYear = Object.values(groupedData).map(group => { return { Category: group.category, Date: group.date, MeanRevenue: group.totalRevenue / group.count }; }); return averageRevenueByCategoryAndMonthYear; } 33:T51d,Plot.plot({ // General config title: "Total revenue by city compared to the median", width: 1200, margin: 100, height: 750, label: null, x: { axis: "top", margin: 50, label: "← Below Average · Difference from Average Revenue · Above Average →", labelAnchor: "center", tickFormat: d3.format(".0f"), }, color: { scheme: "RdBu", // Red and Blue type: "categorical" }, marks: [ // Create the bars for each city Plot.barX(cityRevenueComparison, { x: "differenceFromAverage", y: "city", fill: (d) => d.differenceFromAverage > 0, sort: { y: "x" } }), Plot.gridX({ stroke: "white", strokeOpacity: 0.5 }), d3.groups(cityRevenueComparison, (d) => d.differenceFromAverage > 0) .map(([aboveAverage, cities]) => [ Plot.axisY({ x: 0, ticks: cities.map((d) => d.city), tickSize: 0, anchor: aboveAverage ? "left" : "right" }), Plot.textX(cities, { x: "differenceFromAverage", y: "city", text: ((f) => (d) => f(d.differenceFromAverage))(d3.format(".2f")), textAnchor: aboveAverage ? "start" : "end", dx: aboveAverage ? 4 : -4, }) ]), Plot.ruleX([0]) // Line that indicates the mean ] })34:T81d,function CreatePlot() { // Start and end of the plot const start = d3.utcDay.offset(d3.min(daily_orders_product, (d) => d.order_date)); // exclusive const end = d3.utcDay.offset(d3.max(daily_orders_product, (d) => d.order_date)); // exclusive // CREATING THE PLOT const plot = Plot.plot({ width: 1152, height: d3.utcYear.count(start, end) * 160, axis: null, padding: 0, marginTop: 50, //marginBottom:75, x: { domain: d3.range(53) }, y: { axis: "left", domain: [-1, 0, 1, 2, 3, 4, 5, 6], // DAYS OF WEEK TO SHOW ticks: [0, 1, 2, 3, 4, 5, 6], tickSize: 0, tickFormat: Plot.formatWeekday() }, fy: { padding: 0.1, reverse: true }, marks: [ // DRAWING THE YEAR LABELS Plot.text( d3.utcYears(d3.utcYear(start), end), calendar({text: d3.utcFormat("%Y"), frameAnchor: "right", x: 0, y: -1, dx: -20}) ), // DRAWING THE MONTH LABELS Plot.text( d3.utcMonths(d3.utcMonth(start), end).map(d3.utcMonday.ceil), calendar({text: d3.utcFormat("%b"), frameAnchor: "left", y: -1}) ), // DRAWING A CELL FOR EACH DAY WITH THE CORRESPONDING COLOR Plot.cell( daily_orders_product, calendar({ date: "order_date", fill: (d) => { const year = d.order_date.getUTCFullYear(); const deviation = d.revenue - medianRevenuePerYear[year]; return colorBasedOnDeviation(deviation); } }) ), // DRAW MONTH SEPARATORS 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}) ), // DRAW THE DAY NUMBERS ON THE CELLS Plot.text( d3.utcDays(start, end), calendar({text: d3.utcFormat("%-d")}) ) ] }); // ADDING THE CUSTOM LEGEND TO THE PLOT addLegendToPlot(plot); return plot; } 35:[] 30:{"id":"b2bb05998fe992cb","slug":null,"title":"Exercise 2: Data questions, visual answers","thumbnail":"819e3b3dd6caaf9cb425d63d197c6bd11b881d537f3b6156c21c06a8d29d7310","access_level":"public","create_time":"$D2023-12-10T13:56:21.255Z","update_time":"$D2023-12-14T18:43:20.432Z","view_time":null,"first_public_time":"$D2023-12-10T13:56:21.255Z","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":1621,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b3eaefcf93582d6b","login":"quim-lloret","name":"Quim Lloret","avatar_url":"https://avatars-next.observableusercontent.com/76035b4b87fffe29b43a3ec1fc04e4f92bc0e5be2f825d80832d9691ab53b1e6","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":[],"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":1008,"value":"daily_orders_product","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","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\n

","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":1361,"value":"---\n### For the first question\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1338,"value":"For the first question, I need to join the **daily_orders** and the **stores** datasets.\n\nTo do so, I created a function that left joins them by the id of the store:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1036,"value":"function joinDatasets(dailyOrders, stores)\n{\n return dailyOrders.map(order => {\n const store = stores.find(s => s.id === order.store_id);\n return store ? { ...order, ...store } : order;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"Now, using this function, I can create the new dataset, which I named **dailyOrders_stores**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1038,"value":"dailyOrders_stores = joinDatasets(daily_orders, stores);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"Now, to find out how if the cities are above or below the average revenue, I created the following function, which returns the cities with their revenue relative to the average (negative if they are below and positive if they are above)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1060,"value":"function getDifferenceFromMean()\n{\n const totalRevenue = dailyOrders_stores.reduce((sum, order) => sum + order.revenue, 0);\n const averageRevenue = totalRevenue / stores.length;\n const revenueByCity = {};\n \n dailyOrders_stores.forEach(item => {\n \n if (!revenueByCity[item.city]) revenueByCity[item.city] = 0;\n revenueByCity[item.city] += item.revenue;\n \n });\n\n const cityRevenueComparison = [];\n \n for (const city in revenueByCity)\n {\n cityRevenueComparison.push({\n city,\n differenceFromAverage: revenueByCity[city] - averageRevenue\n });\n }\n \n return cityRevenueComparison;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"Now we can get the cities and thier revenue relative to the average:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1373,"value":"cityRevenueComparison = getDifferenceFromMean();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"We can see that we have some cities above and some below the average, with a total of 16 cities. We will use this array to generate the corresponding Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1363,"value":"----\n### For the second question","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1380,"value":"For the second question I will only work with the first dataset, the daily_orders_product.\nSince I am a little supertitious, I rather to make a copy of it and work with the copy so I don't modify the original in case I need it later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1291,"value":" daily_orders_product_copy = daily_orders_product.map(d => ({\n ...d,\n order_date: new Date(d.order_date) // Copy the data too\n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"Now I will create a function called calculateMedianRevenues that will create a dataset with the median revenue of each month and category. Since we have three categories, it will be three rows for each month of each year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1245,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"And now we can call the function to get the dataset, which I'll use for crafting thw Plot for the second question.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1258,"value":"monthlyMedianRevenuesPerCategory = calculateMeanRevenues();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"The reason behind this is that I already had in mind that I wanted to create a line plot with a line for each category where the X axis represents the order_date. I created a simple plot but I ran into an issue. Since there were so many registers in the dataset for each day of the year, the lines of each category were so chaotic and it made the plot unreadable. Thats why I decided to group them by month so there would be much less points making the lines recognizable and interpretable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1378,"value":"---\n### For the third question","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1394,"value":"I was thinking which type of plot could answer this question in the best way possible, and I think I found the ideal one, It consists of a calendar for each one pof the years. See the results here.\n\nBefore that, I need to transform the data as I need it to be. Thats why I created two new functions that will help me to achieve it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1396,"value":"The first function is called **calculateMeanRevenueByYear** and it returns the average revenue of each one of the years:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1313,"value":"function calculateMeanRevenueByYear()\n{\n // Group by year\n const groupedByYear = d3.group(daily_orders_product, d => d.order_date.getUTCFullYear());\n\n // Get de mean of revenue for each group\n const medianRevenueByYear = {};\n groupedByYear.forEach((values, year) => {\n let revenues = values.map(d => d.revenue);\n medianRevenueByYear[year] = d3.median(revenues);\n });\n\n return medianRevenueByYear;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"Now I can get those median revenues per year simply calling the function. And I will use the results to Plot the answer for the question.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1317,"value":"medianRevenuePerYear = calculateMeanRevenueByYear();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"The second function is called colorBasedOnDeviation and it returns a color depending on a deviation passed by parameter. I will use it for painting the days of the calendars. If their revenue is above the average they will be colored in a scale of greens (the darker, the higher) and if their revenue is below they will be colored in a scale of reds (the darker, the lower)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1323,"value":"function colorBasedOnDeviation(deviation)\n{\n if (deviation > 0)\n {\n // REVENUE HIGHER THAN MEAN\n if (deviation > 10000) return \"darkgreen\"; // GREAT POSITIVE DESVIATION\n else if (deviation > 5000) return \"green\"; // MODERATE POSITIVE DESVIATION\n else return \"lightgreen\"; // LOW POSITIVE DESVIATION\n }\n else\n {\n // REVENUE LOWER THAN MEAN\n if (deviation < -10000) return \"darkred\"; // GREAT NEGATIVE DESVIATION\n else if (deviation < -5000) return \"red\"; // MODERATE NEGATIVE DESVIATION\n else return \"pink\"; // LOW NEGATIVE DESVIATION\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"I created this custom legend according the colors of the previous function, I will include it in de plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1426,"value":"legendData = [\n { color: \"darkgreen\", label: \"Above 10000 more\" },\n { color: \"green\", label: \"Between 5000 and 10000 more\" },\n { color: \"lightgreen\", label: \"Below 5000 more\" },\n { color: \"pink\", label: \"Below 5000 less\" },\n { color: \"red\", label: \"Between 5000 and 10000 less\" },\n { color: \"darkred\", label: \"Above 10000 less\" }\n];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1467,"value":"And this function that adds this legend to a a plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1469,"value":"function addLegendToPlot(plot)\n{\n const svg = d3.select(plot);\n const legend = svg.append(\"g\")\n .attr(\"class\", \"legend\")\n .attr(\"transform\", `translate(10, ${0})`);\n\n let offsetX = 75;\n const spacing = 150; // Spacing between legend items\n\n legendData.forEach((item, index) => {\n \n const group = legend.append(\"g\")\n .attr(\"transform\", `translate(${offsetX}, 0)`);\n\n group.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"width\", 18)\n .attr(\"height\", 18)\n .style(\"fill\", item.color);\n\n group.append(\"text\")\n .attr(\"x\", 90)\n .attr(\"y\", 9)\n .attr(\"dy\", \".35em\")\n .text(item.label);\n\n offsetX += 20 + spacing;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"To generate the Plot, I also need to create two auxiliar classes that represent a calendar and the seperator between months. I didn't create this classes, I simply get them from the Observable HQ Examples:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1302,"value":"class MonthLine extends Plot.Mark\n{\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"function 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"---\n## Visual answers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":878,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":913,"value":"Plot.plot({\n title: \"Average revenue per month and category\",\n style: \"overflow: visible\",\n x: {\n type: \"time\",\n format: \"%b %Y\", // 'Ene 2023'\n },\n y: {grid: true},\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(monthlyMedianRevenuesPerCategory , {x: \"Date\", y: \"MeanRevenue\", stroke: \"Category\", tip:\"x\"}),\n Plot.text(monthlyMedianRevenuesPerCategory , Plot.selectLast({x: \"Date\", y: \"MeanRevenue\", z: \"Category\", text: \"Category\", textAnchor: \"start\", dx: 3}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1614,"value":"

Deviation of each day's revenue from the average of the year

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1476,"value":"CreatePlot();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"$34","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"