2f: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). 30:T10c4,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/calendar-view function Calendar(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text width = 928, // width of the chart, in pixels cellSize = 17, // width and height of an individual day, in pixels weekday = "monday", // either: weekday, sunday, or monday formatDay = i => "SMTWTFS"[i], // given a day number in [0, 6], the day-of-week label formatMonth = "%b", // format specifier string for months (above the chart) yFormat, // format specifier string for values (in the title) colors = d3.interpolateYlGn } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); const countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7; const timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday; const weekDays = weekday === "weekday" ? 5 : 7; const height = cellSize * (weekDays + 2); // Compute a color scale. This assumes a diverging color scheme where the pivot // is zero, and we want symmetric difference around zero. const max = d3.quantile(Y, 0.9975, Math.abs); const color = d3.scaleSequential([0, +max], colors).unknown("none"); // Construct formats. formatMonth = d3.utcFormat(formatMonth); // Compute titles. if (title === undefined) { const formatDate = d3.utcFormat("%B %-d, %Y"); const formatValue = color.tickFormat(100, yFormat); title = i => `${formatDate(X[i])}\n${formatValue(Y[i])}`; } else if (title !== null) { const T = d3.map(data, title); title = i => T[i]; } // Group the index by year, in reverse input order. (Assuming that the input is // chronological, this will show years in reverse chronological order.) const years = d3.groups(I, i => X[i].getUTCFullYear()).reverse(); function pathMonth(t) { const d = Math.max(0, Math.min(weekDays, countDay(t.getUTCDay()))); const w = timeWeek.count(d3.utcYear(t), t); return `${d === 0 ? `M${w * cellSize},0` : d === weekDays ? `M${(w + 1) * cellSize},0` : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${weekDays * cellSize}`; } const svg = d3.create("svg") .attr("width", width) .attr("height", height * years.length) .attr("viewBox", [0, 0, width, height * years.length]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg.selectAll("g") .data(years) .join("g") .attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`); year.append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7)) .join("text") .attr("x", -5) .attr("y", i => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); const cell = year.append("g") .selectAll("rect") .data(weekday === "weekday" ? ([, I]) => I.filter(i => ![0, 6].includes(X[i].getUTCDay())) : ([, I]) => I) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", i => timeWeek.count(d3.utcYear(X[i]), X[i]) * cellSize + 0.5) .attr("y", i => countDay(X[i].getUTCDay()) * cellSize + 0.5) .attr("fill", i => color(Y[i])); if (title) cell.append("title") .text(title); const month = year.append("g") .selectAll("g") .data(([, I]) => d3.utcMonths(d3.utcMonth(X[I[0]]), X[I[I.length - 1]])) .join("g"); month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return Object.assign(svg.node(), {scales: {color}}); }31:[] 2d:{"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"},{"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"},{"id":52,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"---\n## Your visual tool title\n### Subtitle\n\nAnd any explanation","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"Plot.plot({\n title: \"Pizza Revenue Breakdown by Type and Size\",\n subtitle: \"Analyzing sales performance for each pizza variant across different sizes\",\n marginLeft: 120,\n padding: 0,\n x: {label: null},\n y: {label: null},\n color: {label: \"Revenue\",scheme: \"YlGn\", legend: true, zero: true},\n marks: [\n Plot.cell(\n pizza,\n Plot.group(\n {fill: \"sum\"},\n {fill: \"revenue\", x: \"size\", y: \"pizza_name\"}\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"viewof form = Inputs.form({\n dateRange : rangeSlider({\n min: 0,\n max: 1095,\n step: 1,\n getValue: x =>\n x.value.map(v => d3.timeDay.offset(new Date(\"2020-01-01\"), v)),\n format: d => d3.timeFormat(\"%d-%b-%Y\")(d),\n cautious: true,\n submit: false\n }),\n from: Inputs.date({label: \"From:\", value: \"2020-01-01\"}),\n to: Inputs.date({label: \"To:\", value: \"2022-12-31\"}),\n option1: Inputs.checkbox([\"Classic\", \"Specialty\", \"Vegetarian\"], {value: [\"Classic\", \"Specialty\", \"Vegetarian\"] ,label: \"Pizza category:\"}),\n option2: Inputs.checkbox([\"Extra Large\", \"Large\", \"Medium\", \"Small\"], {value: [\"Extra Large\", \"Large\", \"Medium\", \"Small\"], label: \"Pizza size:\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"Plot.plot({title: \"Daily Revenue Trends and Weekly Patterns\",\n subtitle: \"Analyzing weekly variations and revenue evolution over three years\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"Calendar(totalFilteredData, {\n x: d => d.order_date,\n y: d => d.revenue,\n yFormat: \"#\",\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"\n

${[barY]}

${[stacked]}

`","pinned":false,"hidden":false,"mode":"html"},{"id":123,"value":"barY = {\n return Plot.plot({\n title: \"Pizza Order Size Distribution Analysis\",\n subtitle: \"Examining percentage breakdowns of pizza Orders by Size within a specified time range and pizza category\",\n color: {scheme: \"YlGn\"},\n x: {label: \"Pizza size\"},\n y: {percent: true, grid: true},\n marginBottom: 40,\n marks: [\n Plot.barY(\n categoryFilteredData,\n Plot.normalizeY(\n \"sum\",\n Plot.groupX(\n {y: \"sum\"},\n {x: \"size\",\n y: \"orders\",\n // fill: \"size\"\n }\n )\n ) \n ),\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"stacked = {\n return Plot.plot({\n title: \"Pizza Revenue Evolution by Category\",\n subtitle: \"Exploring Revenue Trends Across Pizza Categories\",\n color: {legend: true, scheme: \"YlGn\"},\n y: {\n tickFormat: \"s\"\n },\n marks: [\n Plot.areaY(sizeFilteredData,\n Plot.windowY(180, Plot.groupX({y: \"sum\"}, {x: \"order_date\", y: \"revenue\", fill: \"category\"}))\n ),\n Plot.ruleY([0])\n \n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"---\n#### Data filtering","pinned":false,"hidden":false,"mode":"md"},{"id":92,"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"},{"id":377,"value":"totalFilteredData = pizza.filter((element) => {\n return form.option1.includes(element.category) && form.option2.includes(element.size) && element.order_date >= form.from && element.order_date <= form.to\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"sizeFilteredData = pizza.filter((element) => {\n return form.option2.includes(element.size) && element.order_date >= form.from && element.order_date <= form.to\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"categoryFilteredData = pizza.filter((element) => {\n return form.option1.includes(element.category) && element.order_date >= form.from && element.order_date <= form.to\n});","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":620,"value":"---\n#### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"---\n#### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"import {daily_orders_product, daily_orders, stores} from \"@udg-master-data-science/data-playground\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"import {rangeInput} from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"import {input as widget, d3format} from \"@jashkenas/inputs@2173\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"import {rangeSlider} from \"@easz/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}