_chartBase={ const width = 700, height = 500; const cx = width / 2, cy = height / 2; const padding = 100; // const radius = Math.min(width, height) / 2 -padding; const color = d3.scaleOrdinal() .range([ "#002a42", "#10477e", "#3f8589", "#97ca94", "#ffa80b", "#ef4b4b" ]); // code for fixed polygon positions function mulberry32(a) { return function () { var t = (a += 0x6d2b79f5); t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } const outerClip = [ [padding, padding], [width - padding, padding], [width - padding, height - padding], [padding, height - padding] ]; const root = d3.hierarchy(hierarchyData).sum(d => d.x2024 || 1e-6); d3.voronoiTreemap() .clip(outerClip) .prng(mulberry32(123456)) // fixed seed so same layout every time (root); const leaves = root.leaves(); // create tooltip const tooltip = d3.select(document.body).selectAll(".vor-tooltip").data([0]).join("div") .attr("class","vor-tooltip") .style("position","fixed") .style("display","none") .style("pointer-events","none") .style("background","#fff") .style("color","black") .style("padding","6px 10px") .style("border-radius","4px") .style("border","1px solid lightgray") .style("font-size","12px") .style("box-shadow", "5px 5px 10px rgba(0, 0, 0, 0.3)") .style("z-index", 2147483647); // defs (drop shadow) --- const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) // .attr("preserveAspectRatio", "xMidYMid meet"); const g = svg.append("g") const defs = g.append("defs"); const filter = defs.append("filter") .attr("id", "drop-shadow") .attr("height", "150%"); filter.append("feGaussianBlur") .attr("in", "SourceAlpha") .attr("stdDeviation", 3) .attr("result", "blur"); filter.append("feOffset") .attr("in", "blur") .attr("dx", 2) .attr("dy", 2) .attr("result", "offsetBlur"); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode").attr("in", "offsetBlur"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); // --- Update polygons based on selected metric --- // Groups const outerGroup = svg.append("g").attr("class", "outer-group"); const innerGroup = svg.append("g").attr("class", "inner-group"); // Store original polygons (not pre-scaled) const innerPolygons = leaves.map(leaf => ({ polygon: leaf.polygon, // keep original coords data: leaf.data })); // highlight functions function highlightPolygon(sector) { outerGroup.selectAll(`path[data-sector='${sector}']`).attr("fill-opacity", 0.4); innerGroup.selectAll(`path[data-sector='${sector}']`) .attr("filter", "url(#drop-shadow)") .each(function() { this.parentNode.appendChild(this); }); // bring to front } function resetHighlight() { outerGroup.selectAll("path").attr("fill-opacity", 0.2); innerGroup.selectAll("path").attr("filter", null); } const formatSI = d3.format(".2~s"); // --- Draw outer polygons --- outerGroup.selectAll("path") .data(leaves) .join("path") .attr("class", "outer-polygons") .attr("data-sector", d => d.data.country_name) .attr("d", d => "M" + d.polygon.map(p => p.join(",")).join("L") + "Z") .attr("fill", d => color(d.data.region_name)) .attr("fill-opacity", 0.2) .on("mouseenter", function(event, d) { if (!d || !d.data) return; const avgFormatted = formatSI(d.data.x2024); const latestFormatted = formatSI(d.data.x2025); // d3.select(this).call(bringToFront); tooltip.style("display", "block") .attr("class", "tooltip") .html(`${d.data.country_name || ""}
2024: $${avgFormatted}
2025: $${latestFormatted}
Difference: -${d.data.decline_pct}%`); const [x, y] = d3.pointer(event, document.body); tooltip.style("left", (x + 30) + "px").style("top", (y + 30) + "px"); highlightPolygon(this.getAttribute("data-sector")); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, document.body); tooltip.style("left", (x + 30) + "px").style("top", (y + 30) + "px"); }) .on("mouseleave", () => { tooltip.style("display", "none"); resetHighlight(); // d3.select(this).call(sendBack); }); // --- Draw inner polygons --- innerGroup.selectAll("path") .data(innerPolygons) .join("path") .attr("class", "inner-polygons") .attr("data-sector", d => d.data.country_name) .attr("fill", d => color(d.data.region_name)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill-opacity", 0.4) // .each(function(d, i) { // d._originalIndex = i; // }) .on("mouseenter", function(event, d) { const avgFormatted = formatSI(d.data.x2024); const latestFormatted = formatSI(d.data.x2025); // d3.select(this).call(bringToFront); tooltip.style("display", "block") .attr("class", "tooltip") .html(`${d.data.country_name || ""}
2024: $${avgFormatted}
2025: $${latestFormatted}
Difference: -${d.data.decline_pct}%`); const [x, y] = d3.pointer(event, document.body); tooltip.style("left", (x + 30) + "px").style("top", (y + 30) + "px"); highlightPolygon(this.getAttribute("data-sector")); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, document.body); tooltip.style("left", (x + 30) + "px").style("top", (y + 30) + "px"); }) .on("mouseleave", () => { tooltip.style("display", "none"); resetHighlight(); // d3.select(this).call(sendBack); }); // --- Draw dashed outer boundaries on top --- g.append("g") .attr("class", "outer-boundaries") .selectAll("path") .data(leaves) .join("path") .attr("d", d => "M" + d.polygon.map(p => p.join(",")).join("L") + "Z") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-dasharray", "3 3") .attr("stroke-width", 1); // Find sector-level polygons (depth === 1 in hierarchy) const sectorNodes = root.children; // who_rgions // Calculate centroids of each sector's Voronoi polygon const sectorLabels = sectorNodes.map(sec => { var sect= sec.data.name const cleanName = whoRegionMap.get(sect) || sect; return { name: cleanName, centroid: d3.polygonCentroid(sec.polygon) }; }); const labels = svg.append("g") .attr("class", "sector-labels") .selectAll("g") .data(sectorLabels) .join("g") .attr("transform", d => `translate(${d.centroid[0]}, ${d.centroid[1]})`); // --- White outline (halo) --- labels.append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "14px") .style("font-weight", "bold") .style("pointer-events", "none") .style("fill", "none") .style("stroke", "white") .style("stroke-width", "4px") // thickness of border .style("stroke-linejoin", "round") .text(d => d.name); // --- Actual black text on top --- labels.append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "14px") .style("font-weight", "bold") .style("pointer-events", "none") .style("fill", "#000") // main text color .text(d => d.name); // STORE REFS ON SVG NODE (THIS IS THE MAGIC) svg.node().__g = g; return svg.node(); // RETURN ONLY SVG — NO OBJECT }