2c:null 2d:["$","title",null,{"children":"Exercise 4: Look ma! It's interactive | UdG | Master's in Data Science | Observable"}] 32:T575,--- ## Context Our competitors have recently expanded their offerings with more size options and more recipes. We think our business strategy needs to go the other direction and reduce what we offer our customers. We have been tasked with creating an exploratory interactive visualization to decide what to drop. The tool will be used by the manager of operations and the principal data scientist to make initial decisions and craft their presentation to the members' assembly. _(They may ask us to expand on some of those visualizations, add annotation, and highlight insights later, but only the bare minimum to understand the tool for now.)_ **Some things we are interested in:** * Which combinations are most profitable? * Does our size structure make sense? * Has there been any decline (or the reverse, an upward trend) in any of our offerings lately? * Are there any patterns depending on the weekday? **The visualization will need to have:** * At least one `Plot` ... Duh! * At least two `Inputs`. * Use color as a visual variable. * Remember that the initial state of the visualization needs to show something already — the interaction remaps the data, filters it, or drills into the view. **Extra credit:** * Create a composite view like [this one](https://observablehq.com/@ambassadors/interactive-plot-dashboard#miniPlots) from [Eric Lo](https://observablehq.com/@analyzer2004). 33:T1178,//https://observablehq.com/@d3/zoomable-treemap AdvancedTreemap = { // Specify the chart’s dimensions. const width = 928; const height = 924; // This custom tiling function adapts the built-in binary tiling function // for the appropriate aspect ratio when the treemap is zoomed-in. function tile(node, x0, y0, x1, y1) { d3.treemapBinary(node, 0, 0, width, height); for (const child of node.children) { child.x0 = x0 + child.x0 / width * (x1 - x0); child.x1 = x0 + child.x1 / width * (x1 - x0); child.y0 = y0 + child.y0 / height * (y1 - y0); child.y1 = y0 + child.y1 / height * (y1 - y0); } } // Compute the layout. const hierarchy = d3.hierarchy(pizzas) .sum(d => d.value) .sort((a, b) => b.value - a.value); const root = d3.treemap().tile(tile)(hierarchy); // Create the scales. const x = d3.scaleLinear().rangeRound([0, width]); const y = d3.scaleLinear().rangeRound([0, height]); // Formatting utilities. const format = d3.format(",d"); const name = d => d.ancestors().reverse().map(d => d.data.name).join("/"); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0.5, -30.5, width, height + 30]) .attr("width", width) .attr("height", height + 30) .attr("style", "max-width: 100%; height: auto;") .style("font", "24px sans-serif"); // Display the root. let group = svg.append("g") .call(render, root); function render(group, root) { const node = group .selectAll("g") .data(root.children.concat(root)) .join("g"); node.filter(d => d === root ? d.parent : d.children) .attr("cursor", "pointer") .on("click", (event, d) => d === root ? zoomout(root) : zoomin(d)); node.append("title") .text(d => { console.log("texto:", name(d)); console.log("valor:", format(d.value)); `${name(d)} - ${format(d.value)}` }); node.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) //.attr("fill", d => d === root ? "#fff" : d.children ? "#ccc" : "#ddd") .attr("fill", d => d === root ? "#fff" : colorTree(d.data.name)) .attr("stroke", "#fff"); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .attr("font-weight", d => d === root ? "bold" : null) .selectAll("tspan") .data(d => (d === root ? name(d) : d.data.name).split(/(?=[A-Z][^A-Z])/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null) .text(d => d); group.call(position, root); } function position(group, root) { group.selectAll("g") .attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`) .select("rect") .attr("width", d => d === root ? width : x(d.x1) - x(d.x0)) .attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0)); } // When zooming in, draw the new nodes on top, and fade them in. function zoomin(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.append("g").call(render, d); x.domain([d.x0, d.x1]); y.domain([d.y0, d.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .call(position, d.parent)) .call(t => group1.transition(t) .attrTween("opacity", () => d3.interpolate(0, 1)) .call(position, d)); } // When zooming out, draw the old nodes on top, and fade them out. function zoomout(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.insert("g", "*").call(render, d.parent); x.domain([d.parent.x0, d.parent.x1]); y.domain([d.parent.y0, d.parent.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .attrTween("opacity", () => d3.interpolate(1, 0)) .call(position, d)) .call(t => group1.transition(t) .call(position, d.parent)); } return svg.node(); }34:T583,viewof CurrentVariety = { const heatMap = d3.select( Plot.plot({ width: 1000, marginLeft: 75, color: { scheme: "reds" }, marks: [ Plot.cell(year_revenue_by_product, { x: d => d.variety, y: d => d.size, fill: "total_revenue" }) ] }) ); let timeout, focus = null; const rect = heatMap.selectAll("rect"); heatMap .on("click", handleClick) .style("cursor", "pointer"); function handleClick(e) { const index = getTargetIndex(e); if (focus === index) { focus = null; return; } if (index >= 0) { focus = index; updateProduct(lookupProduct(index)); } else { focus = null; updateProduct(null); } } function getTargetIndex(e) { let tar = e.target; if (tar instanceof SVGTSpanElement) tar = tar.parentElement; return tar instanceof SVGTextElement || tar instanceof SVGRectElement ? [...tar.parentElement.children].indexOf(tar) : -1; } function lookupProduct(index) { return [year_revenue_by_product[index].variety, year_revenue_by_product[index].size]; } function updateProduct(product) { finalHMap.value = product; finalHMap.dispatchEvent(new CustomEvent("input")); } const finalHMap = html`

