2b:null 2c:["$","title",null,{"children":"Global Health Care Access Dashboard, 2000–2023 | 🪦 dv design 2026 spring | Observable"}] 31:T56b,viewof controls = html`

COLOR METRIC

${viewof selectedMetric}

SIZE METRIC

${viewof selectedSizeMetric}

SCALE SIZE

${viewof useSizeScaling}

MINI LINES

${viewof showMiniLines}

YEAR

${Object.assign(viewof selectedYear, { style: "width:50%;" })}

`32:T2e71,dashboard = { const width = 1000 const height = 800 const selectedCountries = mutable selectedCountryIds const xExtent = d3.extent(uncollided, d => d.finalX) const yExtent = d3.extent(uncollided, d => d.finalY) const maxTilePx = cellSize - padding * 2 const minTilePx = 10 const selectedYearRows = countryData.filter(d => +d.Year === selectedYear) const valueByCountry = new Map( selectedYearRows.map(d => [d["Country Code"], validValue(d, selectedMetric)]) ) const colorDomain = d3.scaleLinear() .domain(d3.extent( countryData.map(d => validValue(d, selectedMetric)).filter(d => d != null) )) .nice(4) .domain() const colorScale = d3.scaleSequential() .domain(colorDomain) .interpolator(d3.interpolateRgbBasis([ "#d73027", "#fdae61", "#fee08b", "#66bd63", "#4575b4" ])) const sizeValues = selectedYearRows .map(d => validValue(d, selectedSizeMetric)) .filter(d => d != null) const sizeScale = d3.scaleSqrt() .domain(d3.extent(sizeValues)) .range([minTilePx, maxTilePx]) .clamp(true) const sizeByCountry = new Map( selectedYearRows.map(d => [d["Country Code"], validValue(d, selectedSizeMetric)]) ) const nameByCode = new Map( countryData.map(d => [d["Country Code"], d["Country Name"]]) ) const searchData = uncollided.map(d => ({ id: d.id, name: d.name || nameByCode.get(d.id) || d.id, label: `${d.name || nameByCode.get(d.id) || d.id} (${d.id})` })) function toScreenX(x) { return maxTilePx + (x - xExtent[0]) / (xExtent[1] - xExtent[0] + 1) * (width - maxTilePx) } function toScreenY(y) { return maxTilePx + (y - yExtent[0]) / (yExtent[1] - yExtent[0] + 1) * (height - maxTilePx) } function squareSize(d) { if (!useSizeScaling) return maxTilePx const v = sizeByCountry.get(d.id) return v == null ? minTilePx : sizeScale(v) } function rawOrInterpolatedSeries(rows, metric) { const byYear = new Map( rows.map(d => [+d.Year, validValue(d, metric)]) ) if (useInterpolation) { return fillMissingYears(rows, years, metric, true) } return years.map(year => ({ Year: year, Value: byYear.get(year) ?? 0 })) } const wrap = d3.create("div") .style("font-family", "system-ui, sans-serif") const controls = wrap.append("div") .style("display", "grid") .style("grid-template-columns", "1fr 380px") .style("gap", "8px") .style("align-items", "center") .style("margin", "0 0 5px 0") const searchInput = controls.append("input") .attr("type", "search") .attr("placeholder", "Search country name or code") .style("padding", "10px 12px") .style("font-size", "14px") .style("border", "1px solid #bbb") .style("border-radius", "10px") .node() const clearButton = controls.append("button") .text("Clear selected") .style("padding", "10px 12px") .style("font-size", "14px") .style("border", "1px solid #bbb") .style("border-radius", "10px") .style("background", "white") .style("cursor", "pointer") .node() const suggestions = wrap.append("div") .style("margin", "-4px 0 10px 0") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "6px") const status = wrap.append("div") .style("font-weight", "700") .style("margin", "0 0 4px 0") const colorLegend = wrap.append("div") .style("height", "62px") .style("margin", "2px 0 8px 0") .style("width", "470px") const renderColorLegend = () => { colorLegend.selectAll("*").remove() const [min, max] = colorDomain const legendX = 8 const legendWidth = 390 const legendHeight = 12 const ticks = d3.scaleLinear() .domain([min, max]) .nice(4) .ticks(4) const legendSvg = colorLegend.append("svg") .attr("width", 470) .attr("height", 62) .style("overflow", "visible") const gradientId = `color-legend-gradient-${selectedMetric.replace(/\W/g, "")}` const defs = legendSvg.append("defs") const gradient = defs.append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%") d3.range(0, 1.01, 0.1).forEach(t => { gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(min + t * (max - min))) }) legendSvg.append("text") .attr("x", legendX) .attr("y", 12) .attr("font-size", 12) .attr("font-weight", 700) .text(metrics[selectedMetric]) legendSvg.append("rect") .attr("x", legendX) .attr("y", 20) .attr("width", legendWidth) .attr("height", legendHeight) .attr("fill", `url(#${gradientId})`) const x = d3.scaleLinear() .domain([min, max]) .range([legendX, legendX + legendWidth]) legendSvg.selectAll("text.tick") .data(ticks) .join("text") .attr("class", "tick") .attr("x", d => x(d)) .attr("y", 50) .attr("text-anchor", "middle") .attr("font-size", 10) .text(d => metricFormats[selectedMetric] ? metricFormats[selectedMetric](d) : d) } const mainLayout = wrap.append("div") .style("display", "grid") .style("grid-template-columns", "1fr 380px") .style("gap", "16px") .style("align-items", "start") const mapDiv = mainLayout.append("div") const chartDiv = mainLayout.append("div") .style("margin-top", "0") const svg = mapDiv.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("max-width", "100%") .style("height", "auto") .style("background", "#fff") const miniSeriesByCountry = new Map( uncollided.map(d => { const rows = dataByCountries.get(d.id) || [] return [d.id, rawOrInterpolatedSeries(rows, selectedMetric)] }) ) const allMiniValues = Array.from(miniSeriesByCountry.values()) .flat() .map(d => d.Value) .filter(d => d != null) const scaleX = d3.scaleLinear() .domain(d3.extent(years)) .range([0, maxTilePx]) const scaleY = d3.scaleLinear() .domain(d3.extent(allMiniValues)) .range([maxTilePx, 0]) const miniLine = d3.line() .defined(d => d.Value != null) .x(d => scaleX(d.Year)) .y(d => scaleY(d.Value)) const groups = svg.selectAll("g.country") .data(uncollided) .join("g") .attr("class", "country") .attr("transform", d => `translate(${toScreenX(d.finalX)},${toScreenY(d.finalY)})`) .style("cursor", "pointer") .on("click", (event, d) => toggleCountry(d.id)) groups.append("rect") .attr("x", d => -squareSize(d) / 2) .attr("y", d => -squareSize(d) / 2) .attr("width", d => squareSize(d)) .attr("height", d => squareSize(d)) .attr("stroke", "#000") .attr("stroke-width", 1) .attr("fill", d => { const v = valueByCountry.get(d.id) return v == null ? "#d9d9d9" : colorScale(v) }) .style("opacity", 0.75) if (showMiniLines) { groups.append("path") .attr("transform", d => { const s = squareSize(d) return `translate(${-s / 2},${-s / 2}) scale(${s / maxTilePx})` }) .attr("d", d => miniLine(miniSeriesByCountry.get(d.id) || [])) .attr("fill", "none") .attr("stroke", "#111") .attr("stroke-width", 1) } groups.append("text") .text(d => d.id) .attr("text-anchor", "middle") .attr("dy", d => -squareSize(d) / 2 - 2) .style("font-size", "8px") .style("font-weight", 700) .style("pointer-events", "none") groups.append("title") .text(d => { const colorValue = valueByCountry.get(d.id) const sizeValue = sizeByCountry.get(d.id) return `${d.name || nameByCode.get(d.id) || d.id} ${selectedYear} Color — ${metrics[selectedMetric]}: ${colorValue == null ? "No data" : metricFormats[selectedMetric](colorValue)} Size — ${metrics[selectedSizeMetric]}: ${sizeValue == null ? "No data" : metricFormats[selectedSizeMetric](sizeValue)}` }) function toggleCountry(id) { if (selectedCountries.has(id)) selectedCountries.delete(id) else selectedCountries.add(id) mutable selectedCountryIds = new Set(selectedCountries) update() } function clearSelected() { selectedCountries.clear() mutable selectedCountryIds = new Set() update() } function renderSuggestions() { const q = searchInput.value.trim().toLowerCase() suggestions.selectAll("*").remove() if (!q) return const matches = searchData .filter(d => d.id.toLowerCase().includes(q) || d.name.toLowerCase().includes(q) ) .slice(0, 10) suggestions.selectAll("button") .data(matches) .join("button") .text(d => d.label) .style("padding", "6px 9px") .style("border", d => selectedCountries.has(d.id) ? "2px solid #111" : "1px solid #bbb") .style("border-radius", "999px") .style("background", d => selectedCountries.has(d.id) ? "#eee" : "white") .style("cursor", "pointer") .on("click", (event, d) => { toggleCountry(d.id) searchInput.value = "" suggestions.selectAll("*").remove() }) } function update() { groups.select("rect") .attr("stroke", d => selectedCountries.has(d.id) ? "#111" : "#000") .attr("stroke-width", d => selectedCountries.has(d.id) ? 3 : 1) const selected = uncollided.filter(d => selectedCountries.has(d.id)) status.text( selected.length ? `Selected: ${selected.map(d => d.name || nameByCode.get(d.id) || d.id).join(", ")}` : "Click or search countries to compare." ) chartDiv.selectAll("*").remove() if (!selected.length) { chartDiv.append("div") .style("font-weight", "700") .style("font-size", "14px") .style("color", "#555") .style("padding", "12px") .style("border", "1px solid #ddd") .style("border-radius", "10px") .text("Select countries to show line chart.") return } const countrySeries = selected.flatMap(country => { const rows = dataByCountries.get(country.id) || [] return rawOrInterpolatedSeries(rows, selectedMetric) .map(d => ({ Country: country.name || nameByCode.get(country.id) || country.id, Year: d.Year, Value: d.Value })) }) const averageSeries = years.map(year => { const values = countryData .filter(d => +d.Year === year) .map(d => validValue(d, selectedMetric)) .filter(d => d != null) return { Country: "World average", Year: year, Value: d3.mean(values) } }) const series = [...averageSeries, ...countrySeries] const chart = Plot.plot({ width: 430, height: 320, marginTop: 40, marginRight: 20, marginBottom: 40, marginLeft: 75, x: {label: "Year", tickFormat: d3.format("d")}, y: {label: metrics[selectedMetric], grid: true}, color: {legend: true}, marks: [ Plot.lineY(series.filter(d => d.Country === "World average"), { x: "Year", y: "Value", stroke: "Country", strokeWidth: 3, strokeDasharray: "5,4" }), Plot.lineY(series.filter(d => d.Country !== "World average"), { x: "Year", y: "Value", stroke: "Country", strokeWidth: 2.5 }), Plot.dot(series.filter(d => d.Country !== "World average"), { x: "Year", y: "Value", fill: "Country", r: 3 }) ] }) chartDiv.node().appendChild(chart) } searchInput.addEventListener("input", renderSuggestions) clearButton.addEventListener("click", clearSelected) renderColorLegend() update() return wrap.node() }33:T555,resolveCollisions = function(nodes) { const input = nodes.map(d => ({...d})) const xs = input.map(d => d.gridX).sort(d3.ascending) const ys = input.map(d => d.gridY).sort(d3.ascending) const anchorX = xs[Math.round(xBias * (xs.length - 1))] const anchorY = ys[Math.round(yBias * (ys.length - 1))] input.forEach(d => { d.distance = Math.hypot(d.gridX - anchorX, d.gridY - anchorY) }) input.sort((a, b) => d3.ascending(a.distance, b.distance) || d3.ascending(a.gridY, b.gridY) || d3.ascending(a.gridX, b.gridX) || d3.ascending(a.id, b.id) ) const occupied = new Set() function key(x, y) { return `${x},${y}` } function findOpenSpot(x, y) { if (!occupied.has(key(x, y))) return [x, y] for (let r = 1; r < 500; r++) { for (let dx = -r; dx <= r; dx++) { if (!occupied.has(key(x + dx, y - r))) return [x + dx, y - r] if (!occupied.has(key(x + dx, y + r))) return [x + dx, y + r] } for (let dy = -r + 1; dy <= r - 1; dy++) { if (!occupied.has(key(x - r, y + dy))) return [x - r, y + dy] if (!occupied.has(key(x + r, y + dy))) return [x + r, y + dy] } } } input.forEach(d => { const [finalX, finalY] = findOpenSpot(d.gridX, d.gridY) d.finalX = finalX d.finalY = finalY occupied.add(key(finalX, finalY)) }) return input }34:[{"id":"64e0b4deafde8c387ace9c423a3b36974f50611cc92b79a5afcee9f9d703ade45cc7abf7571b74641ef72d4220225e678aef5ecf91cd999fc856f463c7b1e206","href":"https://static.observableusercontent.com/files/64e0b4deafde8c387ace9c423a3b36974f50611cc92b79a5afcee9f9d703ade45cc7abf7571b74641ef72d4220225e678aef5ecf91cd999fc856f463c7b1e206","name":"3-9-2026_data_EDP.csv","type":"text/csv","lastModified":1778148320822.025,"size":204052}] 2f:{"id":"da418c9381dc1f83","slug":null,"title":"\n Global Health Care Access Dashboard, 2000–2023\n","thumbnail":"d3577bb6186278deb487795610ff43aacf0441b437e6cd11eab99da6df40af38","access_level":"public","create_time":"$D2026-05-07T10:05:20.822Z","update_time":"$D2026-05-11T10:19:54.823Z","view_time":null,"first_public_time":"$D2026-05-07T10:12:43.404Z","has_unpublished_edits":null,"fork":{"id":"6f11e00f28eb92ab","slug":null,"title":"Global Health Outcomes and Access, 2000 - 2023","owner":{"id":"5b2c21760cb0b1b2","login":"peters-workspace3","name":"Peter's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e73bb746871f7c8a","login":"dv-design-2026s","name":"🪦 dv design 2026 spring","avatar_url":"https://avatars-next.observableusercontent.com/4dab7780a17504486f7c5b299e4ca5077bba85e8adfaadc147cf0461b3ee93ad","tier":"education_2026"},"version":350,"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":"team","id":"e73bb746871f7c8a","login":"dv-design-2026s","name":"🪦 dv design 2026 spring","avatar_url":"https://avatars-next.observableusercontent.com/4dab7780a17504486f7c5b299e4ca5077bba85e8adfaadc147cf0461b3ee93ad","tier":"education_2026","role":"editor"},{"type":"individual","id":"1ed19a26b479f931","login":"peter-ellis","name":"Peter Ellis","avatar_url":"https://avatars-next.observableusercontent.com/ba6d3263792a97f2e3d985817d80affe081908273cb271eb84152bbd68656d8d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"24192025b62c0e1e","slug":"group-projects","title":"GROUP PROJECTS","owner":{"id":"e73bb746871f7c8a","login":"dv-design-2026s","name":"🪦 dv design 2026 spring"}},"type":"notebook","body":{"titling":"auto","title":"\n Global Health Care Access Dashboard, 2000–2023\n","cells":[{"id":281,"value":"title = html`\n

\n Global Health Care Access Dashboard, 2000–2023\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"validValue = function(d, metric) {\n const raw = d[metric]\n if (raw === null || raw === undefined || raw === \"\") return null\n const value = +raw\n return Number.isFinite(value) ? value : null\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"viewof useInterpolation = Inputs.toggle({\n label: \"Interpolate missing values\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"fillMissingYears = function(series, years, metric, interpolate = true) {\n const byYear = new Map()\n\n for (const d of series) {\n const year = +d.Year\n const value = validValue(d, metric)\n if (Number.isFinite(year) && value != null) byYear.set(year, value)\n }\n\n if (!interpolate) {\n return years.map(year => ({\n Year: year,\n Value: byYear.has(year) ? byYear.get(year) : null\n }))\n }\n\n const known = Array.from(byYear, ([Year, Value]) => ({Year, Value}))\n .sort((a, b) => d3.ascending(a.Year, b.Year))\n\n return years.map(year => {\n if (byYear.has(year)) return {Year: year, Value: byYear.get(year)}\n\n const before = known.filter(d => d.Year < year).at(-1)\n const after = known.find(d => d.Year > year)\n\n if (!before || !after) return {Year: year, Value: null}\n\n const t = (year - before.Year) / (after.Year - before.Year)\n return {\n Year: year,\n Value: before.Value + t * (after.Value - before.Value)\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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":9,"value":"d3geo = require(\"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Plot = require(\"@observablehq/plot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"countryData = FileAttachment(\"3-9-2026_data_EDP.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/World/world_countries.topojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"countries = topojson.feature(\n world,\n world.objects.world_countries_data\n).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"statemesh = topojson.mesh(\n world,\n world.objects.world_countries_data\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"metrics = ({\n LEX: \"Life Expectancy at Birth\",\n \"Health Ex per Cap\": \"Health Expenditure per Capita\",\n \"Physicians (per 1,000 people)\": \"Physicians per 1,000 People\",\n \"UHC.1\": \"Universal Health Coverage Index\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"metricFormats = ({\n LEX: d3.format(\".1f\"),\n \"Health Ex per Cap\": d3.format(\"$,.0f\"),\n \"Physicians (per 1,000 people)\": d3.format(\".2f\"),\n \"UHC.1\": d3.format(\".0f\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"years = Array.from(\n new Set(countryData.map(d => +d.Year).filter(Number.isFinite))\n).sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof selectedMetric = Inputs.select(\n Object.keys(metrics),\n {\n label: \"Color Metric\",\n value: \"LEX\",\n format: d => metrics[d]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof selectedSizeMetric = Inputs.select(\n Object.keys(metrics),\n {\n label: \"Size Metric\",\n value: \"Health Ex per Cap\",\n format: d => metrics[d]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof useSizeScaling = Inputs.toggle({\n label: \"Scale boxes by metric\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof showMiniLines = Inputs.toggle({\n label: \"Show mini line graphs\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof selectedYear = Inputs.range(\n [d3.min(years), d3.max(years)],\n {\n label: \"Year\",\n step: 1,\n value: d3.max(years)\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"mutable selectedCountryIds = new Set()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"gridScale = 0.04","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"cellSize = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"padding = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"xBias = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"yBias = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 800\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"customProjection = d3geo.geoWinkel3()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"path = {\n const proj = customProjection\n .scale(200)\n .translate([480, 300])\n\n return d3.geoPath(proj)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"countryNodes = countries.map(d => {\n const [cx, cy] = path.centroid(d)\n\n return {\n id: d.properties?.ISO3,\n name: d.properties?.NAMEen,\n gridX: Math.round(cx * gridScale),\n gridY: Math.round(cy * gridScale)\n }\n}).filter(d =>\n d.id &&\n Number.isFinite(d.gridX) &&\n Number.isFinite(d.gridY)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"uncollided = resolveCollisions(countryNodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"dataByCountries = d3.rollup(\n countryData,\n v => v.sort((a, b) => d3.ascending(+a.Year, +b.Year)),\n d => d[\"Country Code\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"selectedYearRows = countryData.filter(d => +d.Year === selectedYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"valueByCountry = new Map(\n selectedYearRows.map(d => [\n d[\"Country Code\"],\n Number.isFinite(+d[selectedMetric]) ? +d[selectedMetric] : null\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"colorDomain = d3.extent(\n selectedYearRows\n .map(d => +d[selectedMetric])\n .filter(Number.isFinite)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"colorScale = d3.scaleSequential()\n .domain(colorDomain)\n .interpolator(\n d3.interpolateRgbBasis([\n \"#d73027\",\n \"#fdae61\",\n \"#fee08b\",\n \"#66bd63\",\n \"#4575b4\"\n ])\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"dataDomainX = d3.extent(countryData, d => +d.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"dataDomainY = d3.extent(\n countryData\n .map(d => +d[selectedMetric])\n .filter(Number.isFinite)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"