2c:null 2d:["$","title",null,{"children":"Plot World Map | Peter's Workspace | Observable"}] 32:T274f,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; }33:[{"id":"64e0b4deafde8c387ace9c423a3b36974f50611cc92b79a5afcee9f9d703ade45cc7abf7571b74641ef72d4220225e678aef5ecf91cd999fc856f463c7b1e206","href":"https://static.observableusercontent.com/files/64e0b4deafde8c387ace9c423a3b36974f50611cc92b79a5afcee9f9d703ade45cc7abf7571b74641ef72d4220225e678aef5ecf91cd999fc856f463c7b1e206","name":"3-9-2026_data_EDP.csv","type":"text/csv","lastModified":1773087364344.193,"size":204052}] 30:{"id":"8967fdc269e8be6e","slug":"ped_map","title":"Plot World Map","thumbnail":"95b09f2d66f31f6384807ff5b5c828ad5abc6dd5014e527769088d46388c3ce8","access_level":"public","create_time":"$D2026-03-09T19:13:32.204Z","update_time":"$D2026-03-11T22:07:04.383Z","view_time":null,"first_public_time":"$D2026-04-09T09:41:33.938Z","has_unpublished_edits":null,"fork":{"id":"19cbc978f7478a7b","slug":"plot-world-map","title":"Plot World Map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"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":72,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot World Map","cells":[{"id":0,"value":"# Plot World Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@7\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Plot = require(\"@observablehq/plot@0.6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"await FileAttachment(\"3-9-2026_data_EDP.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"