2b:null 2c:["$","title",null,{"children":"Even the best databases have data gaps | ONE Campaign | Observable"}] 31:T2c83,chart = { // Reuse existing ${d.country_name}, ${Y(d.year)}
` + `Available data: ${formatPct(+d.available_pct)}` ); }) .on("pointermove", function (event) { const vw = window.innerWidth; const { width: tw, height: th } = tooltip.node().getBoundingClientRect(); const cx = event.clientX; let left = event.pageX + marginPx, top = event.pageY + marginPx; if (cx > vw * 0.6 || cx + tw + marginPx > vw) left = event.pageX - tw - marginPx; const scrollY = window.scrollY, vh = window.innerHeight; const maxTop = scrollY + vh - th - marginPx, minTop = scrollY + marginPx; top = Math.max(minTop, Math.min(top, maxTop)); tooltip.style("left", `${left}px`).style("top", `${top}px`); }) .on("pointerdown", function () { hideLabels(); tooltip.style("opacity", 1); }) .on("pointerleave", function () { d3.select(this).attr("stroke", null).attr("stroke-width", null); tooltip.style("opacity", 0); showLabelsDelayed(200); }); // Save for next layout state.prevY = curY; state.prevH = curH; state.prevW = w; state.prevGroup = group; state.prevOrder = order; } // Observe parent size and (re)draw const ro = new ResizeObserver(entries => { for (const e of entries) { const w = e.contentRect.width || 0; if (w > 0) draw(w); } }); // Start observing after the svg is attached queueMicrotask(() => { const parent = svg.node().parentElement; if (parent) { ro.observe(parent); const w0 = parent.getBoundingClientRect().width || parent.clientWidth || window.innerWidth; draw(w0); } else { draw(window.innerWidth); // fallback } }); invalidation.then(() => ro.disconnect()); return svg.node(); }32:T4bb,bottomPannel = html`${await (async () => `

Source: WHO Global Health Expenditure Database.
The share of available indicators is calculated for each country–year pair, filling in missing combinations with 0% availability.

`)()}`33:T4b7,// helper: build y-domain with group separators function buildYDomain(data, sortBy, {groupPaddingRows = 100} = {}) { // choose grouping key based on sort const groupKey = sortBy === "Income level" ? "income_level" : sortBy === "Region" ? "region" : null; // base: alphabetical by country if no grouping if (!groupKey) return d3.sort(d3.union(data.map(d => d.country_name))); // roll up one row per country with its group const perCountry = Array.from( d3.rollup( data, v => ({ group: v[0][groupKey] }), d => d.country_name ), ([country, {group}]) => ({country, group}) ); // sort by group, then country perCountry.sort((a, b) => d3.ascending(a.group, b.group) || d3.ascending(a.country, b.country)); // insert separators between group changes const domain = []; let sepCount = 0; for (let i = 0; i < perCountry.length; i++) { const cur = perCountry[i]; const prev = perCountry[i - 1]; if (i > 0 && cur.group !== prev.group) { for (let k = 0; k < groupPaddingRows; k++) domain.push(`__SEP__${sepCount}_${k}`); sepCount += 1; } domain.push(cur.country); } return domain; } 34:Td47,function drawLabel( svg, { text, x, y, anchor = "right", maxWidth = 200, padding = 6, cornerRadius = 6, pointer = 12, gap = 6, fontSize = 12, dx = 0, dy = 0, id = null } = {} ) { const anchors = new Map([ ["right", [1, 0]], ["left", [-1, 0]], ["top", [0, -1]], ["bottom", [0, 1]], ["top-right", [1, -1]], ["bottom-right", [1, 1]], ["top-left", [-1, -1]], ["bottom-left", [-1, 1]] ]); const v = anchors.get(anchor) ?? [1, 0]; const len = Math.hypot(v[0], v[1]) || 1; const ux = v[0] / len, uy = v[1] / len; const bx = x + ux * (pointer + gap) + dx; const by = y + uy * (pointer + gap) + dy; const g = svg.append("g").attr("class", "callout-label").attr("opacity", 1); if (id != null) g.attr("data-id", id); // Create a hidden HTML element to measure text height const tempDiv = document.createElement("div"); tempDiv.style.cssText = ` position:absolute; visibility:hidden; max-width:${maxWidth}px; font:${fontSize}px system-ui, sans-serif; line-height:1.3; white-space:normal; word-wrap:break-word; `; tempDiv.innerText = text; document.body.appendChild(tempDiv); const w = Math.min(tempDiv.offsetWidth, maxWidth) + padding * 2; const h = tempDiv.offsetHeight + padding * 2; document.body.removeChild(tempDiv); let rx = bx - w / 2, ry = by - h / 2; if (anchor.includes("right")) rx = bx; if (anchor.includes("left")) rx = bx - w; if (anchor.includes("top")) ry = by - h; if (anchor.includes("bottom")) ry = by; let px = bx, py = by; if (anchor === "right") { px = rx; py = by; } else if (anchor === "left") { px = rx + w; py = by; } else if (anchor === "top") { px = bx; py = ry + h; } else if (anchor === "bottom") { px = bx; py = ry; } else if (anchor === "top-right") { px = rx; py = ry + h; } else if (anchor === "bottom-right") { px = rx; py = ry; } else if (anchor === "top-left") { px = rx + w; py = ry + h; } else if (anchor === "bottom-left") { px = rx + w; py = ry; } const elbowX = x + ux * gap; const elbowY = y + uy * gap; g.append("path") .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", 1) .attr("d", `M${x},${y} L${elbowX},${elbowY} L${px},${py}`); g.append("rect") .attr("x", rx) .attr("y", ry) .attr("width", w) .attr("height", h) .attr("rx", cornerRadius) .attr("ry", cornerRadius) .attr("fill", "white") .attr("stroke", "#ccc") .attr("stroke-width", 1) .style("filter", "drop-shadow(0px 2px 6px rgba(0,0,0,0.15))"); // Use foreignObject to handle wrapped text const innerW = Math.max(1, w - padding * 2); const innerH = Math.max(1, h - padding * 2); g.append("foreignObject") .attr("x", rx + padding) .attr("y", ry + padding) .attr("width", innerW) // <-- add width .attr("height", innerH) // <-- keep height .append("xhtml:div") .style("font", `${fontSize}px system-ui, sans-serif`) .style("line-height", "1.3") .style("color", "#222") .style("width", `${innerW}px`) // helps in Safari/Firefox .style("max-width", `${maxWidth}px`) .style("white-space", "normal") .style("overflow-wrap", "break-word") // modern synonym of word-wrap .text(text); return g.node(); }35:T149f,function renderLabels(svg, labels, { t, // d3 transition to use maxWidth = 200, padding = 6, cornerRadius = 6, pointer = 12, gap = 6, fontSize = 12, bubbleFill = "white", bubbleStroke = "#bbb", stroke = "#666", strokeWidth = 1 } = {}) { // single hidden measurer for accurate wrapped text sizing const measurer = d3.select(document.body) .selectAll("div.__label__measurer").data([null]).join("div") .attr("class", "__label__measurer") .style("position", "absolute") .style("visibility", "hidden") .style("top", "-9999px") .style("left", "-9999px") .style("display", "inline-block") .style("white-space", "normal") .style("overflow-wrap", "anywhere") // break long tokens/URLs .style("word-break", "break-word") .style("line-height", "1.3"); const A = new Map([ ["right", [ 1, 0]], ["left", [-1, 0]], ["top", [ 0, -1]], ["bottom", [ 0, 1]], ["top-right", [ 1, -1]], ["bottom-right", [ 1, 1]], ["top-left", [-1, -1]], ["bottom-left", [-1, 1]], ]); // JOIN (key by id so labels persist across group/sort changes) const sel = svg.selectAll("g.callout-label") .data(labels, d => d.id); // EXIT sel.exit().transition(t).style("opacity", 0).remove(); // ENTER const ent = sel.enter().append("g") .attr("class", "callout-label") .style("opacity", 0); ent.append("path").attr("class", "connector") .attr("fill", "none"); ent.append("rect").attr("class", "bubble") .attr("rx", cornerRadius).attr("ry", cornerRadius); ent.append("foreignObject").attr("class", "fo") .append("xhtml:div") .style("white-space", "normal") .style("overflow-wrap", "anywhere") .style("word-break", "break-word") .style("line-height", "1.3"); // ENTER + UPDATE const all = ent.merge(sel); all.each(function(d) { // per-label overrides with fallbacks const gMaxWidth = d.maxWidth ?? maxWidth; const gPadding = d.padding ?? padding; const gCorner = d.cornerRadius ?? cornerRadius; const gPointer = d.pointer ?? pointer; const gGap = d.gap ?? gap; const gFontSize = d.fontSize ?? fontSize; const gFill = d.bubbleFill ?? bubbleFill; const gStroke = d.bubbleStroke ?? bubbleStroke; const gLine = d.stroke ?? stroke; const gLineW = d.strokeWidth ?? strokeWidth; // measure wrapped text at gMaxWidth & gFontSize measurer .style("max-width", `${gMaxWidth}px`) .style("font", `${gFontSize}px system-ui, -apple-system, Segoe UI, Roboto, sans-serif`) .text(d.text); const mnode = measurer.node(); const innerW = Math.min(gMaxWidth, mnode.offsetWidth); // used width (<= max) const innerH = mnode.offsetHeight; const w = innerW + gPadding * 2; const h = innerH + gPadding * 2; // anchor vector const v = A.get(d.anchor) ?? [1,0]; const len = Math.hypot(v[0], v[1]) || 1; const ux = v[0] / len, uy = v[1] / len; const bx = d.x + ux * (gPointer + gGap) + (d.dx ?? 0); const by = d.y + uy * (gPointer + gGap) + (d.dy ?? 0); // bubble top-left by anchor let rx = bx - w/2, ry = by - h/2; if (d.anchor?.includes("right")) rx = bx; if (d.anchor?.includes("left")) rx = bx - w; if (d.anchor?.includes("top")) ry = by - h; if (d.anchor?.includes("bottom"))ry = by; // connector attach point on bubble let px = bx, py = by; if (d.anchor === "right") { px = rx; py = by; } else if (d.anchor === "left") { px = rx+w; py = by; } else if (d.anchor === "top") { px = bx; py = ry+h; } else if (d.anchor === "bottom") { px = bx; py = ry; } else if (d.anchor === "top-right") { px = rx; py = ry+h; } else if (d.anchor === "bottom-right"){ px = rx; py = ry; } else if (d.anchor === "top-left") { px = rx+w; py = ry+h; } else if (d.anchor === "bottom-left") { px = rx+w; py = ry; } // elbow const elbowX = d.x + ux * gGap; const elbowY = d.y + uy * gGap; const gsel = d3.select(this); gsel.select("path.connector") .attr("stroke", gLine) .attr("stroke-width", gLineW) .transition(t) .attr("d", `M${d.x},${d.y} L${elbowX},${elbowY} L${px},${py}`); gsel.select("rect.bubble") .transition(t) .attr("x", rx).attr("y", ry) .attr("width", w).attr("height", h) .attr("rx", gCorner).attr("ry", gCorner) .attr("fill", gFill).attr("stroke", gStroke); // foreignObject sized to the inner box (<= maxWidth) gsel.select("foreignObject.fo") .transition(t) .attr("x", rx + gPadding) .attr("y", ry + gPadding) .attr("width", innerW) // <= gMaxWidth .attr("height", Math.max(1, innerH)) // avoid 0-height in some browsers .selection() // end transition to set HTML styles .select("div") .style("font", `${gFontSize}px system-ui, -apple-system, Segoe UI, Roboto, sans-serif`) .style("max-width", `${gMaxWidth}px`) .text(d.text); }) .transition(t) .style("opacity", 1); }36:T6a7,function drawLegend(svg, colorScale, { x, y, width = 200, height = 8, ticks = 4, title = "Available data" } = {}) { const g = svg.selectAll("g.legend").data([null]).join("g") .attr("class", "legend") .attr("transform", `translate(${x},${y})`); // defs + gradient const defs = svg.selectAll("defs#legend-defs").data([null]).join("defs").attr("id", "legend-defs"); const grad = defs.selectAll("linearGradient#legend-grad").data([null]).join( enter => enter.append("linearGradient").attr("id", "legend-grad").attr("x1", "0%").attr("x2", "100%"), update => update ); const dom = colorScale.domain(); const stops = d3.range(0, 1.0001, 1/24).map(t => ({ t, c: colorScale(dom[0] + t * (dom[1] - dom[0])) })); grad.selectAll("stop").data(stops).join("stop") .attr("offset", d => `${d.t * 100}%`) .attr("stop-color", d => d.c); // title g.selectAll("text.title").data([title]).join("text") .attr("class", "title") .attr("x", 0) .attr("y", -10) .attr("fill", "#444") // .style("font-weight", 600) .style("font-size", "15px") .text(d => d); // gradient bar g.selectAll("rect.grad").data([null]).join("rect") .attr("class", "grad") .attr("x", 1.5) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "url(#legend-grad)"); // axis const fmt = d3.format(".0f"); const axScale = d3.scaleLinear().domain(dom).range([0, width]); g.selectAll("g.axis").data([null]).join("g") .attr("class", "axis") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(axScale).ticks(ticks).tickFormat(d => fmt(d) + "%")) .call(g => g.select(".domain").remove()); }37:[{"id":"fd7d26987dfd8a59c52aaac94db80f525f99743c1bb946b51572403ce9a10057780d1578a33e294596bf8c00996190f6c39d938b0aec0da2dc42378969d217b8","href":"https://static.observableusercontent.com/files/fd7d26987dfd8a59c52aaac94db80f525f99743c1bb946b51572403ce9a10057780d1578a33e294596bf8c00996190f6c39d938b0aec0da2dc42378969d217b8","name":"available_pct@1.csv","type":"text/csv","lastModified":1755589026339.584,"size":264748},{"id":"15406c515535f6c66b4baa48a1f394830ebf3f5a5c7d818500f92ab17b62dc22dfd7d8784c8760a9c039be0edd43bc8e2c7ba775157c4bdc4c0a9950bf06d3bf","href":"https://static.observableusercontent.com/files/15406c515535f6c66b4baa48a1f394830ebf3f5a5c7d818500f92ab17b62dc22dfd7d8784c8760a9c039be0edd43bc8e2c7ba775157c4bdc4c0a9950bf06d3bf","name":"available_pct@2.csv","type":"text/csv","lastModified":1755767352514.172,"size":275462},{"id":"b618ad1ea85857c4e2bf2f3fcd1121ade112a91f811ae674d47cc761dc18609d42981ec66608a3bde5d0ef4d57ffac90b761436a3ca9478bf5da61bf16ec62eb","href":"https://static.observableusercontent.com/files/b618ad1ea85857c4e2bf2f3fcd1121ade112a91f811ae674d47cc761dc18609d42981ec66608a3bde5d0ef4d57ffac90b761436a3ca9478bf5da61bf16ec62eb","name":"ONE-logo-black.png","type":"image/png","lastModified":1755767769802.849,"size":13590}] 2f:{"id":"b1be6761c57599e0","slug":null,"title":"Even the best databases have data gaps","thumbnail":"832dd15a56cc19816f59b9ab9e4f8f4529c1a55b22e46f3f6370b774c821b6ad","access_level":"public","create_time":"$D2025-08-18T14:27:42.098Z","update_time":"$D2025-09-26T08:06:12.479Z","view_time":null,"first_public_time":"$D2025-08-20T14:54:05.563Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"13c6fc7ef7b09bba","login":"one-campaign","name":"ONE Campaign","avatar_url":"https://avatars-next.observableusercontent.com/c58192ca59b3a23066e98356418851adaed725e827bb52882301fc4fda17a8aa","tier":"starter_2024"},"version":494,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc783bf047a346db","login":"miguel-haro-ruiz","name":"Miguel Haro Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/a05630d527f8c49488aed0cc618a6759454b27822ae9ac043347ad70ad5dda89","tier":null}],"members":[{"type":"individual","id":"fc783bf047a346db","login":"miguel-haro-ruiz","name":"Miguel Haro Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/a05630d527f8c49488aed0cc618a6759454b27822ae9ac043347ad70ad5dda89","tier":null,"role":"editor"},{"type":"team","id":"13c6fc7ef7b09bba","login":"one-campaign","name":"ONE Campaign","avatar_url":"https://avatars-next.observableusercontent.com/c58192ca59b3a23066e98356418851adaed725e827bb52882301fc4fda17a8aa","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Even the best databases have data gaps","cells":[{"id":305,"value":"

Even the best databases have data gaps

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"

Percent of available data by country and year in WHO's Global Health Expenditure Database

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"viewof sortBy = Inputs.select(\n [\"Value\", \"Country name\"],\n {\n label: \"Sort by\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof groupBy = Inputs.select(\n [\"Ungrouped\", \"Income level\", \"Region\"],\n {\n label: \"Group by\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = FileAttachment(\"available_pct@2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"years = d3.sort(d3.union(data.map(d => d.year)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"countryMeta = d3.rollup(\n data,\n (v) => ({ income_level: v[0].income_level, region: v[0].region }),\n (d) => d.country_name\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"countriesAll = d3.sort(Array.from(countryMeta.keys()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"meanByCountry = d3.rollup(\n data.filter(\n (d) => d.available_pct != null && !Number.isNaN(+d.available_pct)\n ),\n (v) => d3.mean(v, (d) => +d.available_pct),\n (d) => d.country_name\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"function orderCountries(countries, sortBy) {\n if (sortBy === \"Country name\") return d3.sort(countries);\n const asc = sortBy === \"Value\";\n const get = (c) => meanByCountry.get(c);\n const val = (c) => {\n const v = get(c);\n return v == null ? Infinity : v;\n };\n return countries\n .slice()\n .sort(\n (a, b) => d3.ascending(val(a), val(b)) || d3.ascending(a, b)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"minVal = d3.min(data, d => +d.available_pct ?? 0) ?? 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"maxVal = d3.max(data, d => +d.available_pct ?? 0) ?? 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"baseColor = d3.scaleLinear()\n .domain([minVal, maxVal])\n .range([\"#E5E5E5\", \"#1A9BA3\"])\n .interpolate(d3.interpolateRgb)\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"color = v => (+v === 0 ? \"#FFFFFF\" : baseColor(+v))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"INCOME_ORDER = [\n \"Low income\",\n \"Lower middle income\",\n \"Upper middle income\",\n \"High income\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function buildPanels(groupBy, sortBy) {\n if (groupBy === \"Ungrouped\") {\n return [{ name: null, countries: orderCountries(countriesAll, sortBy) }];\n }\n\n const key = groupBy === \"Income level\" ? \"income_level\" : \"region\";\n const groups = d3.group(countriesAll, c => countryMeta.get(c)[key]);\n\n let panels = Array.from(groups, ([name, countries]) => ({\n name,\n countries: orderCountries(countries, sortBy)\n }));\n\n if (key === \"income_level\") {\n const idx = new Map(INCOME_ORDER.map((d, i) => [d, i]));\n panels.sort((a, b) =>\n d3.ascending(idx.get(a.name) ?? Infinity, idx.get(b.name) ?? Infinity) ||\n d3.ascending(a.name, b.name)\n );\n } else {\n panels.sort((a, b) => d3.ascending(a.name, b.name));\n }\n return panels;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"// Attach once per svg (fade labels on hover in/out)\nfunction installLabelHover(svg, dur = 200) {\n svg.on(\"mouseenter.callout\", () =>\n svg.selectAll(\".callout-label\").transition().duration(dur).style(\"opacity\", 0))\n .on(\"mouseleave.callout\", () =>\n svg.selectAll(\".callout-label\").transition().duration(dur).style(\"opacity\", 1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"