{ 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(); const outlinePath = d3.geoPath(); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); const shadow = DOM.uid("dropshadow"); defs .append("filter") .attr("id", "dropshadow") .html( ` `) // 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 subgroups = groups .append("g") // .attr("filter",d => { // return (d.id === '39' ? shadow : '') // }); const paths = subgroups .append("path") .attr("d", path) .attr("fill", d => d.properties.color) .attr("stroke", d => d.properties.color) .attr("stroke-width", 0.5) .attr("filter", d => d.filterUid) const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `); const lines = d3 .select(svg) .selectAll(".lines") .data(states) .enter() .append("g") .attr("class", "lines") .attr("filter", pencil); const outlines = lines .append("path") .attr("d", path) .attr("stroke", "#ffffff") .attr("stroke-width", strokeWidth) .attr("stroke-dasharray","0,10,0") .attr("fill", "none") .attr("transform", function(d) { var centroid = path.centroid(d), x = centroid[0], y = centroid[1]; return "translate(" + x + "," + y + ")" + "scale(0.9)" + "translate(" + -x + "," + -y + ")"; }) // .attr("filter", d => d.filterUid); // d3.select(svg) // .append("g") // .attr("class", "mesh") // .attr("filter", pencil) // .data(states) // .enter() // .append("path") // .attr("d", path) // .attr("stroke-dasharray","0,5,0") defs .selectAll(".state") .data(states) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); return svg; }