map = { // Cell 5 — map // --- fixed internal canvas: all projection scales/translates below // are tuned to this 800x500 space. The SVG is then scaled // responsively via a viewBox, so the map stays centered and // adapts to any container width (e.g. an iframe). --- const W = 800; const H = 500; // --- filter state --- const selectedRegion = filterType === "Region" ? selectedFilter : null; const selectedCountry = filterType === "Country" ? selectedFilter : null; // --- metric --- const isSleepMetric = metric === "Mean annual hours of observed heat-related sleep loss (2020-2025)"; // --- point size by country --- const countryPointSize = { "United States": 5, China: 4.5, India: 5.5, Brazil: 6, Russia: 6, Canada: 5.5, Mexico: 6.5, Japan: 6 }; // --- dot radius --- const r = selectedCountry ? countryPointSize[selectedCountry] ?? 8 : selectedRegion ? 4.7 : 3.8; // --- region zoom config --- const regionConfig = { Africa: { center: [15, 0], scale: 350 }, "North America": { center: [-100, 40], scale: 400 }, "South America": { center: [-58, -20], scale: 350 }, Asia: { center: [83, 35], scale: 525 }, Europe: { center: [20, 52], scale: 600 }, Oceania: { center: [125, -10], scale: 400 } }; // --- topojson name map --- const topoNameMap = { "United States": "United States of America", "The Netherlands": "Netherlands", "Bosnia and Herzegovina": "Bosnia and Herz.", "Central African Republic": "Central African Rep.", "Republic of the Congo": "Congo", "Democratic Republic of the Congo": "Dem. Rep. Congo", "Dominican Republic": "Dominican Rep.", "Ivory Coast": "Côte d'Ivoire" }; // --- manual projections for countries that need custom centering --- const manualProjections = { Russia: { center: [90, 70], scale: 250 }, Canada: { center: [-100, 72], scale: 225 }, Kuwait: { center: [47.5, 29.3], scale: 4000 }, Kosovo: { center: [20.9, 42.6], scale: 8000 }, Djibouti: { center: [43.2, 11.6], scale: 6000 }, Burundi: { center: [29.4, -3.4], scale: 6000 }, "El Salvador": { center: [-89.2, 13.7], scale: 6000 }, Haiti: { center: [-72.3, 18.5], scale: 5000 }, Jamaica: { center: [-76.8, 18.0], scale: 5000 }, Lebanon: { center: [35.5, 33.9], scale: 6000 }, Rwanda: { center: [30.1, -2.0], scale: 6000 }, Norway: { center: [10.8, 65], scale: 700 } }; // --- topo name lookup --- const topoName = selectedCountry ? topoNameMap[selectedCountry] ?? selectedCountry : null; // --- filter data to selected country --- const countryPoints = selectedCountry ? data.filter((d) => d.country === selectedCountry) : []; const lons = countryPoints.map((d) => +d.actual_lon); const lats = countryPoints.map((d) => +d.actual_lat); // --- projection --- const projection = (() => { if (selectedCountry) { if (!countryPoints.length) { return d3.geoNaturalEarth1().scale(148).translate([400, 250]); } // USA special case — centered to include Alaska and Hawaii if (topoName === "United States of America") { return d3 .geoNaturalEarth1() .rotate([100, -50]) .scale(450) .translate([400, 250]); } // Russia special case — Pacific-centered to show full landmass including far east if (selectedCountry === "Russia") { return d3 .geoNaturalEarth1() .rotate([-95, -70]) .scale(550) .translate([400, 250]); } // New Zealand special case if (selectedCountry === "New Zealand") { return d3 .geoNaturalEarth1() .rotate([-174.8, 40]) .scale(1050) .translate([400, 250]); } // manual projections lookup (Canada, Kuwait, Kosovo, etc.) if (manualProjections[selectedCountry]) { const { center, scale } = manualProjections[selectedCountry]; return d3 .geoMercator() .center(center) .scale(scale) .translate([400, 250]); } // default — fit to border geometry const countryFeature = countries.features.find( (f) => f.properties.name === topoName ); if (countryFeature) { const p = d3.geoMercator().fitExtent( [ [80, 80], [720, 420] ], countryFeature ); const noMinScale = ["Russia"]; const minScale = 400; if (p.scale() > 8000) p.scale(8000); if (p.scale() < minScale && !noMinScale.includes(topoName)) p.scale(minScale); return p; } // fallback — center on mean of data points const centerLon = d3.mean(lons); const centerLat = d3.mean(lats); return d3 .geoMercator() .center([centerLon, centerLat]) .scale(1500) .translate([400, 250]); } // region zoom if (selectedRegion) { const { center, scale } = regionConfig[selectedRegion]; return d3 .geoNaturalEarth1() .scale(scale) .rotate([-center[0], -center[1]]) .translate([400, 250]); } // global default return d3.geoNaturalEarth1().scale(145).translate([400, 250]); })(); // --- highlight selected country border --- const highlightFeature = topoName ? { type: "FeatureCollection", features: countries.features.filter( (f) => f.properties.name === topoName ) } : null; // --- chart --- const chart = Plot.plot({ projection, width: W, height: H, color: { interpolate: isSleepMetric ? d3.interpolateReds : (t) => d3.interpolateRgb("#ffffff", "#af2cb7")(t), domain: isSleepMetric ? [0, 100] : [0, 25], legend: false }, marks: [ Plot.sphere({ fill: "#626379" }), Plot.geo(land, { fill: "#25263c", stroke: "#f8f8f9", strokeWidth: 0.2 }), ...(highlightFeature && highlightFeature.features.length ? [ Plot.geo(highlightFeature, { fill: "#25263c", stroke: "#ffffff", strokeWidth: 2.4 }) ] : []), Plot.dot(selectedCountry ? countryPoints : data, { x: "actual_lon", y: "actual_lat", fill: metric, r, stroke: selectedCountry && ["Hong Kong", "Macao", "Singapore"].includes(selectedCountry) ? "white" : "black", strokeWidth: 0.5 }) ] }); // --- make the SVG scale responsively while preserving the internal // 800x500 coordinate system the projection/quadtree rely on --- chart.setAttribute("viewBox", `0 0 ${W} ${H}`); chart.setAttribute("preserveAspectRatio", "xMidYMid meet"); chart.removeAttribute("width"); chart.removeAttribute("height"); chart.style.maxWidth = `${W}px`; chart.style.width = "100%"; chart.style.height = "auto"; chart.style.display = "block"; // --- tooltip --- const tooltip = html``; const wrapper = html`

${chart} ${tooltip}

`; // --- quadtree for click lookup --- const dotData = selectedCountry ? countryPoints : data; const projected = dotData .map((d) => { const p = projection([+d.actual_lon, +d.actual_lat]); return p ? { d, px: p[0], py: p[1] } : null; }) .filter(Boolean); const qt = d3 .quadtree() .x((p) => p.px) .y((p) => p.py) .addAll(projected); // --- click events --- chart.addEventListener("click", (e) => { const rect = chart.getBoundingClientRect(); // displayed (CSS) coords — used to position the tooltip const dispX = e.clientX - rect.left; const dispY = e.clientY - rect.top; // internal coords — the quadtree is built in the 800x500 space, so // scale the pointer back into that space before searching const mx = dispX * (W / rect.width); const my = dispY * (H / rect.height); const closest = qt.find(mx, my, 20); if (closest) { const { d } = closest; const hrs = +d["Mean annual hours of observed heat-related sleep loss (2020-2025)"]; const pct = +d["Percent Attributable (2020-2025)"]; const attributable = ((hrs * pct) / 100).toFixed(0); // toggle off if clicking the same point if ( tooltip.dataset.city === d.city_ascii && tooltip.style.display === "block" ) { tooltip.style.display = "none"; tooltip.dataset.city = ""; return; } tooltip.innerHTML = ` People in ${d.city_ascii}, ${d.country} experience ${hrs} hours of heat-related sleep loss annually. ${attributable} (${pct}%) of those hours are due to climate change. `; tooltip.dataset.city = d.city_ascii; tooltip.style.display = "block"; tooltip.style.left = dispX + 12 + "px"; tooltip.style.top = dispY - 10 + "px"; } else { tooltip.style.display = "none"; tooltip.dataset.city = ""; } }); return wrapper; }