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); 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))).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"]))).map(name => [normalize(name), name]) ); function matchCountry(mapName) { const key = normalize(mapName); return aliases.get(key) || datasetNames.get(key) || null; } let selectedMetric = "LEX"; let selectedYear = d3.max(years); let selectedCountry = null; const wrap = html`

Global Health Outcomes and Access, 2000–2023

Explore life expectancy, health spending, physician availability, and universal health coverage across countries.

METRIC

YEAR

${selectedYear}

`; const metricSelect = wrap.querySelector("#metric"); const yearInput = wrap.querySelector("#year"); const yearLabel = wrap.querySelector("#yearLabel"); const clearBtn = wrap.querySelector("#clear"); const mapDiv = wrap.querySelector("#map"); const legendDiv = wrap.querySelector("#legend"); const trendDiv = wrap.querySelector("#trend"); const noteDiv = wrap.querySelector("#note"); Object.entries(metrics).forEach(([key, label]) => { const option = document.createElement("option"); option.value = key; option.textContent = label; metricSelect.appendChild(option); }); metricSelect.value = selectedMetric; function getYearData() { return data.filter(d => +d.Year === selectedYear); } function getValue(row, metric) { const v = +row[metric]; return Number.isFinite(v) ? v : null; } function renderLegend(min, max) { const width = 320; const height = 50; 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 = d3.interpolateSpectral(t); ctx.fillRect(i, 0, 1, 1); } const format = metricFormats[selectedMetric]; 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)} ${metrics[selectedMetric]} `; legendDiv.replaceChildren(svg); } function renderMap() { const rows = getYearData(); const rowByCountry = new Map(rows.map(d => [d["Country Name"], d])); const values = rows .map(d => getValue(d, selectedMetric)) .filter(v => v != null); const min = d3.min(values); const max = d3.max(values); const color = d3.scaleSequential(d3.interpolateSpectral).domain([min, max]); renderLegend(min, max); const width = 1000; const height = 520; const projection = d3.geoEqualEarth().fitSize([width, height], {type: "Sphere"}); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("background", "white"); svg.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "#f8fafc"); svg.append("g") .selectAll("path") .data(countries) .join("path") .attr("d", path) .attr("fill", d => { const matched = matchCountry(d.properties.name); const row = matched ? rowByCountry.get(matched) : null; const value = row ? getValue(row, selectedMetric) : null; return value == null ? "#d3d3d3" : color(value); }) .attr("stroke", d => matchCountry(d.properties.name) === selectedCountry ? "#111" : "white") .attr("stroke-width", d => matchCountry(d.properties.name) === selectedCountry ? 1.5 : 0.5) .style("cursor", "pointer") .on("click", (event, d) => { const matched = matchCountry(d.properties.name); if (!matched) return; selectedCountry = matched === selectedCountry ? null : matched; render(); }) .append("title") .text(d => { const matched = matchCountry(d.properties.name); const row = matched ? rowByCountry.get(matched) : null; const value = row ? getValue(row, selectedMetric) : null; return `${matched || d.properties.name}\n${metrics[selectedMetric]}: ${value == null ? "No data" : metricFormats[selectedMetric](value)}`; }); mapDiv.replaceChildren(svg.node()); } function renderTrend() { trendDiv.innerHTML = ""; if (!selectedCountry) { trendDiv.innerHTML = `

Click a country on the map to see its trend over time.

`; return; } const series = data .filter(d => d["Country Name"] === selectedCountry) .map(d => ({ Year: +d.Year, Value: getValue(d, selectedMetric) })) .filter(d => d.Value != null) .sort((a, b) => d3.ascending(a.Year, b.Year)); if (!series.length) { trendDiv.innerHTML = `

No data available for ${selectedCountry}.

`; return; } const chart = Plot.plot({ width: 1000, height: 300, x: {label: "Year"}, y: {label: metrics[selectedMetric], grid: true}, marks: [ Plot.lineY(series, {x: "Year", y: "Value", stroke: "#c2410c"}), Plot.dot(series, { x: "Year", y: "Value", fill: "#c2410c", title: d => `${selectedCountry}\n${d.Year}\n${metrics[selectedMetric]}: ${metricFormats[selectedMetric](d.Value)}` }) ] }); trendDiv.appendChild(html`

${selectedCountry} trend

`); trendDiv.appendChild(chart); } function renderNote() { const rows = getYearData(); const valid = rows.filter(d => getValue(d, selectedMetric) != null).length; const missing = rows.length - valid; noteDiv.innerHTML = ` Selected metric: ${metrics[selectedMetric]}
Selected year: ${selectedYear}
Countries with data: ${valid}
Countries missing data: ${missing}
Gray countries have no value for the selected metric and year. `; } function render() { yearLabel.textContent = selectedYear; renderMap(); renderTrend(); renderNote(); } metricSelect.addEventListener("change", e => { selectedMetric = e.target.value; render(); }); yearInput.addEventListener("input", e => { selectedYear = +e.target.value; render(); }); clearBtn.addEventListener("click", () => { selectedCountry = null; render(); }); render(); return wrap; }