2f:T1bdb,viewof chart = { // Set up SVG canvas dimensions const width = 975, height = 610; const dot_size = 8; // Create an SVG element const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Define a projection to map latitude and longitude to x and y coordinates on the canvas const projection = d3.geoMercator() .scale(135) // Adjust scale factor to zoom in .translate([width / 2, height / 2 + 100]); // Adjust translation for centering // Define a geoPath generator const path = d3.geoPath().projection(projection); // Load and display the world map using TopoJSON const world = await d3.json("https://d3js.org/world-110m.v1.json"); svg.append("path") .datum(topojson.feature(world, world.objects.countries)) .attr("d", path) .attr("fill", "#ddd") .attr("stroke", "#fff"); // Load the project data const projectData = await FileAttachment("project_tracker.json").json(); // Add dots for each location const dots = svg.selectAll("circle") .data(projectData) .enter() .append("circle") .attr("cx", d => projection([d.longitude, d.latitude])[0]) .attr("cy", d => projection([d.longitude, d.latitude])[1]) .attr("r", dot_size) // Fixed size for dots .attr("fill", d => { const scopes = new Set(d.projects.map(p => p.carbon_water_scope.toLowerCase())); if (scopes.has("water") && scopes.has("carbon")) { return "#2ECC71"; // Both water and carbon } else if (scopes.has("water")) { return "#3A9AA8"; // Only water } else if (scopes.has("carbon")) { return "#FFC000"; // Only carbon } return "gray"; // Default for no recognized scope }) .attr("fill-opacity", 0.8) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .style("cursor", "pointer") .on("click", (event, d) => { // Remove existing popup d3.select("#popup").remove(); // Reset all dots to normal size dots.attr("r", dot_size).attr("stroke-width", 0.5); // Highlight the clicked dot const dot = d3.select(event.target); dot.attr("r", dot_size + 5).attr("stroke-width", 1.5); // Bigger size and thicker border // Get the click coordinates const [x, y] = d3.pointer(event); // Replace "Redmond" with "Puget Sound" in the city name const cityName = d.city === "Redmond" ? "Puget Sound" : d.city; // Header: City, Country const headerHTML = `

${cityName}, ${d.country}

`; // Create a table for project details const tableContent = d.projects.map(p => ` ${p.building || 'N/A'} ${p.project_name} ${p.carbon_water_scope} ${p.implementation_status_notes || 'N/A'} `).join(""); const tableHTML = ` ${tableContent}

Building	Project Name	Scope	Status Notes

`; // Temporarily create a hidden container to measure the content height const tempDiv = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("width", "360px") .style("font-family", "'Segoe UI', sans-serif") .html(headerHTML + tableHTML); const contentHeight = tempDiv.node().offsetHeight; // Measure the content height tempDiv.remove(); // Remove the temporary container // Define the pop-up dimensions const popupWidth = 360; const popupHeight = Math.min(contentHeight, 400); // Dynamically adjust, max 400px // Calculate pop-up position let popupX = x + 10; // Default position to the right of the dot let popupY = y - popupHeight / 2; if (x + popupWidth + 10 > width) { popupX = x - popupWidth - 10; // Shift to the left if near the right edge } if (popupY < 10) { popupY = 10; // Adjust if near the top edge } if (popupY + popupHeight > height) { popupY = height - popupHeight - 10; // Adjust if near the bottom edge } // Add the pop-up svg.append("foreignObject") .attr("id", "popup") .attr("x", popupX) .attr("y", popupY) .attr("width", popupWidth) .attr("height", popupHeight) .append("xhtml:div") .style("background", "#fff") .style("border", "1px solid #ccc") .style("border-radius", "5px") .style("padding", "10px") .style("box-sizing", "border-box") .style("font-size", "16px") .style("font-family", "'Segoe UI', sans-serif") .style("box-shadow", "0 2px 5px rgba(0, 0, 0, 0.3)") .style("overflow-y", contentHeight > 400 ? "auto" : "hidden") // Scroll only if necessary .style("height", `${popupHeight}px`) // Dynamically adjust height .html(headerHTML + tableHTML); }); // Add legend const legend = svg.append("g") .attr("transform", `translate(10, ${height - 60})`); // Bottom-left corner const legendData = [ { color: "#FFC000", label: "Carbon Projects" }, { color: "#3A9AA8", label: "Water Projects" }, { color: "#2ECC71", label: "Both Carbon and Water Projects" } ]; legend.selectAll("circle") .data(legendData) .enter() .append("circle") .attr("cx", 10) .attr("cy", (_, i) => i * 20) .attr("r", 5) .attr("fill", d => d.color); legend.selectAll("text") .data(legendData) .enter() .append("text") .attr("x", 25) .attr("y", (_, i) => i * 20 + 4) .style("font-family", "'Segoe UI', sans-serif") .style("font-size", "12px") .text(d => d.label); // Close the pop-up on outside click and reset highlighted dot svg.on("click", (event) => { const isDotClick = dots.nodes().some(node => node === event.target); if (!isDotClick) { d3.select("#popup").remove(); dots.attr("r", dot_size).attr("stroke-width", 0.5); // Reset dot size and border } }); // Return the SVG node return svg.node(); } 30:[{"id":"38093f9cc4c5433992afb257f1202df2b23abb789bca622fba3aba8c94b1d269945f567f7506898e9759f05015a14bf8c75e722236a18a5019715b6174b5c32e","href":"https://static.observableusercontent.com/files/38093f9cc4c5433992afb257f1202df2b23abb789bca622fba3aba8c94b1d269945f567f7506898e9759f05015a14bf8c75e722236a18a5019715b6174b5c32e","name":"project_tracker.json","type":"application/json","lastModified":1733440802298.792,"size":11637}] 2d:{"title":"Msft Water Project Tracker","cells":[{"id":0,"value":"

Msft Water Project Tracker

D3 › Gallery

\n\n# Microsoft Water Project Tracker\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}