${heatMap.node()}

`; updateProduct(null); return finalHMap; }35:T6ed,variety_lineplot = Plot.plot({ width: width, height: 420, marginRight: 120, x: {label: "Date"}, y: {label: "Acumulated revenue per week"}, marks: [ Plot.lineY(daily_orders_categorized, Plot.binX({y: 'sum'}, { filter: (d) => (selectedVariety==="All" || d.variety === selectedVariety), x: "date", y: "revenue", z: "size", curve: "basis", stroke: "#C0C0C0", tip: x, interval: d3.utcWeek })), Plot.lineY(daily_orders_categorized, Plot.binX({y: 'sum'}, { filter: (d) => (selectedVariety!=="All" && d.variety === selectedVariety && d.size === selectedSize), x: "date", y: "revenue", stroke: "red", strokeWidth: 3, curve: "basis", interval: d3.utcWeek })), Plot.dot( daily_orders_categorized, Plot.selectLast( Plot.binX( { y: "sum" }, { filter: (d) => (selectedVariety!=="All" && d.variety === selectedVariety && d.size === selectedSize), x: "date", y: "revenue", z: "size", curve: "basis", interval: d3.utcWeek, fill: "red", r: 5 } ) ) ), Plot.text( daily_orders_categorized, Plot.selectLast( Plot.binX( { y: "sum" }, { filter: (d) => (selectedVariety!=="All" && d.variety === selectedVariety && d.size === selectedSize), x: "date", y: "revenue", z: "size", curve: "basis", interval: d3.utcWeek, fill: "red", dx: 10, textAnchor: "start", text: d => d[0].size, fontWeight: "bold" } ) ) ) ] })36:T6b3,viewof weekChart = { const barchart = d3.select( Plot.plot({ marginLeft: 60, x: { label: '', domain: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] }, y: { label: "Total revenue per weekday" }, color: { domain: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], scheme: "RdPu", legend: false }, marks: [ Plot.barY(weekly_revenue_per_year, { x: "weekday", y: "total_revenue", fill: "weekday" }), Plot.ruleY([0]), Plot.axisX({fontSize: 10}), Plot.axisY({fontSize: 10}) ] }) ); let timeout, focus = null; const rect = barchart.selectAll("rect"); barchart .on("click", handleClick) .style("cursor", "pointer"); function handleClick(e) { const index = getTargetIndex(e); if (focus === index) { focus = null; return; } if (index >= 0) { focus = index; updateProduct(lookupProduct(index)); } else { focus = null; updateProduct(null); } } function getTargetIndex(e) { let tar = e.target; if (tar instanceof SVGTSpanElement) tar = tar.parentElement; return tar instanceof SVGTextElement || tar instanceof SVGRectElement ? [...tar.parentElement.children].indexOf(tar) : -1; } function lookupProduct(index) { console.log("clicked:index:", index) return weekly_revenue_per_year[index].weekday_id; } function updateProduct(weekday) { finalWchart.value = weekday; finalWchart.dispatchEvent(new CustomEvent("input")); } const finalWchart = html`

