aid_mercator_map = { const _width_ = 900; const _height_ = 500; const margins = {top: 30, left: 30, bottom: 60, right: 130}; const titles = { chart: "Geographical Distribution: Aid Donors vs Recipients", x: "", y: "" }; const map = instantiate_chart({ width: _width_, height: _height_, margins: margins, titles: titles }); const aiddata = process_data(aiddata_raw); // Create a lookup object for quick access const countryLookup = {}; aiddata.forEach(d => { countryLookup[d.country] = d; }); const projection = d3.geoNaturalEarth1() .scale(190) .center([0, 20]) .translate([_width_ / 2, _height_ / 2]); const path = d3.geoPath().projection(projection); // Color scale: log scale for donor/recipient ratio // ratio < 0.1 = strong recipient (red) // ratio around 1 = balanced (gray) // ratio > 10 = strong donor (blue) const c_scale = d3.scaleLog() .domain([0.001, 0.1, 1, 10, 1000]) .range(["#b71c1c", "#e57373", "#90a4ae", "#64b5f6", "#0d47a1"]) .clamp(true); // Load world geography data const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const countries = topojson.feature(world, world.objects.countries); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "rgba(0, 0, 0, 0.9)") .style("color", "white") .style("padding", "10px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0) .style("max-width", "250px"); const mapGroup = map.chart.append("g").attr("class", "map-group"); mapGroup .selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", path) .attr("fill", d => { const countryName = d.properties.name; // Try to find the country in our data let countryData = countryLookup[countryName]; // console.log(countryData) // Try alternative names if (!countryData) { for (let [key, value] of Object.entries(countryNames)) { if (countryName.includes(key) || key.includes(countryName)) { countryData = countryLookup[key]; break; } } } if (countryData && (countryData.donated > 0 || countryData.received > 0)) { // console.log(countryData.ratio) return c_scale(countryData.ratio); } return "#e0e0e0"; // Gray for countries not in dataset }) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .on("mouseover", function(event, d) { const countryName = d.properties.name; let countryData = countryLookup[countryName]; // Try alternative names if (!countryData) { for (let [key, value] of Object.entries(countryNames)) { if (countryName.includes(key) || key.includes(countryName)) { countryData = countryLookup[key]; break; } } } d3.select(this) .attr("stroke", "#333") .attr("stroke-width", 2); if (countryData && (countryData.donated > 0 || countryData.received > 0)) { const type = countryData.ratio > 2 ? "Net Donor" : countryData.ratio < 0.5 ? "Net Recipient" : "Balanced"; tooltip .style("opacity", 1) .html(` ${countryData.country}
Type: ${type}
Donated: $${countryData.donated.toLocaleString()}
Received: $${countryData.received.toLocaleString()}
Ratio: ${countryData.ratio.toFixed(2)} `); } else { tooltip .style("opacity", 1) .html(`${countryName}
No data available`); } }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 15) + "px"); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 0.5); tooltip.style("opacity", 0); }); // Add legend const legendWidth = 20; const legendHeight = 200; const legend = map.chart .append("g") .attr("transform", `translate(${_width_ + 20}, ${(_height_ - legendHeight) / 2})`); // Create gradient for legend const defs = map.container.append("defs"); const linearGradient = defs.append("linearGradient") .attr("id", "legend-gradient") .attr("x1", "0%") .attr("y1", "100%") .attr("x2", "0%") .attr("y2", "0%"); const stops = [ {offset: "0%", color: "#b71c1c"}, {offset: "25%", color: "#e57373"}, {offset: "50%", color: "#90a4ae"}, {offset: "75%", color: "#64b5f6"}, {offset: "100%", color: "#0d47a1"} ]; stops.forEach(s => { linearGradient.append("stop") .attr("offset", s.offset) .attr("stop-color", s.color); }); legend.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#legend-gradient)") .attr("stroke", "#333") .attr("stroke-width", 0.5); // Legend labels const legendLabels = [ {y: 0, text: "Strong Donor", anchor: "start"}, {y: legendHeight / 2, text: "Balanced", anchor: "start"}, {y: legendHeight, text: "Strong Recipient", anchor: "start"} ]; legendLabels.forEach(l => { legend.append("text") .attr("x", legendWidth + 8) .attr("y", l.y + 4) .attr("text-anchor", l.anchor) .style("font-size", "11px") .text(l.text); }); // Zoom function const zoom = d3.zoom() .scaleExtent([1, 8]) // min and max zoom levels .on("zoom", (event) => { mapGroup.attr("transform", event.transform); }); // Apply zoom to the SVG container map.container.call(zoom); // reset view button map.chart.append("text") .attr("x", 40) .attr("y", 40) .text("Reset View") .attr("fill", "#007bff") .attr("cursor", "pointer") .style("font-size", "20px") .on("click", () => { map.container.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); }); return Object.assign(map.container.node(), { data: aiddata, projection: projection }); }