{ const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); // We wrap the SVG with a container that has the html element above it const container = html`

${svg.node()}

` const defs = svg .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); const projection = d3.geoAlbersUsa().scale(1300).translate([480, 300]); const path = d3.geoPath(); const g =svg .append("g") .attr("transform", `translate(${margin.top}, ${margin.right})`); 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 = 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) { //adds pencil outlines const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `); svg .append("g") .attr("class", "mesh") .attr("filter", pencil) .append("path") .attr("d", mesh.map(spline).join("")); } defs //controls the blur scale .selectAll(".state") .data(states) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); // Add National Parks to the map const parkPoints = svg .selectAll(".park-point") .data(national_parks) // Assuming nps_filtered contains the filtered national parks .enter() .append("g") .attr("class", "park-point") .attr("transform", d => { const projected = projection([d.longitude, d.latitude]); if (!projected) { console.error(`Projection failed for park: ${d.unit} at [${d.longitude}, ${d.latitude}]`); return ""; // Skip rendering this park } return `translate(${projected[0]}, ${projected[1]})`; }) parkPoints .each(function(d) { const selection = d3.select(this); if (d.visited === "No") { // Render an SVG image element for non-visited parks // Render a circle element for visited parks selection.append('circle') .attr('r', 2) .attr('fill', '#ff5733') .attr('stroke', 'black') .attr('stroke-width', 1); } else { // Render an SVG image element for non-visited parks selection.append('svg:image') .attr('href', 'https://www.svgrepo.com/show/150032/check-mark.svg') .attr('width', 12) .attr('height', 12) .attr('x', -5) // Adjusting position to center the image .attr('y', -5); } }); const tooltip = d3.select(container).select(".tooltip"); parkPoints // Change the contents and position of the tooltip // .on("touchstart", function(event){ // event.preventDefault(); // }) .on("pointerenter pointermove", (evt, d) => { evt.preventDefault(); const tooltipText = ` ${xAttr}: ${d.unit}
${yAttr}: ${d.visited}`; tooltip .style("display", null) .style("top", (evt.pageY - 200) + "px") .style("left",(evt.pageX + 10) + "px") .html(tooltipText) this.releasePointerCapture(evt.pointerId); }) .on("pointerout", (evt) => tooltip.style("display", "none")); return container; }