${barchart.node()}

`; updateProduct(null); return finalWchart; }37:T5b3,datevalues = { const datevals =[] const totalpizzas = new Map() var tempPizza = new Map() var curPizza = [] var curDate var iniDate = new Date(2000, 0, 1, 12, 0, 0, 0) var lastDate = iniDate var tempRevenue = 0 var pizzaName //filtre const filtered_monthly_rev = monthly_revenue_by_product.filter(item => item.year >= yearMin && item.year <= yearMax) //recorro dataset filtered_monthly_rev.forEach(elemento => { curDate = new Date(elemento.year, elemento.month-1, 1, 12, 0, 0, 0) //canvi de data if (curDate.toISOString() != lastDate.toISOString() && lastDate != iniDate) { curPizza.push(new Date(curDate.toISOString()), tempPizza) datevals.push(curPizza) tempPizza = new Map() } curPizza = [] lastDate = curDate if (grouping === 'Variety') { pizzaName = elemento.variety }else if (grouping === 'Size'){ pizzaName = elemento.size }else if (grouping === 'Category') { pizzaName = elemento.category }else { pizzaName = elemento.name } //dada acumulada if (totalpizzas.has(pizzaName)) { tempRevenue = totalpizzas.get(pizzaName) }else{ tempRevenue = 0 } tempRevenue += elemento.total_revenue tempPizza.set(pizzaName, tempRevenue) totalpizzas.set(pizzaName, tempRevenue) }); curPizza.push(new Date(curDate.toISOString()), tempPizza) datevals.push(curPizza) return datevals; }38:T591,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan") .textTween((d) => d3.interpolateRound(d.value, (next.get(d) || d).value)) ) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan") .textTween((d) => (t) => formatNumber( d3.interpolateNumber((prev.get(d) || d).value, d.value)(t) )) ) ) }39:T46f,function getPizzaChilds(weekday = -1) { const pizzaChilds =[] var curVariety = [] var thisVariety var tempVariety = '' var filtered_dataset if (weekdayList == "*") { filtered_dataset = year_revenue_grouped }else{ filtered_dataset = weekday_revenue_product } //recorro dataset filtered_dataset.forEach(elemento => { //console.log(`elemento: ${elemento.variety} - ${elemento.size}`) if (tempVariety != elemento.variety && tempVariety!='') { thisVariety = {name: tempVariety, children: curVariety} //console.log("PUSH PIZZA:", tempVariety) pizzaChilds.push(thisVariety) curVariety = [] } tempVariety = elemento.variety const thisSize = {name: elemento.size, value: elemento.total_revenue} //console.log("PUSH SIZE:", elemento.size, elemento.total_revenue) curVariety.push(thisSize) }); thisVariety = {name: tempVariety, children: curVariety} //console.log("PUSH PIZZA:", tempVariety) pizzaChilds.push(thisVariety) const rootelement = {name: "All varietys and sizes", children: pizzaChilds} return rootelement; }3a:[] 30:{"id":"d69d03e61f903dc3","slug":null,"title":"Exercise 4: Look ma! It's interactive","thumbnail":"06ce88e25e9e6d01ddea0df68b5e4b2924111d149f6771987356dc6c296f79b6","access_level":"public","create_time":"$D2024-01-03T13:16:49.141Z","update_time":"$D2024-08-30T11:25:05.439Z","view_time":null,"first_public_time":"$D2024-01-03T13:16:49.141Z","has_unpublished_edits":null,"fork":{"id":"89d00250a2bf1c63","slug":"exercise-4-look-ma-its-interactive","title":"Exercise 4: Look ma! It's interactive","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":1398,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a59d6e7b0b9bfae4","login":"jordi-fornos","name":"Jordi Fornós","avatar_url":"https://avatars-next.observableusercontent.com/38fcc598550ab1593a12b5a2b4ab980b33f8501289bf10bd9751dfe211dca9ab","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":"afcae14ddc4e7a4c","reply_to_id":null,"content":"I think that, even though they're static and less exciting, your charts below are more revelatory. So I'm choosing to evaluate those instead of this one 🤪","create_time":"$D2024-01-12T10:08:19.560Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null}},{"id":"c1edbd21b66f12e8","reply_to_id":"afcae14ddc4e7a4c","content":"🤦🏻‍♂️D'oh!","create_time":"$D2024-01-13T10:32:38.368Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a59d6e7b0b9bfae4","login":"jordi-fornos","name":"Jordi Fornós","avatar_url":"https://avatars-next.observableusercontent.com/38fcc598550ab1593a12b5a2b4ab980b33f8501289bf10bd9751dfe211dca9ab","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Exercise 4: Look ma! It's interactive","cells":[{"id":0,"value":"# Exercise 4: _Look ma!_ It's interactive\n\n“Tell me and I forget, teach me and I may remember, involve me and I learn”. This exercise is all about **how to reveal patterns** using `Inputs`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"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":52,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":646,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1263,"value":"## Revenue exploration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"viewof dateInterval = rangeSlider({\n min : 2020,\n max : 2022,\n step : 1,\n value : [2020, 2022],\n title : \"Select a date range for the revenue analysis\",\n description: \"(All the charts below will take into account the selected range)\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"---\n### Revenue \"r\"evolution\n\nSee the evolution, trends and declines of products, varieties, sizes and categories through the years with this Revenue Race Chart.\n\n(You can select the top elements to see, the speed of the chart and the group selection)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"viewof racebarviews = Inputs.form({\n topX: Inputs.range([2, maxsize], {label: html`View the TOP`, value: 10, step: 1}),\n speedX: Inputs.radio(['Low','Medium', 'High', 'Ludicrous Speed!'], {label: html`Need for SPEED`, value: 'High'})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"viewof grouping = Inputs.radio([\"Category\", \"Variety\", \"Size\", \"Product\"], {label: html`Group selection by`, value: \"Product\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"viewof replay = Inputs.button(html`

