2c:null 2d:["$","title",null,{"children":"Exercise 4: Look ma! It's interactive | Albert Teixidó's Workspace | 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:T1649,viewof input_pizza = { const svg = d3.select(DOM.svg(width, 275)) .attr("font-family", "system-ui, sans-serif") .attr("font-size", "10") .attr("text-anchor", "middle"); svg.append("g").attr("aria-label", "fx-axis").call(xAxis); svg.append("g").attr("aria-label", "fy-axis").call(yAxis); const cells = svg.append("g") .attr("aria-label", "cells") .selectAll("g") .data(pizza_names.slice(1)) .enter().append("g") .attr("transform", d => `translate(0,${yAxisObject(d)})`); cells .selectAll("rect") .data(d => heatmap_pizza.filter(v => v.pizza_name == d)) .enter().append("rect") .attr("transform", d => `translate(${xAxisObject(d.size)},0)`) .attr("width" , xAxisObject.bandwidth()) .attr("height", yAxisObject.bandwidth()) .attr("fill" , d => colors(data_type == "Revenue"? d.revenue : d.orders)) const text = svg.append("g") .attr("aria-label", "text") .selectAll("g") .data(pizza_names.slice(1)) .enter().append("g") .attr("transform", d => `translate(0,${yAxisObject(d)})`); text .selectAll("rect") .data(d => heatmap_pizza.filter(v => v.pizza_name == d)) .enter().append("text") .attr("transform", d => `translate(${xAxisObject(d.size) + xAxisObject.bandwidth()/2}, ${yAxisObject.bandwidth() / 2 + 4})`) .attr("width" , xAxisObject.bandwidth()) .attr("height", yAxisObject.bandwidth()) .attr("fill" , "white") .text(d => `${d.pizza_name} ${d.size} ${data_type == "Revenue"? "$" + d.revenue.toLocaleString("en") : d.orders.toLocaleString("en")}`) let focus = null; svg .on("pointerover", highlight) .on("pointerout", restore) .on("click", handle_click) .style("cursor", "default"); const map = html`

${svg.node()}

${Legend(colors, {title: "Total revenue per pizza", tickFormat: "s", tickSize: 2})}

`; update_state(null); handle_click(null, {size: 3, name: 8}) return map; function highlight(e) { const index = get_target_index(e); if(index.name >= 0 && index.size >= 0) fill_cell(index, true, is_cell_focus(index)) else if(index.size < 0 && index.name >= 0) fill_row(index, true, true) else if(index.name < 0 && index.size >= 0) fill_column(index, true, true) } function restore(e) { const index = get_target_index(e); if(index.name >= 0 && index.size >= 0) fill_cell(index, false, is_cell_focus(index)) else if(index.size < 0 && index.name >= 0) fill_row(index, false, true) else if(index.name < 0 && index.size >= 0) fill_column(index, false, true) } function get_target_index(e) { const target = e.target; if(target instanceof SVGTextElement || target instanceof SVGRectElement) { const size = sizes.includes(target.textContent) ? [...target.parentElement.parentElement.children].indexOf(target.parentElement) : pizza_names.includes(target.textContent) ? -1 : [...target.parentElement.children].indexOf(target) const name = sizes.includes(target.textContent) ? -1 : [...target.parentElement.parentElement.children].indexOf(target.parentElement) return {size: size, name: name} } return {size: -1, name: -1}; } function fill_cell(index, hover, highlight) { const val = heatmap_pizza[index.name + index.size * (pizza_names.length - 1)] const color = highlight? "#B4FA9F" : colors(data_type == "Revenue"? val.revenue : val.orders) svg .select(`[aria-label="cells"]`) .select(`g:nth-child(${index.name + 1})`) .select(`rect:nth-child(${index.size + 1})`) .attr("fill", color) .attr("stroke", "#9FB4FA") .attr("stroke-width", hover ? 2 : 0); } function fill_row(index, hover, highlight) { for(let i in d3.range(sizes.length - 1)) { fill_cell({size: parseInt(i), name: index.name}, hover, highlight? is_cell_focus({size: parseInt(i), name: index.name}) : false) } } function fill_column(index, hover, highlight) { for(let i in d3.range(pizza_names.length - 1)){ fill_cell({size: index.size, name: parseInt(i)}, hover, highlight? is_cell_focus({size: index.size, name: parseInt(i)}) : false) } } function handle_click(e, index) { index = index? index : get_target_index(e); if (focus == index) { focus = null; return; } if (focus !== null) { if(focus.name >= 0 && focus.size >= 0) fill_cell(focus) else if(focus.size < 0 && focus.name >= 0) fill_row(focus) else if(focus.name < 0 && focus.size >= 0) fill_column(focus) } focus = index; if(index.name >= 0 && index.size >= 0) fill_cell(index, true, true) else if(index.size < 0 && index.name >= 0) fill_row(index, true, true) else if(index.name < 0 && index.size >= 0) fill_column(index, true, true) update_state(get_state(index)); if(index.name < 0 && index.size < 0) { focus = null; update_state(null); } } function is_cell_focus(index) { return focus !== null && ((focus.size == -1 && focus.name == index.name || focus.size != -1 && focus.name == index.name && focus.size == index.size) || (focus.name == -1 && focus.size == index.size || focus.name != -1 && focus.size == index.size && focus.name == index.name)); } function get_state(index) { return {size: sizes[index.size + 1], pizza_name: pizza_names[index.name + 1]} } function update_state(state) { map.value = state; map.dispatchEvent(new CustomEvent("input")); } }34:T7df,line_chart = { return Plot.plot({ title: "Trend line chart", subtitle: "Shows the " + data_type + " over time for all the selected pizzas, with a regression to show what is tending towards", width: width, color: {scheme: "Viridis"}, grid: true, marks: [ Plot.lineY(pizza_time_gated, Plot.binX({y: 'sum'}, { x: "order_date", y: data_type == "Revenue"? "revenue" : "orders", z: "name", interval: d3.utcWeek, stroke: 'black', strokeOpacity: 0.2, strokeWidth: 1.25, })), Plot.lineY(pizza_time_gated, Plot.binX({y: 'sum'}, { filter: d => is_in_input(d, input_pizza), x: "order_date", y: data_type == "Revenue"? "revenue" : "orders", z: "name", interval: d3.utcWeek, stroke: "white", strokeOpacity: 1, strokeWidth: 6.75, })), Plot.lineY(pizza_time_gated, Plot.binX({y: 'sum'}, { filter: d => is_in_input(d, input_pizza), x: "order_date", y: data_type == "Revenue"? "revenue" : "orders", z: "name", interval: d3.utcWeek, stroke: d => pizza_name_colors(d.name), strokeOpacity: 1, strokeWidth: 2.25, tip: {format: {z: true, y: true, x: true, stroke: false}}, })), Plot.linearRegressionY(revenue_by_pizza_per_week, { filter: d => (input_pizza == null || input_pizza.size == "Any" || d.name.split(' Pizza ')[1] == input_pizza.size) && (input_pizza == null || input_pizza.pizza_name == "Any" || d.name.split(' Pizza ')[0] == input_pizza.pizza_name), x: "date", y: data_type == "Revenue"? "revenue" : "orders", z: null, stroke: "red", strokeWidth: 2, }), Plot.ruleY([0]), () => svg`\n

${pizza_name_colors.domain().map(value => {\n return htl.html`

${value}

`;\n })}

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

${[line_chart]}

${[radar_chart]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"pizza_time_gated = pizza.filter(d => d.order_date >= date_interval[0] && d.order_date <= date_interval[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"heatmap_pizza = Object.values(Array.from(d3.rollup(pizza_time_gated, \n v => d3.sum(v, data_type == \"Revenue\"? d => d.revenue : d => d.orders), \n d => {return `${d.pizza_name}-${d.size}`}\n)).reduce((acc, cur) => {\n const values = cur[0].split(\"-\")\n if(data_type == \"Revenue\") acc[cur[0]] = {pizza_name: values[0], size: values[1], revenue: cur[1]}\n else acc[cur[0]] = {pizza_name: values[0], size: values[1], orders: cur[1]}\n return acc\n}, {})).sort((a, b) => {\n const size = a.size.localeCompare(b.size)\n return size == 0? a.pizza_name.localeCompare(b.pizza_name) : size\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"revenue_by_pizza_per_week = Object.values(pizza_time_gated.reduce((accumulator, current) => {\n const week = d3.timeWeek(current.order_date);\n const name = current.name;\n const revenue = current.revenue;\n const orders = current.orders;\n \n const key = `${week}-${name}`;\n\n if(!accumulator[key]) accumulator[key] = {date: week, name: name, revenue: revenue, orders: orders};\n else {\n accumulator[key].revenue += revenue;\n accumulator[key].orders += orders;\n }\n \n return accumulator;\n}, {})).sort((a, b) => {return a.date > b.date});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"reduced_pizza = Object.values(Array.from(d3.rollup(pizza_time_gated.filter(d => \n (input_pizza == null || input_pizza.size == \"Any\" || d.size == input_pizza.size) && \n (input_pizza == null || input_pizza.pizza_name == \"Any\" || d.pizza_name == input_pizza.pizza_name)), \n v => d3.sum(v, data_type == \"Revenue\"? d => d.revenue : d => d.orders), \n d => {return `${d.pizza_name}-${d.size}-${d.day_of_week}`}\n)).reduce((acc, cur) => {\n const values = cur[0].split(\"-\")\n if(data_type == \"Revenue\") acc[cur[0]] = {pizza_name: values[0], size: values[1], day_of_week: values[2], revenue: cur[1]}\n else acc[cur[0]] = {pizza_name: values[0], size: values[1], day_of_week: values[2], orders: cur[1]}\n return acc\n}, {})).sort((a, b) => {\n const week_day = weekdays.indexOf(a.day_of_week) - weekdays.indexOf(b.day_of_week)\n return week_day == 0? data_type == \"Revenue\"? b.revenue -a.revenue : b.orders -a.orders : week_day\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"date_interval = date_interval_pre.map(d => time_step.step.offset(earliest_date, d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"max_revenue = round_up(d3.max(reduced_pizza.map(data_type == \"Revenue\"? d => d.revenue : d => d.orders)), data_type == \"Revenue\"? 100000 : 10000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"---\n#### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":866,"value":"function time_interval(range = [], options = {}) {\n const [min = d3.timeDay.offset(new Date(), -7), max = new Date] = range;\n const {\n step = d3.utcDay,\n label = \"\",\n } = options;\n \n return interval([0, step.range(min, max).length], {\n step: 1,\n value: [0, step.range(min, max).length],\n label: label,\n format: ([start, end]) => `${step.offset(min, start).toLocaleDateString()} … ${step.offset(min, end).toLocaleDateString()}`,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"colors = d3.scaleSequential(d3.interpolateRdPu).domain(d3.extent(heatmap_pizza.map(data_type == \"Revenue\"? d => d.revenue : d => d.orders)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"pizza_name_colors = d3.scaleOrdinal(p_names, d3.range(p_names.length).map(d => d3.scaleSequential([0, p_names.length - 1], d3.interpolateCool)(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"longitude = d3.scalePoint(weekdays, [180, -180]).padding(0.5).align(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"is_in_input = function(d, inp) {\n return (inp == null || inp.size == \"Any\" || d.size == inp.size) && (inp == null || inp.pizza_name == \"Any\" || d.pizza_name == inp.pizza_name)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"xAxisObject = d3.scaleBand()\n .domain(sizes.slice(1))\n .range([margin.left, width - margin.right])\n .padding(0.005)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"yAxisObject = d3.scaleBand()\n .domain(pizza_names.slice(1))\n .range([margin.top, 275 - margin.bottom])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"xAxis = g => g\n .attr(\"transform\", `translate(${xAxisObject.bandwidth()/10},${margin.top})`)\n .call(d3.axisTop(xAxisObject).tickSize(0))\n .call(g => g.select(\".domain\").remove())\n .selectAll(\"text\")\n .attr(\"y\", -5)\n .attr(\"x\", -20)\n .attr(\"dy\", \".35em\")\n .style(\"fill\", \"#777\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yAxisObject).tickSize(0).tickPadding(4))\n .call(g => g.select(\".domain\").remove())\n .selectAll(\"text\")\n .style(\"fill\", \"#777\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1783,"value":"function round_up(value, units) {\n return parseInt(parseFloat(parseInt(value))/units+0.99)*units\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"---\n#### Label values arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"weekdays = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"sizes = [\"Any\"].concat(Array.from(new Set(Plot.valueof(pizza, \"size\")))).sort((a, b) => a.localeCompare(b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"categories = [\"Any\"].concat(Array.from(new Set(Plot.valueof(pizza, \"category\"))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"pizza_names = [\"Any\"].concat(Array.from(new Set(Plot.valueof(pizza, \"pizza_name\")))).sort((a, b) => a.localeCompare(b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"p_names = Array.from(new Set(pizza.sort((a, b) => {\n const size = a.size.localeCompare(b.size)\n return size == 0? a.pizza_name.localeCompare(b.pizza_name) : size\n}).map(d => d.name)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"---\n#### Initial object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1797,"value":"interval_steps = [\n {name: \"Day\", step: d3.utcDay}, \n {name: \"Week\", step: d3.utcWeek}, \n {name: \"Month\", step: d3.utcMonth}, \n {name: \"Year\", step: d3.utcYear}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"margin = ({top: 20, right: 200, bottom: 0, left: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"earliest_date = new Date(d3.min(pizza, d => d.order_date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"latest_date = new Date(d3.max(pizza, d => d.order_date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"pizza = daily_orders_product.map( d => {\n const parts = d.name.split(' Pizza ');\n const pizza_name = parts[0];\n const size = parts[1];\n return {pizza_name, size, ...d}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"---\n#### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":574,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"import {interval} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"import {compose} from \"@dralletje/compose-viewof\"","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"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"