31:T4a9,md`**Note:** the data url technique turns out not to be a necessary resort, because we can also use the DOM.uid API as so: ${(() => { const svg = d3.select(DOM.svg(width, 200)); svg.style('padding-top', '5px'); const filter = DOM.uid('gooey'); svg.append('defs').html(` `); svg.attr('filter', filter); const data = [ { x:140, y:50, r:20, c:'#40e5a0' }, { x:300, y:110, r:40, c:'#408ae5' }, ]; const circles = svg.selectAll('circle').data(data); circles.enter().append('circle') .attr('cx', d => d.x).attr('cy', d => d.y).attr('fill', d => d.c) .merge(circles) .interrupt().transition().duration(200) .attr('r', d => d.r) const mc = svg.append('circle') .attr('r', 50).attr('fill', '#d6863b') svg.on('mousemove', function () { const p = d3.mouse(this); mc.attr('cx', p[0]).attr('cy', p[1]) }); return svg.node() })()}`32:[] 2f:{"title":"Gooey filter via a data url","cells":[{"id":0,"value":"md`# Gooey filter via a data url`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"filter = {\n const svg = ``;\n \n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n //return url;\n\n const filter = `url('${url}#gooey')`;\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"{\n const svg = d3.select(DOM.svg(width, 200));\n svg.attr('filter', filter)\n \n const data = [\n { x:140, y:50, r:20, c:'#40e5a0' },\n { x:300, y:110, r:40, c:'#408ae5' },\n ];\n \n const circles = svg.selectAll('circle').data(data);\n circles.enter().append('circle')\n .attr('cx', d => d.x).attr('cy', d => d.y).attr('fill', d => d.c)\n .merge(circles)\n .interrupt().transition().duration(200)\n .attr('r', d => d.r)\n \n const mc = svg.append('circle')\n .attr('r', 50).attr('fill', '#d6863b')\n \n svg.on('mousemove', function () {\n const p = d3.mouse(this);\n mc.attr('cx', p[0]).attr('cy', p[1])\n });\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}