Replay chart

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"mainPlot = html`\n

${racebarchart}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"bodyPlots = html`\n

Product revenue Heatmap by variety and size ${yearMin} - ${yearMax}

(It shows the relative distribution among varieties and sizes. Select one product and you will see the details below)

${[viewof CurrentVariety]}

\n Selected variety: ${selectedVariety}
\n Selected size: ${selectedSize}

${[variety_lineplot]}

${arrowPlot}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"---\n### Revenue distribution along the weekdays and variety and size proportion for each day\n(${yearMin} - ${yearMax})\n\n(select a weekday to inspect the varieties sold and select a variety to watch the sizes)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1260,"value":"headerPlots = html`

${[viewof weekChart]}

${AdvancedTreemap}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"---\n## Support material","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1049,"value":"---\n### Advanced Treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"---\n### Kindof HeatMap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"---\n### Racebar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"racebarchart = {\n replay;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, rbar_width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateTicker = ticker(svg);\n\n yield svg.node();\n\n for (const keyframe of keyframes) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n\n // Extract the top bar’s value.\n x.domain([0, keyframe[1][0].value]);\n\n updateAxis(keyframe, transition);\n updateBars(keyframe, transition);\n updateLabels(keyframe, transition);\n updateTicker(keyframe, transition);\n\n invalidation.then(() => svg.interrupt());\n await transition.end();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"---\n### Variety lineplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":949,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":940,"value":"### Weekday barchart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"---\n#### Addendum: data, libraries, other ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1314,"value":"arrowPlot = Plot.plot({\n marginLeft: 60,\n x: {\n label: \"Number of orders\"\n },\n y: {\n label: \"Total revenue\"\n },\n color: {\n scheme: \"BuRd\",\n label: \"Variety Sales Evolution\",\n legend: true,\n tickFormat: \"+f\"\n },\n marks: [\n Plot.arrow(revenue_year_arrows, {\n filter: d => d.variety == selectedVariety,\n x1: \"ord2020\",\n y1: \"rev2020\",\n x2: \"ord2022\",\n y2: \"rev2022\",\n stroke: (d) => d.rev2022 - d.rev2020,\n bend: true\n }),\n Plot.text(revenue_year_arrows, {\n filter: d => d.variety == selectedVariety,\n x: \"ord2022\",\n y: \"rev2022\",\n text: d => `${d.variety} - ${d.size}`,\n fontsize: 14,\n fill: \"black\",\n dy: -10,\n dx: 5\n }),\n Plot.axisX({fontSize: 10}),\n Plot.axisY({fontSize: 10})\n ]\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"stores","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"daily_orders_product","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"daily_orders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"daily_orders_product","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"daily_orders","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"SELECT name, TRIM(SUBSTRING(name, 1, INSTR(name, 'Pizza') - 1)) as variety, TRIM(SUBSTRING(name, INSTR(name, 'Pizza') + 5)) as size, category, YEAR(order_date) as year, MONTH(order_date) as month, SUM(revenue) as total_revenue,\nCONCAT(MONTH(order_date), '-1-', YEAR(order_date)) AS primer_dia_del_mes, CONCAT(YEAR(order_date), '-', LPAD(CAST(MONTH(order_date) AS CHAR), 2, '0')) AS ord_data\nFROM daily_orders_product\nGROUP BY name, year, month, variety, size, category\nORDER BY year, month, total_revenue","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"monthly_revenue_by_product","database":"var:daily_orders_product"},{"id":478,"value":"monthly_revenue_by_product","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"SELECT TRIM(SUBSTRING(name, 1, INSTR(name, 'Pizza') - 1)) as variety, TRIM(SUBSTRING(name, INSTR(name, 'Pizza') + 5)) as size, category, YEAR(order_date) as year, SUM(revenue) as total_revenue\nFROM daily_orders_product\nWHERE YEAR(order_date) BETWEEN ${yearMin} AND ${yearMax}\nGROUP BY variety, size, year, category\nORDER BY year, variety, size","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"year_revenue_by_product","database":"var:daily_orders_product"},{"id":1330,"value":"SELECT \n TRIM(SUBSTRING(name, 1, INSTR(name, 'Pizza') - 1)) as variety,\n TRIM(SUBSTRING(name, INSTR(name, 'Pizza') + 5)) as size,\n category,\n SUM(CASE WHEN YEAR(order_date) = 2020 THEN revenue ELSE 0 END) as rev2020,\n SUM(CASE WHEN YEAR(order_date) = 2021 THEN revenue ELSE 0 END) as rev2021,\n SUM(CASE WHEN YEAR(order_date) = 2022 THEN revenue ELSE 0 END) as rev2022,\n SUM(CASE WHEN YEAR(order_date) = 2020 THEN orders ELSE 0 END) as ord2020,\n SUM(CASE WHEN YEAR(order_date) = 2021 THEN orders ELSE 0 END) as ord2021,\n SUM(CASE WHEN YEAR(order_date) = 2022 THEN orders ELSE 0 END) as ord2022\n\nFROM daily_orders_product\nGROUP BY variety, size, category\nORDER BY variety, size, category;","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"revenue_year_arrows","database":"var:daily_orders_product"},{"id":1114,"value":"SELECT TRIM(SUBSTRING(name, 1, INSTR(name, 'Pizza') - 1)) as variety, TRIM(SUBSTRING(name, INSTR(name, 'Pizza') + 5)) as size, category, SUM(revenue) as total_revenue\nFROM daily_orders_product\nWHERE YEAR(order_date) BETWEEN ${yearMin} AND ${yearMax}\nGROUP BY variety, size, category\nORDER BY variety, size, total_revenue","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"year_revenue_grouped","database":"var:daily_orders_product"},{"id":119,"value":"function get_revenue_by_product(year=-1) {\n if (year===-1) {\n return year_revenue_by_product.filter(item => item.year >= yearMin && item.year <= yearMax) \n }else{\n return year_revenue_by_product.filter(item => item.year === year) \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"revenue_by_product_year = get_revenue_by_product()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"SELECT TRIM(SUBSTRING(name, 1, INSTR(name, 'Pizza') - 1)) as variety, TRIM(SUBSTRING(name, INSTR(name, 'Pizza') + 5)) as size, category, orders, revenue, order_date as date, (DAYOFWEEK(order_date)+1) as weekday\nFROM daily_orders_product\nORDER BY date, revenue","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"daily_orders_categorized","database":"var:daily_orders_product"},{"id":965,"value":"SELECT \n CASE DAYOFWEEK(order_date)\n WHEN 0 THEN 'Sunday'\n WHEN 1 THEN 'Monday'\n WHEN 2 THEN 'Tuesday'\n WHEN 3 THEN 'Wednesday'\n WHEN 4 THEN 'Thursday'\n WHEN 5 THEN 'Friday'\n WHEN 6 THEN 'Saturday'\n END AS weekday, \n CASE DAYOFWEEK(order_date)\n WHEN 0 THEN 7\n WHEN 1 THEN 1\n WHEN 2 THEN 2\n WHEN 3 THEN 3\n WHEN 4 THEN 4\n WHEN 5 THEN 5\n WHEN 6 THEN 6\n END AS weekday_id,\n SUM(revenue) as total_revenue\nFROM daily_orders_product\nWHERE YEAR(order_date) BETWEEN ${yearMin} AND ${yearMax}\nGROUP BY weekday, weekday_id\nORDER BY weekday_id","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"weekly_revenue_per_year","database":"var:daily_orders_product"},{"id":1151,"value":"SELECT TRIM(SUBSTRING(name, 1, INSTR(name, 'Pizza') - 1)) as variety, TRIM(SUBSTRING(name, INSTR(name, 'Pizza') + 5)) as size, category, SUM(revenue) as total_revenue\nFROM daily_orders_product\nWHERE DAYOFWEEK(order_date) IN (${weekdayList}) AND YEAR(order_date) BETWEEN ${yearMin} AND ${yearMax}\nGROUP BY variety, size, category\nORDER BY variety, size, total_revenue","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"weekday_revenue_product","database":"var:daily_orders_product"},{"id":1267,"value":"ventas_week = weekday_revenue_product","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"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":40,"value":"grading = [\n {value: 1, label: \"Total grade\", x: 0.65},\n {value: .3, label: \"Weekly exercises\", x: 0.1825},\n {value: .075, label: \"This\", x: 0.0375}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"import {BubbleChart} from \"@d3/bubble-chart-component\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"import {Treemap} from \"@d3/treemap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"---\n### General variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":710,"value":" yearMin = dateInterval[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"yearMax = dateInterval[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"selectedVariety = {\n if (!CurrentVariety) {\n return \"All\"\n }else{\n return CurrentVariety[0];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"selectedSize = {\n if (!CurrentVariety) {\n return \"None\"\n }else{\n return CurrentVariety[1];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"weekdayList = {\n if (!weekChart) {\n return \"*\"\n \n }else{\n return weekChart-1\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"---\n#### Advanced range selector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":691,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"---\n#### Functions and data for racebar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"n = racebarviews.topX","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"rbar_width = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"duration = {\n switch (racebarviews.speedX) {\n case \"Low\":\n return 500\n case \"Medium\":\n return 250\n case \"High\":\n return 100\n case \"Ludicrous Speed!\":\n return 50\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"d3.group(monthly_revenue_by_product, d=> d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"names = new Set(monthly_revenue_by_product.map(d=> {\n if (grouping == \"Variety\") {\n return d.variety\n }else if (grouping == \"Size\") {\n return d.size\n }else if (grouping == \"Category\") {\n return d.category\n }else{\n return d.name\n }\n}));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"maxsize = {\n switch (grouping) {\n case \"Variety\":\n return 9\n break;\n case \"Size\":\n return 4\n break;\n case \"Category\":\n return 3\n break;\n default:\n return 36\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"k = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n keyframes.push([\n new Date(ka * (1 - t) + kb * t),\n rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)\n ]);\n }\n }\n keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);\n return keyframes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function bars(svg) {\n let bar = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.6)\n .selectAll(\"rect\");\n\n return ([date, data], transition) => bar = bar\n .data(data.slice(0, n), d => d.name)\n .join(\n enter => enter.append(\"rect\")\n .attr(\"fill\", color)\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", d => y((prev.get(d) || d).rank))\n .attr(\"width\", d => x((prev.get(d) || d).value) - x(0)),\n update => update,\n exit => exit.transition(transition).remove()\n .attr(\"y\", d => y((next.get(d) || d).rank))\n .attr(\"width\", d => x((next.get(d) || d).value) - x(0))\n )\n .call(bar => bar.transition(transition)\n .attr(\"y\", d => y(d.rank))\n .attr(\"width\", d => x(d.value) - x(0)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"barSize = 48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"margin = ({top: 16, right: 6, bottom: 6, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"height = margin.top + barSize * n + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10)\n if (monthly_revenue_by_product.some(d => d.variety !== undefined)) {\n const categoryByName = new Map(monthly_revenue_by_product.map(d => [d.name, d.variety]))\n scale.domain(Array.from(categoryByName.values()));\n return d => {\n if (!categoryByName.get(d.name)) {\n return scale(d.name)\n }else{\n return scale(categoryByName.get(d.name))\n }\n }\n }\n return d => scale(d.name)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"formatNumber = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"formatDate = d3.utcFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"formatMonth = d3.utcFormat(\"%m\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .style(\"font\", `bold ${barSize}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", rbar_width - 6)\n .attr(\"y\", margin.top + barSize * (n - 0.45))\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(`${formatMonth(date)} / ${formatDate(date)}`));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"function axis(svg) {\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(0,${margin.top})`);\n\n const axis = d3.axisTop(x)\n .ticks(rbar_width / 160)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"---\n#### Functions and data fro zoomable treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"pizzas = getPizzaChilds()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"function colorTree(node_name) {\n //console.log(\"Name:\", node_name)\n \n const scale = d3.scaleOrdinal(d3.schemeTableau10)\n const varietyByName = new Map(monthly_revenue_by_product.map(d => [d.name, d.variety]))\n const sizeByName = new Map(monthly_revenue_by_product.map(d => [d.name, d.size]))\n\n //console.log(\"array:\",Array.from(varietyByName.values()))\n //console.log(\"array:\",Array.from(sizeByName.values()))\n const varietyArray = Array.from(varietyByName.values())\n const sizeArray = Array.from(sizeByName.values())\n \n if (sizeArray.includes(node_name)) {\n scale.domain(sizeArray); \n }else{\n scale.domain(varietyArray); \n }\n \n //console.log(\"Color:\", scale(node_name))\n return scale(node_name)\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"import {Icicle} from \"@d3/icicle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 31:"$30:body"