29:null 2a:["$","title",null,{"children":"Plot World Map Cartogram | Peter's Workspace | Observable"}] 2f:T44a4,dashboard = { const data = await FileAttachment("3-9-2026_data_EDP.csv").csv({typed: true}); const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const featureFn = topojson.feature || (topojson.default && topojson.default.feature); if (!featureFn) throw new Error("topojson.feature could not be loaded."); const countries = featureFn(world, world.objects.countries).features; const metrics = { LEX: "Life Expectancy at Birth", "Health Ex per Cap": "Health Expenditure per Capita", "Physicians (per 1,000 people)": "Physicians per 1,000 People", "UHC.1": "Universal Health Coverage Index" }; const metricFormats = { LEX: d3.format(".1f"), "Health Ex per Cap": d3.format("$,.0f"), "Physicians (per 1,000 people)": d3.format(".2f"), "UHC.1": d3.format(".0f") }; const years = Array.from( new Set(data.map(d => +d.Year).filter(Number.isFinite)) ).sort(d3.ascending); const normalize = s => (s || "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-zA-Z0-9]+/g, "") .toLowerCase(); const aliases = new Map([ ["unitedstatesofamerica", "USA"], ["unitedstates", "USA"], ["canada", "Canada"], ["mexico", "Mexico"], ["unitedkingdom", "UK"], ["czechia", "Czech Republic"], ["slovakia", "Slovak Republic"], ["kyrgyzstan", "Kyrgyz Republic"], ["russianfederation", "Russia"], ["russia", "Russia"], ["egyptarabrep", "Egypt"], ["iranislamicrep", "Iran"], ["turkiye", "Turkey"], ["southkorea", "South Korea"], ["northmacedonia", "North Macedonia"], ["democraticrepublicofthecongo", "Congo, Dem. Rep."], ["republicofthecongo", "Congo, Rep."], ["cotedivoire", "Cote d'Ivoire"], ["laopdr", "Laos"], ["syrianarabrepublic", "Syria"], ["unitedrepublicoftanzania", "Tanzania"], ["venezuelabolivarianrepublicof", "Venezuela"], ["boliviaplurinationalstateof", "Bolivia"], ["bruneidarussalam", "Brunei"], ["thegambia", "Gambia"], ["bahamasthe", "Bahamas"], ["timorleste", "Timor-Leste"] ]); const datasetNames = new Map( Array.from(new Set(data.map(d => d["Country Name"]).filter(Boolean))) .map(name => [normalize(name), name]) ); function matchCountry(mapName) { const key = normalize(mapName); return aliases.get(key) || datasetNames.get(key) || null; } const colorInterpolator = d3.interpolateRgbBasis([ "#d73027", "#fdae61", "#fee08b", "#66bd63", "#4575b4" ]); let selectedColorMetric = "LEX"; let selectedSizeMetric = "Health Ex per Cap"; let selectedYear = d3.max(years); let selectedCountries = []; // Larger, screen-filling layout const layoutWidth = 1180; const layoutHeight = 500; function buildMercatorPositions() { const projection = d3.geoMercator().fitExtent( [[18, 24], [layoutWidth - 18, layoutHeight - 18]], {type: "FeatureCollection", features: countries} ); const path = d3.geoPath(projection); const positions = new Map(); countries.forEach(f => { const country = matchCountry(f.properties && f.properties.name); if (!country) return; let [x, y] = path.centroid(f); if (!Number.isFinite(x) || !Number.isFinite(y)) { const c = d3.geoCentroid(f); const p = projection(c); if (p) [x, y] = p; } if (!Number.isFinite(x) || !Number.isFinite(y)) return; positions.set(country, {x, y}); }); return positions; } const staticMercatorPositions = buildMercatorPositions(); const wrap = document.createElement("div"); wrap.style.fontFamily = "Inter, system-ui, sans-serif"; wrap.style.maxWidth = "1220px"; wrap.style.margin = "0 auto"; wrap.style.padding = "4px 6px"; wrap.innerHTML = `

Global Health Square Cartogram, 2000–2023

Squares use Mercator-projected country positions. Click up to two countries to compare trends.

COLOR METRIC

SIZE METRIC

YEAR

${selectedYear}

`; const colorMetricSelect = wrap.querySelector("#colorMetric"); const sizeMetricSelect = wrap.querySelector("#sizeMetric"); const yearInput = wrap.querySelector("#year"); const yearLabel = wrap.querySelector("#yearLabel"); const clearBtn = wrap.querySelector("#clear"); const cartogramDiv = wrap.querySelector("#cartogram"); const colorLegendDiv = wrap.querySelector("#colorLegend"); const sizeLegendDiv = wrap.querySelector("#sizeLegend"); const trendDiv = wrap.querySelector("#trend"); const noteDiv = wrap.querySelector("#note"); for (const [key, label] of Object.entries(metrics)) { const opt1 = document.createElement("option"); opt1.value = key; opt1.textContent = label; colorMetricSelect.appendChild(opt1); const opt2 = document.createElement("option"); opt2.value = key; opt2.textContent = label; sizeMetricSelect.appendChild(opt2); } colorMetricSelect.value = selectedColorMetric; sizeMetricSelect.value = selectedSizeMetric; function getValue(row, metric) { if (!row) return null; const v = +row[metric]; return Number.isFinite(v) ? v : null; } function getYearRows() { return data.filter(d => +d.Year === selectedYear); } function renderColorLegend(min, max) { const width = 360; const height = 62; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = 1; const ctx = canvas.getContext("2d"); for (let i = 0; i < width; i++) { const t = i / (width - 1); ctx.fillStyle = colorInterpolator(t); ctx.fillRect(i, 0, 1, 1); } const format = metricFormats[selectedColorMetric]; const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", width); svg.setAttribute("height", height); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); svg.innerHTML = ` ${format(min)} ${format(max)} Color: ${metrics[selectedColorMetric]} `; colorLegendDiv.replaceChildren(svg); } function renderSizeLegend(min, max, sizeScale) { let vals; let labels; if (selectedSizeMetric === "Health Ex per Cap") { vals = [0, 5000, 15000]; labels = ["$0", "$5,000", "$15,000"]; } else { const mid = (min + max) / 2; vals = [min, mid, max]; labels = vals.map(v => metricFormats[selectedSizeMetric](v)); } const sizes = vals.map(v => sizeScale(v)); const svg = d3.create("svg") .attr("width", 280) .attr("height", 94); svg.append("text") .attr("x", 0) .attr("y", 14) .attr("font-size", 12) .attr("fill", "#666") .text(`Size: ${metrics[selectedSizeMetric]}`); [0, 1, 2].forEach(i => { const s = sizes[i]; const x = 18 + i * 86; const y = 40 - s / 2; svg.append("rect") .attr("x", x) .attr("y", y) .attr("width", s) .attr("height", s) .attr("fill", "#d9d9d9") .attr("stroke", "#888"); svg.append("text") .attr("x", x + s / 2) .attr("y", 78) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#444") .text(labels[i]); }); sizeLegendDiv.replaceChildren(svg.node()); } function toggleCountry(country) { const idx = selectedCountries.indexOf(country); if (idx >= 0) { selectedCountries = selectedCountries.filter(c => c !== country); } else if (selectedCountries.length < 2) { selectedCountries = [...selectedCountries, country]; } else { selectedCountries = [selectedCountries[1], country]; } } function renderCartogram() { const rows = getYearRows(); const rowByCountry = new Map(rows.map(d => [d["Country Name"], d])); const colorValues = rows .map(d => getValue(d, selectedColorMetric)) .filter(v => v != null); const sizeValues = rows .map(d => getValue(d, selectedSizeMetric)) .filter(v => v != null); if (!colorValues.length || !sizeValues.length) { cartogramDiv.textContent = "No data available for this selection."; colorLegendDiv.textContent = ""; sizeLegendDiv.textContent = ""; return; } const colorMin = d3.min(colorValues); const colorMax = d3.max(colorValues); const sizeMax = d3.max(sizeValues); const colorScale = d3.scaleSequential(colorInterpolator).domain([colorMin, colorMax]); // Larger range so neighboring country borders touch much more often const sizeScale = d3.scaleSqrt() .domain([0, Math.max(sizeMax, 15000)]) .range([18, 42]) .clamp(true); renderColorLegend(colorMin, colorMax); renderSizeLegend(0, sizeMax, sizeScale); const nodes = rows .map(row => { const country = row["Country Name"]; const pos = staticMercatorPositions.get(country); if (!pos) return null; const colorValue = getValue(row, selectedColorMetric); const sizeValue = getValue(row, selectedSizeMetric); return { country, code: row["Country Code"], row, colorValue, sizeValue, side: sizeValue == null ? 18 : sizeScale(sizeValue), x: pos.x, y: pos.y }; }) .filter(Boolean); const svg = d3.create("svg") .attr("viewBox", `0 0 ${layoutWidth} ${layoutHeight}`) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "white"); svg.append("rect") .attr("width", layoutWidth) .attr("height", layoutHeight) .attr("fill", "#fafafa"); svg.append("text") .attr("x", 12) .attr("y", 20) .attr("font-size", 12) .attr("fill", "#666") .text("Squares use Mercator-projected country positions. Click up to two countries to compare."); const g = svg.append("g"); const squares = g.selectAll("g") .data(nodes) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer") .on("click", (event, d) => { toggleCountry(d.country); render(); }); squares.append("rect") .attr("x", d => -d.side / 2) .attr("y", d => -d.side / 2) .attr("width", d => d.side) .attr("height", d => d.side) .attr("fill", d => d.colorValue == null ? "#d3d3d3" : colorScale(d.colorValue)) .attr("stroke", d => selectedCountries.includes(d.country) ? "#111" : "#ffffff") .attr("stroke-width", d => selectedCountries.includes(d.country) ? 2 : 1) .attr("rx", 1); squares.append("text") .attr("text-anchor", "middle") .attr("dy", "0.33em") .attr("font-size", d => d.side >= 30 ? 11 : d.side >= 22 ? 9 : 0) .attr("font-weight", 700) .attr("fill", "#102030") .style("pointer-events", "none") .text(d => d.side >= 22 ? d.code : ""); squares.append("title") .text(d => { const row = d.row; return [ d.country, `Year: ${selectedYear}`, `Color metric (${metrics[selectedColorMetric]}): ${d.colorValue == null ? "No data" : metricFormats[selectedColorMetric](d.colorValue)}`, `Size metric (${metrics[selectedSizeMetric]}): ${d.sizeValue == null ? "No data" : metricFormats[selectedSizeMetric](d.sizeValue)}` ].join("\n"); }); cartogramDiv.replaceChildren(svg.node()); } function renderTrend() { trendDiv.innerHTML = ""; if (!selectedCountries.length) { trendDiv.innerHTML = `

Click one or two squares to compare trends over time for the current color metric.

`; return; } const comparisonText = document.createElement("div"); comparisonText.style.margin = "0 0 10px 0"; comparisonText.style.fontSize = "15px"; comparisonText.style.color = "#444"; if (selectedCountries.length === 1) { comparisonText.innerHTML = `${selectedCountries[0]} is selected for trend review using ${metrics[selectedColorMetric]}.`; } else { comparisonText.innerHTML = `${selectedCountries[0]} and ${selectedCountries[1]} are selected for comparison using ${metrics[selectedColorMetric]}.`; } const series = selectedCountries.flatMap(country => data .filter(d => d["Country Name"] === country) .map(d => ({ Country: country, Year: +d.Year, Value: getValue(d, selectedColorMetric) })) .filter(d => d.Value != null) ); const chart = Plot.plot({ width: 1180, height: 280, marginLeft: 60, x: {label: "Year"}, y: {label: metrics[selectedColorMetric], grid: true}, color: { legend: false, domain: selectedCountries, range: ["#1d4ed8", "#dc2626"] }, marks: [ Plot.lineY(series, { x: "Year", y: "Value", stroke: "Country", strokeWidth: 3 }), Plot.dot(series, { x: "Year", y: "Value", fill: "Country", r: 4, title: d => `${d.Country}\n${d.Year}\n${metrics[selectedColorMetric]}: ${metricFormats[selectedColorMetric](d.Value)}` }) ] }); const legend = document.createElement("div"); legend.style.display = "flex"; legend.style.gap = "16px"; legend.style.alignItems = "center"; legend.style.margin = "0 0 10px 0"; legend.style.fontSize = "14px"; selectedCountries.forEach((country, i) => { const item = document.createElement("div"); item.style.display = "flex"; item.style.alignItems = "center"; item.style.gap = "8px"; item.innerHTML = `${country}`; legend.appendChild(item); }); trendDiv.appendChild(comparisonText); trendDiv.appendChild(legend); trendDiv.appendChild(chart); } function renderNote() { const rows = getYearRows(); const colorValid = rows.filter(d => getValue(d, selectedColorMetric) != null).length; const sizeValid = rows.filter(d => getValue(d, selectedSizeMetric) != null).length; noteDiv.innerHTML = ` Selected year: ${selectedYear}
Color metric: ${metrics[selectedColorMetric]} (${colorValid} countries with data)
Size metric: ${metrics[selectedSizeMetric]} (${sizeValid} countries with data)
Selected countries: ${selectedCountries.length ? selectedCountries.join(" and ") : "None"}
Gray squares indicate missing values for the color metric. Countries missing the size metric are shown at the minimum square size. Positions remain fixed across all dropdown and year changes. `; } function render() { yearLabel.textContent = selectedYear; renderCartogram(); renderTrend(); renderNote(); } colorMetricSelect.addEventListener("change", e => { selectedColorMetric = e.target.value; render(); }); sizeMetricSelect.addEventListener("change", e => { selectedSizeMetric = e.target.value; render(); }); yearInput.addEventListener("input", e => { selectedYear = +e.target.value; render(); }); clearBtn.addEventListener("click", () => { selectedCountries = []; render(); }); render(); return wrap; }30:T4bfe,dashboard1 = { const data = await FileAttachment("3-9-2026_data_EDP.csv").csv({typed: true}); const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const featureFn = topojson.feature || (topojson.default && topojson.default.feature); if (!featureFn) throw new Error("topojson.feature could not be loaded."); const countries = featureFn(world, world.objects.countries).features; const metrics = { LEX: "Life Expectancy at Birth", "Health Ex per Cap": "Health Expenditure per Capita", "Physicians (per 1,000 people)": "Physicians per 1,000 People", "UHC.1": "Universal Health Coverage Index" }; const metricFormats = { LEX: d3.format(".1f"), "Health Ex per Cap": d3.format("$,.0f"), "Physicians (per 1,000 people)": d3.format(".2f"), "UHC.1": d3.format(".0f") }; const years = Array.from( new Set(data.map(d => +d.Year).filter(Number.isFinite)) ).sort(d3.ascending); const normalize = s => (s || "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-zA-Z0-9]+/g, "") .toLowerCase(); const aliases = new Map([ ["unitedstatesofamerica", "USA"], ["unitedstates", "USA"], ["canada", "Canada"], ["mexico", "Mexico"], ["unitedkingdom", "UK"], ["czechia", "Czech Republic"], ["slovakia", "Slovak Republic"], ["kyrgyzstan", "Kyrgyz Republic"], ["russianfederation", "Russia"], ["russia", "Russia"], ["egyptarabrep", "Egypt"], ["iranislamicrep", "Iran"], ["turkiye", "Turkey"], ["southkorea", "South Korea"], ["northmacedonia", "North Macedonia"], ["democraticrepublicofthecongo", "Congo, Dem. Rep."], ["republicofthecongo", "Congo, Rep."], ["cotedivoire", "Cote d'Ivoire"], ["laopdr", "Laos"], ["syrianarabrepublic", "Syria"], ["unitedrepublicoftanzania", "Tanzania"], ["venezuelabolivarianrepublicof", "Venezuela"], ["boliviaplurinationalstateof", "Bolivia"], ["bruneidarussalam", "Brunei"], ["thegambia", "Gambia"], ["bahamasthe", "Bahamas"], ["timorleste", "Timor-Leste"] ]); const datasetNames = new Map( Array.from(new Set(data.map(d => d["Country Name"]).filter(Boolean))) .map(name => [normalize(name), name]) ); function matchCountry(mapName) { const key = normalize(mapName); return aliases.get(key) || datasetNames.get(key) || null; } const colorInterpolator = d3.interpolateRgbBasis([ "#d73027", "#fdae61", "#fee08b", "#66bd63", "#4575b4" ]); let selectedColorMetric = "LEX"; let selectedSizeMetric = "Health Ex per Cap"; let selectedYear = d3.max(years); let selectedCountries = []; const layoutWidth = 1180; const layoutHeight = 520; const tileSize = 30; const innerMin = 8; const innerMax = 28; function getValue(row, metric) { if (!row) return null; const v = +row[metric]; return Number.isFinite(v) ? v : null; } function getYearRows() { return data.filter(d => +d.Year === selectedYear); } function buildMercatorTilePositions() { const projection = d3.geoMercator().fitExtent( [[25, 28], [layoutWidth - 25, layoutHeight - 22]], {type: "FeatureCollection", features: countries} ); const path = d3.geoPath(projection); const centroids = countries .map(f => { const country = matchCountry(f.properties && f.properties.name); if (!country) return null; let [x, y] = path.centroid(f); if (!Number.isFinite(x) || !Number.isFinite(y)) { const c = d3.geoCentroid(f); const p = projection(c); if (p) [x, y] = p; } if (!Number.isFinite(x) || !Number.isFinite(y)) return null; return { country, x, y }; }) .filter(Boolean) .sort((a, b) => a.y - b.y || a.x - b.x); const x0 = 20; const y0 = 34; const cols = Math.floor((layoutWidth - x0 * 2) / tileSize); const rows = Math.floor((layoutHeight - y0 * 2) / tileSize); const occupied = new Set(); const positions = new Map(); function nearestOpenCell(targetCol, targetRow) { for (let radius = 0; radius < Math.max(cols, rows); radius++) { for (let dy = -radius; dy <= radius; dy++) { for (let dx = -radius; dx <= radius; dx++) { const c = targetCol + dx; const r = targetRow + dy; if (c < 0 || c >= cols || r < 0 || r >= rows) continue; const key = `${c},${r}`; if (!occupied.has(key)) return { c, r, key }; } } } return null; } centroids.forEach(d => { const col = Math.max(0, Math.min(cols - 1, Math.round((d.x - x0) / tileSize))); const row = Math.max(0, Math.min(rows - 1, Math.round((d.y - y0) / tileSize))); const open = nearestOpenCell(col, row); if (!open) return; occupied.add(open.key); positions.set(d.country, { x: x0 + open.c * tileSize + tileSize / 2, y: y0 + open.r * tileSize + tileSize / 2 }); }); return positions; } const tilePositions = buildMercatorTilePositions(); const wrap = document.createElement("div"); wrap.style.fontFamily = "Inter, system-ui, sans-serif"; wrap.style.maxWidth = "1220px"; wrap.style.margin = "0 auto"; wrap.style.padding = "4px 6px"; wrap.innerHTML = `

Global Health Square Cartogram, 2000–2023

Fixed Mercator-based tile grid. Outer tiles show country position and color; inner squares show the size metric. Click any number of countries to compare.

COLOR METRIC

SIZE METRIC

YEAR

${selectedYear}

`; const colorMetricSelect = wrap.querySelector("#colorMetric"); const sizeMetricSelect = wrap.querySelector("#sizeMetric"); const yearInput = wrap.querySelector("#year"); const yearLabel = wrap.querySelector("#yearLabel"); const clearBtn = wrap.querySelector("#clear"); const cartogramDiv = wrap.querySelector("#cartogram"); const colorLegendDiv = wrap.querySelector("#colorLegend"); const sizeLegendDiv = wrap.querySelector("#sizeLegend"); const trendDiv = wrap.querySelector("#trend"); const noteDiv = wrap.querySelector("#note"); for (const [key, label] of Object.entries(metrics)) { const opt1 = document.createElement("option"); opt1.value = key; opt1.textContent = label; colorMetricSelect.appendChild(opt1); const opt2 = document.createElement("option"); opt2.value = key; opt2.textContent = label; sizeMetricSelect.appendChild(opt2); } colorMetricSelect.value = selectedColorMetric; sizeMetricSelect.value = selectedSizeMetric; function renderColorLegend(min, max) { const width = 360; const height = 62; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = 1; const ctx = canvas.getContext("2d"); for (let i = 0; i < width; i++) { const t = i / (width - 1); ctx.fillStyle = colorInterpolator(t); ctx.fillRect(i, 0, 1, 1); } const format = metricFormats[selectedColorMetric]; const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", width); svg.setAttribute("height", height); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); svg.innerHTML = ` ${format(min)} ${format(max)} Color: ${metrics[selectedColorMetric]} `; colorLegendDiv.replaceChildren(svg); } function renderSizeLegend(sizeScale) { let vals; let labels; if (selectedSizeMetric === "Health Ex per Cap") { vals = [0, 5000, 15000]; labels = ["$0", "$5,000", "$15,000"]; } else { const rows = getYearRows(); const sizeValues = rows .map(d => getValue(d, selectedSizeMetric)) .filter(v => v != null); const max = d3.max(sizeValues); const mid = max / 2; vals = [0, mid, max]; labels = vals.map(v => metricFormats[selectedSizeMetric](v)); } const sizes = vals.map(v => sizeScale(v)); const svg = d3.create("svg") .attr("width", 280) .attr("height", 94); svg.append("text") .attr("x", 0) .attr("y", 14) .attr("font-size", 12) .attr("fill", "#666") .text(`Inner square size: ${metrics[selectedSizeMetric]}`); [0, 1, 2].forEach(i => { const s = sizes[i]; const x = 18 + i * 86; const y = 40 - s / 2; svg.append("rect") .attr("x", x) .attr("y", y) .attr("width", tileSize) .attr("height", tileSize) .attr("fill", "#f1f1f1") .attr("stroke", "#bbb"); svg.append("rect") .attr("x", x + (tileSize - s) / 2) .attr("y", y + (tileSize - s) / 2) .attr("width", s) .attr("height", s) .attr("fill", "#888"); svg.append("text") .attr("x", x + tileSize / 2) .attr("y", 78) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#444") .text(labels[i]); }); sizeLegendDiv.replaceChildren(svg.node()); } function toggleCountry(country) { if (selectedCountries.includes(country)) { selectedCountries = selectedCountries.filter(c => c !== country); } else { selectedCountries = [...selectedCountries, country]; } } function renderCartogram() { const rows = getYearRows(); const colorValues = rows .map(d => getValue(d, selectedColorMetric)) .filter(v => v != null); const sizeValues = rows .map(d => getValue(d, selectedSizeMetric)) .filter(v => v != null); if (!colorValues.length || !sizeValues.length) { cartogramDiv.textContent = "No data available for this selection."; colorLegendDiv.textContent = ""; sizeLegendDiv.textContent = ""; return; } const colorMin = d3.min(colorValues); const colorMax = d3.max(colorValues); const sizeMax = d3.max(sizeValues); const colorScale = d3.scaleSequential(colorInterpolator).domain([colorMin, colorMax]); const sizeScale = d3.scaleSqrt() .domain([0, Math.max(sizeMax, 15000)]) .range([innerMin, innerMax]) .clamp(true); renderColorLegend(colorMin, colorMax); renderSizeLegend(sizeScale); const nodes = rows .map(row => { const country = row["Country Name"]; const pos = tilePositions.get(country); if (!pos) return null; const colorValue = getValue(row, selectedColorMetric); const sizeValue = getValue(row, selectedSizeMetric); return { country, code: row["Country Code"], row, colorValue, sizeValue, inner: sizeValue == null ? innerMin : sizeScale(sizeValue), x: pos.x, y: pos.y }; }) .filter(Boolean); const svg = d3.create("svg") .attr("viewBox", `0 0 ${layoutWidth} ${layoutHeight}`) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "white"); svg.append("rect") .attr("width", layoutWidth) .attr("height", layoutHeight) .attr("fill", "#fafafa"); svg.append("text") .attr("x", 12) .attr("y", 20) .attr("font-size", 12) .attr("fill", "#666") .text("Fixed touching tile grid from Mercator positions. Click countries to compare."); const g = svg.append("g"); const squares = g.selectAll("g") .data(nodes) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer") .on("click", (event, d) => { toggleCountry(d.country); render(); }); // Outer touching tile squares.append("rect") .attr("x", -tileSize / 2) .attr("y", -tileSize / 2) .attr("width", tileSize) .attr("height", tileSize) .attr("fill", d => d.colorValue == null ? "#d3d3d3" : colorScale(d.colorValue)) .attr("stroke", d => selectedCountries.includes(d.country) ? "#111" : "#ffffff") .attr("stroke-width", d => selectedCountries.includes(d.country) ? 2 : 1) .attr("rx", 1); // Inner size square squares.append("rect") .attr("x", d => -d.inner / 2) .attr("y", d => -d.inner / 2) .attr("width", d => d.inner) .attr("height", d => d.inner) .attr("fill", "rgba(255,255,255,0.35)") .attr("stroke", "rgba(0,0,0,0.18)") .attr("stroke-width", 0.7) .attr("rx", 0.5); squares.append("text") .attr("text-anchor", "middle") .attr("dy", "0.33em") .attr("font-size", 10) .attr("font-weight", 700) .attr("fill", "#102030") .style("pointer-events", "none") .text(d => d.code); squares.append("title") .text(d => { const row = d.row; return [ d.country, `Year: ${selectedYear}`, `Color metric (${metrics[selectedColorMetric]}): ${d.colorValue == null ? "No data" : metricFormats[selectedColorMetric](d.colorValue)}`, `Size metric (${metrics[selectedSizeMetric]}): ${d.sizeValue == null ? "No data" : metricFormats[selectedSizeMetric](d.sizeValue)}` ].join("\n"); }); cartogramDiv.replaceChildren(svg.node()); } function renderTrend() { trendDiv.innerHTML = ""; if (!selectedCountries.length) { trendDiv.innerHTML = `

Click any number of countries to compare trends over time for the current color metric.

`; return; } const comparisonText = document.createElement("div"); comparisonText.style.margin = "0 0 10px 0"; comparisonText.style.fontSize = "15px"; comparisonText.style.color = "#444"; comparisonText.innerHTML = `${selectedCountries.length} countries selected for comparison using ${metrics[selectedColorMetric]}.`; const series = selectedCountries.flatMap(country => data .filter(d => d["Country Name"] === country) .map(d => ({ Country: country, Year: +d.Year, Value: getValue(d, selectedColorMetric) })) .filter(d => d.Value != null) ); if (!series.length) { trendDiv.innerHTML = `

No trend data available for the selected countries.

`; return; } const palette = [ ...d3.schemeTableau10, ...d3.schemeSet3 ]; const colorDomain = selectedCountries; const colorRange = colorDomain.map((_, i) => palette[i % palette.length]); const chart = Plot.plot({ width: 1180, height: 300, marginLeft: 60, x: {label: "Year"}, y: {label: metrics[selectedColorMetric], grid: true}, color: { legend: false, domain: colorDomain, range: colorRange }, marks: [ Plot.lineY(series, { x: "Year", y: "Value", stroke: "Country", strokeWidth: 2.5 }), Plot.dot(series, { x: "Year", y: "Value", fill: "Country", r: 3.5, title: d => `${d.Country}\n${d.Year}\n${metrics[selectedColorMetric]}: ${metricFormats[selectedColorMetric](d.Value)}` }) ] }); const legend = document.createElement("div"); legend.style.display = "flex"; legend.style.flexWrap = "wrap"; legend.style.gap = "12px 18px"; legend.style.alignItems = "center"; legend.style.margin = "0 0 10px 0"; legend.style.fontSize = "13px"; selectedCountries.forEach((country, i) => { const item = document.createElement("div"); item.style.display = "flex"; item.style.alignItems = "center"; item.style.gap = "7px"; item.innerHTML = `${country}`; legend.appendChild(item); }); trendDiv.appendChild(comparisonText); trendDiv.appendChild(legend); trendDiv.appendChild(chart); } function renderNote() { const rows = getYearRows(); const colorValid = rows.filter(d => getValue(d, selectedColorMetric) != null).length; const sizeValid = rows.filter(d => getValue(d, selectedSizeMetric) != null).length; noteDiv.innerHTML = ` Selected year: ${selectedYear}
Color metric: ${metrics[selectedColorMetric]} (${colorValid} countries with data)
Size metric: ${metrics[selectedSizeMetric]} (${sizeValid} countries with data)
Selected countries: ${selectedCountries.length ? selectedCountries.join(", ") : "None"}
Outer tiles show country location and color. Inner squares show the size metric. Gray tiles indicate missing values for the color metric. `; } function render() { yearLabel.textContent = selectedYear; renderCartogram(); renderTrend(); renderNote(); } colorMetricSelect.addEventListener("change", e => { selectedColorMetric = e.target.value; render(); }); sizeMetricSelect.addEventListener("change", e => { selectedSizeMetric = e.target.value; render(); }); yearInput.addEventListener("input", e => { selectedYear = +e.target.value; render(); }); clearBtn.addEventListener("click", () => { selectedCountries = []; render(); }); render(); return wrap; }31:T490f,dashboard2 = { const data = await FileAttachment("3-9-2026_data_EDP.csv").csv({typed: true}); const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const featureFn = topojson.feature || (topojson.default && topojson.default.feature); if (!featureFn) throw new Error("topojson.feature could not be loaded."); const countries = featureFn(world, world.objects.countries).features; const metrics = { LEX: "Life Expectancy at Birth", "Health Ex per Cap": "Health Expenditure per Capita", "Physicians (per 1,000 people)": "Physicians per 1,000 People", "UHC.1": "Universal Health Coverage Index" }; const metricFormats = { LEX: d3.format(".1f"), "Health Ex per Cap": d3.format("$,.0f"), "Physicians (per 1,000 people)": d3.format(".2f"), "UHC.1": d3.format(".0f") }; const years = Array.from( new Set(data.map(d => +d.Year).filter(Number.isFinite)) ).sort(d3.ascending); const normalize = s => (s || "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-zA-Z0-9]+/g, "") .toLowerCase(); const aliases = new Map([ ["unitedstatesofamerica", "USA"], ["unitedstates", "USA"], ["canada", "Canada"], ["mexico", "Mexico"], ["unitedkingdom", "UK"], ["czechia", "Czech Republic"], ["slovakia", "Slovak Republic"], ["kyrgyzstan", "Kyrgyz Republic"], ["russianfederation", "Russia"], ["russia", "Russia"], ["egyptarabrep", "Egypt"], ["iranislamicrep", "Iran"], ["turkiye", "Turkey"], ["southkorea", "South Korea"], ["northmacedonia", "North Macedonia"], ["democraticrepublicofthecongo", "Congo, Dem. Rep."], ["republicofthecongo", "Congo, Rep."], ["cotedivoire", "Cote d'Ivoire"], ["laopdr", "Laos"], ["syrianarabrepublic", "Syria"], ["unitedrepublicoftanzania", "Tanzania"], ["venezuelabolivarianrepublicof", "Venezuela"], ["boliviaplurinationalstateof", "Bolivia"], ["bruneidarussalam", "Brunei"], ["thegambia", "Gambia"], ["bahamasthe", "Bahamas"], ["timorleste", "Timor-Leste"] ]); const datasetNames = new Map( Array.from(new Set(data.map(d => d["Country Name"]).filter(Boolean))) .map(name => [normalize(name), name]) ); function matchCountry(mapName) { const key = normalize(mapName); return aliases.get(key) || datasetNames.get(key) || null; } const colorInterpolator = d3.interpolateRgbBasis([ "#d73027", "#fdae61", "#fee08b", "#66bd63", "#4575b4" ]); let selectedColorMetric = "LEX"; let selectedSizeMetric = "Health Ex per Cap"; let selectedYear = d3.max(years); let selectedCountries = []; const layoutWidth = 1180; const layoutHeight = 540; const padding = 2; const cellSize = 26; const minSide = 14; const maxSide = 40; function getValue(row, metric) { if (!row) return null; const v = +row[metric]; return Number.isFinite(v) ? v : null; } function getYearRows() { return data.filter(d => +d.Year === selectedYear); } function buildMercatorTargets() { const projection = d3.geoMercator().fitExtent( [[30, 34], [layoutWidth - 30, layoutHeight - 26]], {type: "FeatureCollection", features: countries} ); const path = d3.geoPath(projection); const positions = new Map(); countries.forEach(f => { const country = matchCountry(f.properties && f.properties.name); if (!country) return; let [x, y] = path.centroid(f); if (!Number.isFinite(x) || !Number.isFinite(y)) { const c = d3.geoCentroid(f); const p = projection(c); if (p) [x, y] = p; } if (!Number.isFinite(x) || !Number.isFinite(y)) return; positions.set(country, {x, y}); }); return positions; } const mercatorTargets = buildMercatorTargets(); const wrap = document.createElement("div"); wrap.style.fontFamily = "Inter, system-ui, sans-serif"; wrap.style.maxWidth = "1220px"; wrap.style.margin = "0 auto"; wrap.style.padding = "4px 6px"; wrap.innerHTML = `

Global Health Square Cartogram, 2000–2023

Squares are anchored to Mercator country positions and adjusted with a force-directed layout to prevent overlap. Click any number of countries to compare.

COLOR METRIC

SIZE METRIC

YEAR

${selectedYear}

`; const colorMetricSelect = wrap.querySelector("#colorMetric"); const sizeMetricSelect = wrap.querySelector("#sizeMetric"); const yearInput = wrap.querySelector("#year"); const yearLabel = wrap.querySelector("#yearLabel"); const clearBtn = wrap.querySelector("#clear"); const cartogramDiv = wrap.querySelector("#cartogram"); const colorLegendDiv = wrap.querySelector("#colorLegend"); const sizeLegendDiv = wrap.querySelector("#sizeLegend"); const trendDiv = wrap.querySelector("#trend"); const noteDiv = wrap.querySelector("#note"); for (const [key, label] of Object.entries(metrics)) { const opt1 = document.createElement("option"); opt1.value = key; opt1.textContent = label; colorMetricSelect.appendChild(opt1); const opt2 = document.createElement("option"); opt2.value = key; opt2.textContent = label; sizeMetricSelect.appendChild(opt2); } colorMetricSelect.value = selectedColorMetric; sizeMetricSelect.value = selectedSizeMetric; function renderColorLegend(min, max) { const width = 360; const height = 62; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = 1; const ctx = canvas.getContext("2d"); for (let i = 0; i < width; i++) { const t = i / (width - 1); ctx.fillStyle = colorInterpolator(t); ctx.fillRect(i, 0, 1, 1); } const format = metricFormats[selectedColorMetric]; const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", width); svg.setAttribute("height", height); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); svg.innerHTML = ` ${format(min)} ${format(max)} Color: ${metrics[selectedColorMetric]} `; colorLegendDiv.replaceChildren(svg); } function renderSizeLegend(sizeScale) { let vals; let labels; if (selectedSizeMetric === "Health Ex per Cap") { vals = [0, 5000, 15000]; labels = ["$0", "$5,000", "$15,000"]; } else { const rows = getYearRows(); const sizeValues = rows .map(d => getValue(d, selectedSizeMetric)) .filter(v => v != null); const max = d3.max(sizeValues); const mid = max / 2; vals = [0, mid, max]; labels = vals.map(v => metricFormats[selectedSizeMetric](v)); } const sizes = vals.map(v => sizeScale(v)); const svg = d3.create("svg") .attr("width", 280) .attr("height", 94); svg.append("text") .attr("x", 0) .attr("y", 14) .attr("font-size", 12) .attr("fill", "#666") .text(`Size: ${metrics[selectedSizeMetric]}`); [0, 1, 2].forEach(i => { const s = sizes[i]; const x = 18 + i * 86; const y = 40 - s / 2; svg.append("rect") .attr("x", x) .attr("y", y) .attr("width", s) .attr("height", s) .attr("fill", "#d9d9d9") .attr("stroke", "#888"); svg.append("text") .attr("x", x + s / 2) .attr("y", 78) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#444") .text(labels[i]); }); sizeLegendDiv.replaceChildren(svg.node()); } function toggleCountry(country) { if (selectedCountries.includes(country)) { selectedCountries = selectedCountries.filter(c => c !== country); } else { selectedCountries = [...selectedCountries, country]; } } function forceResolve(nodes) { const simNodes = nodes.map(d => ({...d})); const simulation = d3.forceSimulation(simNodes) .force("x", d3.forceX(d => d.tx).strength(0.35)) .force("y", d3.forceY(d => d.ty).strength(0.35)) .force("collide", d3.forceCollide(d => d.side / 2 + 0.8).iterations(4)) .stop(); for (let i = 0; i < 180; i++) simulation.tick(); simNodes.forEach(d => { d.x = Math.max(d.side / 2 + 4, Math.min(layoutWidth - d.side / 2 - 4, d.x)); d.y = Math.max(d.side / 2 + 24, Math.min(layoutHeight - d.side / 2 - 4, d.y)); }); return simNodes; } function renderCartogram() { const rows = getYearRows(); const colorValues = rows .map(d => getValue(d, selectedColorMetric)) .filter(v => v != null); const sizeValues = rows .map(d => getValue(d, selectedSizeMetric)) .filter(v => v != null); if (!colorValues.length || !sizeValues.length) { cartogramDiv.textContent = "No data available for this selection."; colorLegendDiv.textContent = ""; sizeLegendDiv.textContent = ""; return; } const colorMin = d3.min(colorValues); const colorMax = d3.max(colorValues); const sizeMax = d3.max(sizeValues); const colorScale = d3.scaleSequential(colorInterpolator).domain([colorMin, colorMax]); const sizeScale = d3.scaleSqrt() .domain([0, Math.max(sizeMax, 15000)]) .range([minSide, maxSide]) .clamp(true); renderColorLegend(colorMin, colorMax); renderSizeLegend(sizeScale); const baseNodes = rows .map(row => { const country = row["Country Name"]; const pos = mercatorTargets.get(country); if (!pos) return null; const colorValue = getValue(row, selectedColorMetric); const sizeValue = getValue(row, selectedSizeMetric); return { country, code: row["Country Code"], row, colorValue, sizeValue, side: sizeValue == null ? minSide : sizeScale(sizeValue), tx: pos.x, ty: pos.y, x: pos.x, y: pos.y }; }) .filter(Boolean); const nodes = forceResolve(baseNodes); const svg = d3.create("svg") .attr("viewBox", `0 0 ${layoutWidth} ${layoutHeight}`) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "white"); svg.append("rect") .attr("width", layoutWidth) .attr("height", layoutHeight) .attr("fill", "#fafafa"); const projection = d3.geoMercator().fitExtent( [[30, 34], [layoutWidth - 30, layoutHeight - 26]], {type: "FeatureCollection", features: countries} ); const geoPath = d3.geoPath(projection); svg.append("g") .selectAll("path") .data(countries) .join("path") .attr("d", geoPath) .attr("fill", "#e5e7eb") .attr("stroke", "#cbd5e1") .attr("stroke-width", 0.5) .attr("opacity", 0.45); svg.append("text") .attr("x", 12) .attr("y", 20) .attr("font-size", 12) .attr("fill", "#666") .text("Force-directed squares over a faint Mercator world map. Click countries to compare."); const g = svg.append("g"); const squares = g.selectAll("g") .data(nodes) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer") .on("click", (event, d) => { toggleCountry(d.country); render(); }); squares.append("rect") .attr("x", d => -d.side / 2) .attr("y", d => -d.side / 2) .attr("width", d => d.side) .attr("height", d => d.side) .attr("fill", d => d.colorValue == null ? "#d3d3d3" : colorScale(d.colorValue)) .attr("stroke", d => selectedCountries.includes(d.country) ? "#111" : "#ffffff") .attr("stroke-width", d => selectedCountries.includes(d.country) ? 2 : 1) .attr("rx", 1); squares.append("text") .attr("text-anchor", "middle") .attr("dy", "0.33em") .attr("font-size", d => d.side >= 30 ? 11 : d.side >= 22 ? 9 : 0) .attr("font-weight", 700) .attr("fill", "#102030") .style("pointer-events", "none") .text(d => d.side >= 22 ? d.code : ""); squares.append("title") .text(d => { const row = d.row; return [ d.country, `Year: ${selectedYear}`, `Color metric (${metrics[selectedColorMetric]}): ${d.colorValue == null ? "No data" : metricFormats[selectedColorMetric](d.colorValue)}`, `Size metric (${metrics[selectedSizeMetric]}): ${d.sizeValue == null ? "No data" : metricFormats[selectedSizeMetric](d.sizeValue)}` ].join("\n"); }); cartogramDiv.replaceChildren(svg.node()); } function renderTrend() { trendDiv.innerHTML = ""; if (!selectedCountries.length) { trendDiv.innerHTML = `

Click any number of countries to compare trends over time for the current color metric.

`; return; } const comparisonText = document.createElement("div"); comparisonText.style.margin = "0 0 10px 0"; comparisonText.style.fontSize = "15px"; comparisonText.style.color = "#444"; comparisonText.innerHTML = `${selectedCountries.length} countries selected for comparison using ${metrics[selectedColorMetric]}.`; const series = selectedCountries.flatMap(country => data .filter(d => d["Country Name"] === country) .map(d => ({ Country: country, Year: +d.Year, Value: getValue(d, selectedColorMetric) })) .filter(d => d.Value != null) ); if (!series.length) { trendDiv.innerHTML = `

No trend data available for the selected countries.

`; return; } const palette = [...d3.schemeTableau10, ...d3.schemeSet3]; const colorDomain = selectedCountries; const colorRange = colorDomain.map((_, i) => palette[i % palette.length]); const chart = Plot.plot({ width: 1180, height: 300, marginLeft: 60, x: {label: "Year"}, y: {label: metrics[selectedColorMetric], grid: true}, color: { legend: false, domain: colorDomain, range: colorRange }, marks: [ Plot.lineY(series, { x: "Year", y: "Value", stroke: "Country", strokeWidth: 2.5 }), Plot.dot(series, { x: "Year", y: "Value", fill: "Country", r: 3.5, title: d => `${d.Country}\n${d.Year}\n${metrics[selectedColorMetric]}: ${metricFormats[selectedColorMetric](d.Value)}` }) ] }); const legend = document.createElement("div"); legend.style.display = "flex"; legend.style.flexWrap = "wrap"; legend.style.gap = "12px 18px"; legend.style.alignItems = "center"; legend.style.margin = "0 0 10px 0"; legend.style.fontSize = "13px"; selectedCountries.forEach((country, i) => { const item = document.createElement("div"); item.style.display = "flex"; item.style.alignItems = "center"; item.style.gap = "7px"; item.innerHTML = `${country}`; legend.appendChild(item); }); trendDiv.appendChild(comparisonText); trendDiv.appendChild(legend); trendDiv.appendChild(chart); } function renderNote() { const rows = getYearRows(); const colorValid = rows.filter(d => getValue(d, selectedColorMetric) != null).length; const sizeValid = rows.filter(d => getValue(d, selectedSizeMetric) != null).length; noteDiv.innerHTML = ` Selected year: ${selectedYear}
Color metric: ${metrics[selectedColorMetric]} (${colorValid} countries with data)
Size metric: ${metrics[selectedSizeMetric]} (${sizeValid} countries with data)
Selected countries: ${selectedCountries.length ? selectedCountries.join(", ") : "None"}
Gray squares indicate missing values for the color metric. Countries missing the size metric are shown at the minimum square size. `; } function render() { yearLabel.textContent = selectedYear; renderCartogram(); renderTrend(); renderNote(); } colorMetricSelect.addEventListener("change", e => { selectedColorMetric = e.target.value; render(); }); sizeMetricSelect.addEventListener("change", e => { selectedSizeMetric = e.target.value; render(); }); yearInput.addEventListener("input", e => { selectedYear = +e.target.value; render(); }); clearBtn.addEventListener("click", () => { selectedCountries = []; render(); }); render(); return wrap; }32:T4739,dashboard7 = { const data = await FileAttachment("3-9-2026_data_EDP.csv").csv({typed: true}); // CREATE NODES FROM DATA (grid fallback) const nodeCountries = Array.from( new Set(data.map(d => d["Country Code"]).filter(Boolean)) ); const cols = 20; const nodes = nodeCountries.map((id, i) => ({ id: String(id).trim().toUpperCase(), finalX: i % cols, finalY: Math.floor(i / cols) })); const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const featureFn = topojson.feature || (topojson.default && topojson.default.feature); const meshFn = topojson.mesh || (topojson.default && topojson.default.mesh); if (!featureFn) throw new Error("topojson.feature could not be loaded."); if (!meshFn) throw new Error("topojson.mesh could not be loaded."); const countries = featureFn(world, world.objects.countries).features; const statemesh = meshFn(world, world.objects.countries); const metrics = { LEX: "Life Expectancy at Birth", "Health Ex per Cap": "Health Expenditure per Capita", "Physicians (per 1,000 people)": "Physicians per 1,000 People", "UHC.1": "Universal Health Coverage Index" }; const metricFormats = { LEX: d3.format(".1f"), "Health Ex per Cap": d3.format("$,.0f"), "Physicians (per 1,000 people)": d3.format(".2f"), "UHC.1": d3.format(".0f") }; const years = Array.from( new Set(data.map(d => +d.Year).filter(Number.isFinite)) ).sort(d3.ascending); const normalize = s => (s || "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-zA-Z0-9]+/g, "") .toLowerCase(); const aliases = new Map([ ["unitedstatesofamerica", "USA"], ["unitedstates", "USA"], ["unitedkingdom", "UK"], ["democraticrepublicofthecongo", "Congo, Dem. Rep."], ["republicofthecongo", "Congo, Rep."], ["cotedivoire", "Cote d'Ivoire"], ["unitedrepublicoftanzania", "Tanzania"], ["russianfederation", "Russia"], ["egyptarabrep", "Egypt"], ["iranislamicrep", "Iran"], ["kyrgyzstan", "Kyrgyz Republic"], ["slovakia", "Slovak Republic"], ["czechia", "Czech Republic"], ["turkiye", "Turkey"], ["southkorea", "South Korea"], ["laopdr", "Laos"], ["syrianarabrepublic", "Syria"], ["venezuelabolivarianrepublicof", "Venezuela"], ["boliviaplurinationalstateof", "Bolivia"], ["bruneidarussalam", "Brunei"], ["thegambia", "Gambia"], ["bahamasthe", "Bahamas"], ["timorleste", "Timor-Leste"] ]); const datasetNames = new Map( Array.from(new Set(data.map(d => d["Country Name"]).filter(Boolean))) .map(name => [normalize(name), name]) ); function matchCountry(mapName) { const key = normalize(mapName); return aliases.get(key) || datasetNames.get(key) || null; } const layoutWidth = 1180; const layoutHeight = 500; const padding = 2; const cellSize = 26; // This replaces the Mercator centroid logic with your finalX/finalY layout logic. // It assumes you already have a cell named `nodes` with fields: // id, finalX, finalY. const paddingSafe = typeof padding !== "undefined" ? padding : 2; const cellSizeSafe = typeof cellSize !== "undefined" ? cellSize : 26; function buildCartogramPositions(nodes) { const xExtent = d3.extent(nodes, d => d.finalX); const yExtent = d3.extent(nodes, d => d.finalY); const gapPx = paddingSafe; const tilePx = cellSizeSafe - gapPx * 2; function toScreenX(x) { return tilePx + (x - xExtent[0]) / (xExtent[1] - xExtent[0] + 1) * (layoutWidth - tilePx); } function toScreenY(y) { return tilePx + (y - yExtent[0]) / (yExtent[1] - yExtent[0] + 1) * (layoutHeight - tilePx); } const positions = new Map(); nodes.forEach(d => { const code = String(d.id).trim().toUpperCase(); const row = data.find(r => String(r["Country Code"]).trim().toUpperCase() === code); if (!row) return; positions.set(row["Country Name"], { x: toScreenX(d.finalX), y: toScreenY(d.finalY), code }); }); return positions; } const staticCartogramPositions = buildCartogramPositions(nodes); const colorInterpolator = d3.interpolateRgbBasis([ "#d73027", "#fdae61", "#fee08b", "#66bd63", "#4575b4" ]); let selectedColorMetric = "LEX"; let selectedSizeMetric = "Health Ex per Cap"; let selectedYear = d3.max(years); let selectedCountries = []; const wrap = document.createElement("div"); wrap.style.fontFamily = "Inter, system-ui, sans-serif"; wrap.style.maxWidth = "1220px"; wrap.style.margin = "0 auto"; wrap.style.padding = "4px 6px"; wrap.innerHTML = `

Global Health Square Cartogram, 2000–2023

Squares use the finalX/finalY cartogram layout. Click up to two countries to compare trends.

COLOR METRIC

SIZE METRIC

YEAR

${selectedYear}

`; const colorMetricSelect = wrap.querySelector("#colorMetric"); const sizeMetricSelect = wrap.querySelector("#sizeMetric"); const yearInput = wrap.querySelector("#year"); const yearLabel = wrap.querySelector("#yearLabel"); const clearBtn = wrap.querySelector("#clear"); const cartogramDiv = wrap.querySelector("#cartogram"); const colorLegendDiv = wrap.querySelector("#colorLegend"); const sizeLegendDiv = wrap.querySelector("#sizeLegend"); const trendDiv = wrap.querySelector("#trend"); const noteDiv = wrap.querySelector("#note"); for (const [key, label] of Object.entries(metrics)) { const opt1 = document.createElement("option"); opt1.value = key; opt1.textContent = label; colorMetricSelect.appendChild(opt1); const opt2 = document.createElement("option"); opt2.value = key; opt2.textContent = label; sizeMetricSelect.appendChild(opt2); } colorMetricSelect.value = selectedColorMetric; sizeMetricSelect.value = selectedSizeMetric; function getValue(row, metric) { if (!row) return null; const v = +row[metric]; return Number.isFinite(v) ? v : null; } function getYearRows() { return data.filter(d => +d.Year === selectedYear); } function renderColorLegend(min, max) { const width = 360; const height = 62; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = 1; const ctx = canvas.getContext("2d"); for (let i = 0; i < width; i++) { const t = i / (width - 1); ctx.fillStyle = colorInterpolator(t); ctx.fillRect(i, 0, 1, 1); } const format = metricFormats[selectedColorMetric]; const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", width); svg.setAttribute("height", height); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); svg.innerHTML = ` ${format(min)} ${format(max)} Color: ${metrics[selectedColorMetric]} `; colorLegendDiv.replaceChildren(svg); } function renderSizeLegend(min, max, sizeScale) { let vals; let labels; if (selectedSizeMetric === "Health Ex per Cap") { vals = [0, 5000, 15000]; labels = ["$0", "$5,000", "$15,000"]; } else { const mid = (min + max) / 2; vals = [min, mid, max]; labels = vals.map(v => metricFormats[selectedSizeMetric](v)); } const sizes = vals.map(v => sizeScale(v)); const svg = d3.create("svg") .attr("width", 280) .attr("height", 94); svg.append("text") .attr("x", 0) .attr("y", 14) .attr("font-size", 12) .attr("fill", "#666") .text(`Size: ${metrics[selectedSizeMetric]}`); [0, 1, 2].forEach(i => { const s = sizes[i]; const x = 18 + i * 86; const y = 40 - s / 2; svg.append("rect") .attr("x", x) .attr("y", y) .attr("width", s) .attr("height", s) .attr("fill", "#d9d9d9") .attr("stroke", "#888"); svg.append("text") .attr("x", x + s / 2) .attr("y", 78) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#444") .text(labels[i]); }); sizeLegendDiv.replaceChildren(svg.node()); } function toggleCountry(country) { const idx = selectedCountries.indexOf(country); if (idx >= 0) { selectedCountries = selectedCountries.filter(c => c !== country); } else if (selectedCountries.length < 2) { selectedCountries = [...selectedCountries, country]; } else { selectedCountries = [selectedCountries[1], country]; } } function renderCartogram() { const rows = getYearRows(); const colorValues = rows .map(d => getValue(d, selectedColorMetric)) .filter(v => v != null); const sizeValues = rows .map(d => getValue(d, selectedSizeMetric)) .filter(v => v != null); if (!colorValues.length || !sizeValues.length) { cartogramDiv.textContent = "No data available for this selection."; colorLegendDiv.textContent = ""; sizeLegendDiv.textContent = ""; return; } const colorMin = d3.min(colorValues); const colorMax = d3.max(colorValues); const sizeMax = d3.max(sizeValues); const colorScale = d3.scaleSequential(colorInterpolator).domain([colorMin, colorMax]); const sizeScale = d3.scaleSqrt() .domain([0, Math.max(sizeMax, 15000)]) .range([18, 42]) .clamp(true); renderColorLegend(colorMin, colorMax); renderSizeLegend(0, sizeMax, sizeScale); const nodesForYear = rows .map(row => { const country = row["Country Name"]; const pos = staticCartogramPositions.get(country); if (!pos) return null; const colorValue = getValue(row, selectedColorMetric); const sizeValue = getValue(row, selectedSizeMetric); return { country, code: row["Country Code"], row, colorValue, sizeValue, side: sizeValue == null ? 18 : sizeScale(sizeValue), x: pos.x, y: pos.y }; }) .filter(Boolean); const svg = d3.create("svg") .attr("viewBox", `0 0 ${layoutWidth} ${layoutHeight}`) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "white"); svg.append("rect") .attr("width", layoutWidth) .attr("height", layoutHeight) .attr("fill", "#fafafa"); svg.append("text") .attr("x", 12) .attr("y", 20) .attr("font-size", 12) .attr("fill", "#666") .text("Squares use finalX/finalY cartogram positions. Click up to two countries to compare."); const g = svg.append("g"); const squares = g.selectAll("g") .data(nodesForYear) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer") .on("click", (event, d) => { toggleCountry(d.country); render(); }); squares.append("rect") .attr("x", d => -d.side / 2) .attr("y", d => -d.side / 2) .attr("width", d => d.side) .attr("height", d => d.side) .attr("fill", d => d.colorValue == null ? "#d3d3d3" : colorScale(d.colorValue)) .attr("stroke", d => selectedCountries.includes(d.country) ? "#111" : "#ffffff") .attr("stroke-width", d => selectedCountries.includes(d.country) ? 2 : 1) .attr("rx", 1); squares.append("text") .attr("text-anchor", "middle") .attr("dy", "0.33em") .attr("font-size", d => d.side >= 30 ? 11 : d.side >= 22 ? 9 : 0) .attr("font-weight", 700) .attr("fill", "#102030") .style("pointer-events", "none") .text(d => d.side >= 22 ? d.code : ""); squares.append("title") .text(d => [ d.country, `Year: ${selectedYear}`, `Color metric (${metrics[selectedColorMetric]}): ${d.colorValue == null ? "No data" : metricFormats[selectedColorMetric](d.colorValue)}`, `Size metric (${metrics[selectedSizeMetric]}): ${d.sizeValue == null ? "No data" : metricFormats[selectedSizeMetric](d.sizeValue)}` ].join("\n")); cartogramDiv.replaceChildren(svg.node()); } function renderTrend() { trendDiv.innerHTML = ""; if (!selectedCountries.length) { trendDiv.innerHTML = `

Click one or two squares to compare trends over time for the current color metric.

`; return; } const comparisonText = document.createElement("div"); comparisonText.style.margin = "0 0 10px 0"; comparisonText.style.fontSize = "15px"; comparisonText.style.color = "#444"; if (selectedCountries.length === 1) { comparisonText.innerHTML = `${selectedCountries[0]} is selected for trend review using ${metrics[selectedColorMetric]}.`; } else { comparisonText.innerHTML = `${selectedCountries[0]} and ${selectedCountries[1]} are selected for comparison using ${metrics[selectedColorMetric]}.`; } const series = selectedCountries.flatMap(country => data .filter(d => d["Country Name"] === country) .map(d => ({ Country: country, Year: +d.Year, Value: getValue(d, selectedColorMetric) })) .filter(d => d.Value != null) ); const chart = Plot.plot({ width: 1180, height: 280, marginLeft: 60, x: {label: "Year"}, y: {label: metrics[selectedColorMetric], grid: true}, color: { legend: false, domain: selectedCountries, range: ["#1d4ed8", "#dc2626"] }, marks: [ Plot.lineY(series, { x: "Year", y: "Value", stroke: "Country", strokeWidth: 3 }), Plot.dot(series, { x: "Year", y: "Value", fill: "Country", r: 4, title: d => `${d.Country}\n${d.Year}\n${metrics[selectedColorMetric]}: ${metricFormats[selectedColorMetric](d.Value)}` }) ] }); const legend = document.createElement("div"); legend.style.display = "flex"; legend.style.gap = "16px"; legend.style.alignItems = "center"; legend.style.margin = "0 0 10px 0"; legend.style.fontSize = "14px"; selectedCountries.forEach((country, i) => { const item = document.createElement("div"); item.style.display = "flex"; item.style.alignItems = "center"; item.style.gap = "8px"; item.innerHTML = `${country}`; legend.appendChild(item); }); trendDiv.appendChild(comparisonText); trendDiv.appendChild(legend); trendDiv.appendChild(chart); } function renderNote() { const rows = getYearRows(); const colorValid = rows.filter(d => getValue(d, selectedColorMetric) != null).length; const sizeValid = rows.filter(d => getValue(d, selectedSizeMetric) != null).length; noteDiv.innerHTML = ` Selected year: ${selectedYear}
Color metric: ${metrics[selectedColorMetric]} (${colorValid} countries with data)
Size metric: ${metrics[selectedSizeMetric]} (${sizeValid} countries with data)
Selected countries: ${selectedCountries.length ? selectedCountries.join(" and ") : "None"}
Gray squares indicate missing values for the color metric. Countries missing the size metric are shown at the minimum square size. Positions remain fixed across all dropdown and year changes. `; } function render() { yearLabel.textContent = selectedYear; renderCartogram(); renderTrend(); renderNote(); } colorMetricSelect.addEventListener("change", e => { selectedColorMetric = e.target.value; render(); }); sizeMetricSelect.addEventListener("change", e => { selectedSizeMetric = e.target.value; render(); }); yearInput.addEventListener("input", e => { selectedYear = +e.target.value; render(); }); clearBtn.addEventListener("click", () => { selectedCountries = []; render(); }); render(); return wrap; }33:[{"id":"64e0b4deafde8c387ace9c423a3b36974f50611cc92b79a5afcee9f9d703ade45cc7abf7571b74641ef72d4220225e678aef5ecf91cd999fc856f463c7b1e206","href":"https://static.observableusercontent.com/files/64e0b4deafde8c387ace9c423a3b36974f50611cc92b79a5afcee9f9d703ade45cc7abf7571b74641ef72d4220225e678aef5ecf91cd999fc856f463c7b1e206","name":"3-9-2026_data_EDP.csv","type":"text/csv","lastModified":1775566157078.352,"size":204052}] 2d:{"id":"0791248fcef29304","slug":null,"title":"Plot World Map Cartogram","thumbnail":"b32a0c1b60aac41df5ecf4ee6134c4a98896b6fc9cba11f4d56154396b5507af","access_level":"public","create_time":"$D2026-04-07T12:49:17.078Z","update_time":"$D2026-04-27T15:49:25.441Z","view_time":null,"first_public_time":"$D2026-04-09T09:41:06.928Z","fork":{"id":"8967fdc269e8be6e","slug":"ped_map","title":"Plot World Map","owner":{"id":"5b2c21760cb0b1b2","login":"peters-workspace3","name":"Peter's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5b2c21760cb0b1b2","login":"peters-workspace3","name":"Peter's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b5770804623a2e1e48751ead71626aadedf39916eada57be5d977cdf89fb25ce","tier":"starter_2024"},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1ed19a26b479f931","login":"peter-ellis","name":"Peter Ellis","avatar_url":"https://avatars-next.observableusercontent.com/ba6d3263792a97f2e3d985817d80affe081908273cb271eb84152bbd68656d8d","tier":null}],"members":[{"type":"individual","id":"1ed19a26b479f931","login":"peter-ellis","name":"Peter Ellis","avatar_url":"https://avatars-next.observableusercontent.com/ba6d3263792a97f2e3d985817d80affe081908273cb271eb84152bbd68656d8d","tier":null,"role":"editor"},{"type":"team","id":"5b2c21760cb0b1b2","login":"peters-workspace3","name":"Peter's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b5770804623a2e1e48751ead71626aadedf39916eada57be5d977cdf89fb25ce","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Plot World Map Cartogram","cells":[{"id":0,"value":"# Plot World Map Cartogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@7\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Plot = require(\"@observablehq/plot@0.6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"