{ const svg = DOM.svg(width, 600); const defs = d3.select(svg).attr("class", "watercolor").append("defs"); const splotch = DOM.uid("splotch"); const path = d3 .geoPath() .projection( d3 .geoIdentity() .reflectY(true) .fitSize([960, 600], topojson.feature(us, us.objects.nutsrg)) ); 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; }