2c:null 2d:["$","title",null,{"children":"Exercise 4: Look ma! It's interactive | Albert Garçon Padilla'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:Ta47,chart = { // Specify the chart’s dimensions. const width = 928*((totalRevenue/14573338)**0.5); const height = 560*((totalRevenue/14573338)**0.5); const color = d3.scaleSequential([8, 0], d3.interpolateMagma); // Create the treemap layout. const treemap = data => d3.treemap() .size([width, height]) .paddingOuter(3) .paddingTop(19) .paddingInner(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value)); const root = treemap(data); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; overflow: visible; font: 10px sans-serif;"); const shadow = DOM.uid("shadow"); svg.append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("stdDeviation", 3); const node = svg.selectAll("g") .data(d3.group(root, d => d.height)) .join("g") .attr("filter", shadow) .selectAll("g") .data(d => d[1]) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); const format = d3.format(",d"); node.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`); node.append("rect") .attr("id", d => (d.nodeUid = DOM.uid("node")).id) .attr("fill", d => color(d.height)) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.nodeUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value))) .join("tspan") .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); node.filter(d => d.children).selectAll("tspan") .attr("dx", 3) .attr("y", 13); node.filter(d => !d.children).selectAll("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`); const brush = vl.selectInterval() .encodings('x'); // limit selection to x-axis (year) values const years = vl.markBar({width: 4}) .data(daily_orders) .params(brush) .encode( vl.x().year('order_date').title('Daily revenue'), vl.y().count().title(null) ) .width(600) .height(50); return svg.node(); } 34:Tcc1,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "middle"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${ pointer[1] + 7 })` ); }) .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Define the styles chart.appendChild(html`