32:Td62,{ replay; let grid, modal, highlight, use; const clipId = DOM.uid(); const rectId = DOM.uid(); const node = svg``; d3.select(modal) .style( "transform-origin", `${width * .55 + w * .75}px ${height * .6 + h / 2 + 2}px` ) .transition() .delay(1000) .duration(1000) .style("opacity", 1) .style("transform", `translate(0,0)`) .transition() .delay(500) .duration(1000) .style("transform", "scale(30)") .transition() .delay(2000) .duration(1000) .style("transform", "scale(1)") .transition() .delay(1000) .duration(1000) .style("opacity", 0); d3.select(highlight) .transition() .delay(3500) .duration(2000) .attr("width", w * 4) .attr("height", h * 4); d3.select(use) .style("transform-origin", `${w * 6}px ${h * 20}px`) .transition() .delay(5500) .duration(1000) .style("transform-origin", `${width * .5}px ${height * .6}px`) .attr( "transform", `scale(${(w * 2 + 10) / (w * 4)} ${h / (h * 4)}) translate(${width * .5 - w * 6}, ${height * .6 - h * 20})` ) .transition() .delay(1000) .duration(1000) .style("opacity", 0); d3.select(grid) .style("transform-origin", `${w * 6}px ${h * 20}px`) .transition() .delay(5500) .duration(1000) .style("transform-origin", `${width * .5}px ${height * .6}px`) .attr( "transform", `scale(${(w * 2 + 10) / (w * 4)} ${h / (h * 4)}) translate(${width * .5 - w * 6}, ${height * .6 - h * 20})` ) .transition() .delay(1000) .duration(1000) .style("opacity", 0); return node; }33:T40c,icon = (w = 80) => { const h = (55 / 80) * w; const n = 3; const m = 4; const dx = w / n; const dy = h / m; const margin = (4 / 80) * w; const arrowhead = (12 / 80) * w; const blue = "#6391CD"; const lightblue = "#CFDCEB"; const red = "#B75551"; const strokeWidth = Math.max((4 / 80) * w, 2); return svg``; }34:[{"id":"7e7efe52a6010596058549886363acac7259c9ca01fa56c5fa0780e90640ecfd7abbc8275f0d7dd1ce4b69cf4015cd7e7b3be76ba8a7f23abcac8d64dfdf562d","href":"https://static.observableusercontent.com/files/7e7efe52a6010596058549886363acac7259c9ca01fa56c5fa0780e90640ecfd7abbc8275f0d7dd1ce4b69cf4015cd7e7b3be76ba8a7f23abcac8d64dfdf562d","name":"Screen Shot 2020-07-21 at 5.15.17 PM.png","type":"image/png","lastModified":1595366130828.605,"size":453095}] 30:{"title":"The “Select cells” button","cells":[{"id":0,"value":"md`# The “Select cells” button\n\nI like this button in Excel\n\n${icon()}\n\nas seen here`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`Because it feels like this`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"viewof replay = html`