30:T408,function animateSVG( before, after, { cssSelector = ".mark-group path[role='graphics-symbol']", duration = 1000, attributesToAnimate = ["d", "stroke", "transform", "fill", "opacity"], delay = (_, i) => i } = {} ) { const workingSVG = after.cloneNode(true); const afterPaths = d3 .select(after) .selectAll(cssSelector) .nodes(); const beforePaths = d3 .select(before) .selectAll(cssSelector) .nodes(); const applyAttributes = (selection, reference, useTransition = false) => { let filteredSelection = selection.filter((_, i) => reference[i]); if (useTransition) filteredSelection = filteredSelection .transition() .duration(duration) .delay(delay); attributesToAnimate.map((a) => { filteredSelection.attr(a, (_, i) => reference[i].getAttribute(a)); }); }; d3.select(workingSVG) .selectAll(cssSelector) .call(applyAttributes, beforePaths) .call(applyAttributes, afterPaths, true); return workingSVG; }31:T6d9,viewof attribsCount = { selectedAttributes; function getNewAttr(allAttrs, currentAttribs) { const remainingAttrs = allAttrs.filter((a) => !currentAttribs.includes(a)); return remainingAttrs.at(Math.floor(Math.random() * remainingAttrs.length)); } const addAttrib = html``; const removeAttrib = html``; const spanCount = html`${ viewof selectedAttributes.value.length }`; const target = ReactiveWidget(html` ${removeAttrib}

${spanCount} attributes

${addAttrib} `); function update(stopAnimation = false) { spanCount.textContent = viewof selectedAttributes.value.length; viewof selectedAttributes.dispatchEvent(new Event("input")); if (stopAnimation) { viewof animate.value = false; viewof animate.dispatchEvent(new Event("input")); } } target.incr = (evt) => { evt && evt.preventDefault(); evt && evt.stopPropagation(); viewof selectedAttributes.value = [ ...viewof selectedAttributes.value, getNewAttr(attributes, viewof selectedAttributes.value) ]; update(!!evt); }; target.decr = (evt) => { evt && evt.preventDefault(); evt && evt.stopPropagation(); viewof selectedAttributes.value = viewof selectedAttributes.value.slice( 0, viewof selectedAttributes.value.length - 1 ); update(!!evt); }; addAttrib.addEventListener("click", target.incr); removeAttrib.addEventListener("click", target.decr); return target; }32:[] 2e:{"title":"Animate SVG","cells":[{"id":0,"value":"# Animate SVG\n\nA useful function to [animate Vega-Lite](#animateVegaLite) and [Observable Plot](#animatePlot) charts\n\nUsage:\n\n```js\nimport {animateSVG} from \"@john-guerra/animate-svg\";\n\n// for vega lite scatterplots\nvegaLiteRender = vl.markCircle()\n ...\n .render();\nanimateSVG(this, vegaLiteRender);\n\n// for plot scatterplots\nanimateSVG(this, plotScatterplot, {\n cssSelector: \"circle\",\n attributesToAnimate: [\"cx\", \"cy\", \"r\", /* ... */ ]\n });\n\n// If you are using it outside Observable try\nanimateSVG(oldSVG, newSVG, {\n cssSelector: \"circle\",\n attributesToAnimate: [\"cx\", \"cy\", \"r\", /* ... */ ]\n});\n```\n\nHere is an [example using vegaEmbed](https://codepen.io/duto_guerra/pen/EajYagw) 🎁\n\nHere is an example trying to visualize ${viewof attribsCount} using\n[the penguins dataset](https://www.kaggle.com/code/parulpandey/penguin-dataset-the-new-iris)","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"### Animate Vega-Lite","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"viewof selectedAttributes = multiAutoSelect(attributes, {\n value: [],\n label: \"What attributes you want to use?\",\n format: (a, i) => html`${a} [${encodings[i]}]`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof animate = Inputs.toggle({\n label: \"Continue animation demo\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"vegaLiteExample = {\n const encodingsObj = Object.fromEntries(\n selectedAttributes.map((a, i) => [\n encodings[i],\n {\n field: a,\n type: isNaN(data[0][a]) ? \"nominal\" : \"quantitative\",\n [encodings[i] === \"facet\" && !isNaN(data[0][a]) ? \"bin\" : \"\"]: true\n }\n ])\n );\n\n let chart = vl\n .markCircle({ color: \"grey\", tooltip: { data: true } })\n .transform(vl.calculate(\"datum.__row_num__\").as(\"__id\"))\n .encode(vl.order().fieldQ(\"__id\"))\n .data(data)\n .config({\n axis: { grid: false },\n scale: { zero: false },\n facet: { columns: 2 }\n });\n\n if (selectedAttributes.length > 0) chart = chart.encode(encodingsObj);\n\n const render = await chart.render({ renderer: \"svg\" });\n\n return animateSVG(this, render);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"### Animate Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"Inputs.bind(\n multiAutoSelect(attributes, {\n value: [\n \"body_mass_g\",\n \"flipper_length_mm\",\n \"culmen_depth_mm\",\n \"sex\",\n \"island\"\n ],\n label: \"What attributes you want to use?\",\n format: (a, i) => html`${a} [${encodings[i]}]`\n }),\n viewof selectedAttributes\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"plotExample = {\n const encodings = [\"x\", \"y\", \"r\", \"fill\", \"fx\", \"opacity\"];\n const plotChart = Plot.plot({\n fx: { tickFormat: null },\n color: { legend: true },\n marks: [\n Plot.circle(\n data,\n Object.fromEntries(encodings.map((e, i) => [e, selectedAttributes[i]]))\n )\n ]\n });\n return animateSVG(this, plotChart, {\n cssSelector: \"circle\",\n attributesToAnimate: [\"cx\", \"cy\", ...encodings]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"## The Code","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"encodings = [\"x\", \"y\", \"size\", \"fill\", \"facet\", \"opacity\"];","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"data = penguins","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"attributes = penguins.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"## Demo animation","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"{\n // Animation demo code\n // const root = viewof selection.value;\n // let currentChildrenI = 0,\n // newI = 0;\n\n const interval = setInterval(async () => {\n if (!animate) {\n return;\n }\n if (selectedAttributes.length >= 5) {\n clearInterval(interval);\n viewof animate.value = false;\n viewof animate.dispatchEvent(new Event(\"input\"));\n return;\n }\n\n viewof attribsCount.incr();\n viewof attribsCount.dispatchEvent(new Event(\"input\"));\n }, 2500);\n\n invalidation.then(() => {\n clearInterval(interval);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"ReactiveWidget = require(\"reactive-widget-helper\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}