{ const svg = DOM.svg(960, 600); const defs = d3 .select(svg) .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); const path = d3.geoPath(); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); // Generate Observable-friendly IDs states.forEach((d, i) => { d.filterUid = DOM.uid("filter" + i); }); const groups = d3 .select(svg) .selectAll(".state") .data(states) .enter() .append("g") .attr("class", "state") .attr("filter", splotch); const paths = groups .append("path") .attr("d", path) .attr("fill", d => d.properties.color) .attr("stroke", d => d.properties.color) .attr("stroke-width", strokeWidth) .attr("filter", d => d.filterUid); if (drawMesh) { const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `); d3.select(svg) .append("g") .attr("class", "mesh") .attr("filter", pencil) .append("path") .attr("d", mesh.map(spline).join("")); } defs .selectAll(".state") .data(states) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); return svg; }