43:null 44:["$","title",null,{"children":"JHU Map - Coverage change | Graphicacy | Observable"}] 4a:T1772,viewof cell12 = { // [Extreme decline, outer decline, inner decline, stable, inner improve, outer improve, extreme improve] let divC = [ "#db6a35", "#eb986a", "#f4c5a0", "#F7F3D9", "#b7cfbe", "#75aca4", "#1d898b" ]; // ── helpers ─────────────────────────────────────────────── const h2r = (h) => { const x = h.replace("#", ""); return [ parseInt(x.slice(0, 2), 16), parseInt(x.slice(2, 4), 16), parseInt(x.slice(4, 6), 16) ]; }; const r2h = (r, g, b) => "#" + [r, g, b] .map((v) => Math.round(Math.max(0, Math.min(255, v))) .toString(16) .padStart(2, "0") ) .join(""); const lerp = (a, b, t) => a + (b - a) * t; const blendAt = (colors, t) => { const n = colors.length - 1; const s = t * n, lo = Math.min(Math.floor(s), n - 1), f = s - lo; const c1 = h2r(colors[lo]), c2 = h2r(colors[lo + 1]); return r2h(...c1.map((v, i) => lerp(v, c2[i], f))); }; const gradient = (colors) => { const stops = Array.from({ length: 20 }, (_, i) => blendAt(colors, i / 19)); return `linear-gradient(to right,${stops.join(",")})`; }; // ── DOM ─────────────────────────────────────────────────── const LABELS = [ "Declined endpoint (darkest)", "Declined outer-mid", "Declined inner-mid", "Stable / no change", "Improved inner-mid", "Improved outer-mid", "Improved endpoint (darkest)" ]; const el = html`

Diverging color scale — 7 stops

`; // ── swatch builder ──────────────────────────────────────── const buildSwatches = () => { const container = el.querySelector("#cp-div-swatches"); container.innerHTML = ""; divC.forEach((col, i) => { const row = document.createElement("div"); row.style.cssText = "display:flex;align-items:center;gap:10px;margin-bottom:8px"; const sw = document.createElement("div"); sw.style.cssText = `width:38px;height:38px;border-radius:5px;border:1px solid #ddd;background:${col};flex-shrink:0;position:relative;overflow:hidden;cursor:pointer`; const pk = document.createElement("input"); pk.type = "color"; pk.value = col; pk.style.cssText = "position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0"; const hexEl = document.createElement("span"); hexEl.style.cssText = "font-family:monospace;color:#aaa;font-size:11px;min-width:58px"; hexEl.textContent = col; pk.addEventListener("input", (e) => { divC[i] = e.target.value; sw.style.background = e.target.value; hexEl.textContent = e.target.value; refresh(); }); sw.appendChild(pk); const lbl = document.createElement("span"); lbl.style.cssText = "color:#555;flex:1;font-size:12px"; lbl.textContent = LABELS[i]; row.appendChild(sw); row.appendChild(lbl); row.appendChild(hexEl); container.appendChild(row); }); }; // ── save button ─────────────────────────────────────────── const saveBtn = el.querySelector("#cp-save-btn"); const saveMsg = el.querySelector("#cp-save-msg"); const saveCode = el.querySelector("#cp-save-code"); saveBtn.addEventListener("click", async () => { const codeStr = "let divC = [\n" + divC.map((c) => ` "${c}"`).join(",\n") + "\n ];"; saveCode.value = codeStr; saveCode.style.display = "block"; // Persist locally so colors survive a reload of this notebook session. try { localStorage.setItem("cp-div-colors", JSON.stringify(divC)); } catch (e) {} let copied = false; try { await navigator.clipboard.writeText(codeStr); copied = true; } catch (e) {} saveMsg.textContent = copied ? "✓ Saved & copied — paste over the divC default array in the code above." : "✓ Saved — copy the snippet below and paste it over the divC default array in the code above."; saveMsg.style.opacity = 1; clearTimeout(saveBtn._t); saveBtn._t = setTimeout(() => (saveMsg.style.opacity = 0), 4000); }); // ── refresh ─────────────────────────────────────────────── const refresh = () => { el.value = { divColors: [...divC] }; el.dispatchEvent(new CustomEvent("input")); }; // Restore last-saved colors from localStorage, if present. try { const saved = JSON.parse(localStorage.getItem("cp-div-colors")); if (Array.isArray(saved) && saved.length === divC.length) { divC = saved; } } catch (e) {} buildSwatches(); refresh(); return el; }4b:T9a1,viewof binBoundaries = { const defaults = [-10, -6, -2, 2, 6, 10]; const el = html`

Bins ranges (percentage points)

Declined > pp · pp · pp · Stable · pp · pp · pp < Improved

`; const inputs = [ el.querySelector("#b0"), el.querySelector("#b1"), el.querySelector("#b2"), el.querySelector("#b3"), el.querySelector("#b4"), el.querySelector("#b5") ]; const emit = () => { const vals = inputs.map((i) => parseFloat(i.value) / 100); el.value = vals; el.dispatchEvent(new CustomEvent("input")); }; inputs.forEach((i) => i.addEventListener("input", emit)); el.value = defaults.map((v) => v / 100); return el; }4c:Te97,html`

Legend preview

`${c} ${domainPcts[i]}%`); return `linear-gradient(to right,${stops.join(",")})`; } else { const [b0, b1, b2, b3, b4, b5] = binBoundaries || [ -0.2, -0.1, -0.05, 0.05, 0.1, 0.2 ]; const sizes = [ Math.abs(b1 - b0), // outer decline = same width as next Math.abs(b2 - b1), // mid decline Math.abs(b2 - b1), // inner decline (mirror sizing) b3 - b2, // stable b4 - b3, // inner improve b4 - b3, // mid improve (mirror sizing) Math.abs(b1 - b0) // outer improve (mirror sizing) ]; const totalSize = sizes.reduce((a, b) => a + b, 0); let cursor = 0; const stops = []; divC.forEach((c, i) => { const w = (sizes[i] / totalSize) * 100; stops.push(`${c} ${cursor.toFixed(1)}%`); stops.push(`${c} ${(cursor + w).toFixed(1)}%`); cursor += w; }); return `linear-gradient(to right,${stops.join(",")})`; } })()}">

${(() => { if (scaleBinning !== "Binned") { return ` Declined No change Improved `; } else { const [b0, b1, b2, b3, b4, b5] = binBoundaries || [ -0.2, -0.1, -0.05, 0.05, 0.1, 0.2 ]; const sizes = [ Math.abs(b1 - b0), Math.abs(b2 - b1), Math.abs(b2 - b1), b3 - b2, b4 - b3, b4 - b3, Math.abs(b1 - b0) ]; const total = sizes.reduce((a, b) => a + b, 0); const labels = [ `>${Math.abs(b0 * 100).toFixed(0)}`, `${Math.abs(b1 * 100).toFixed(0)}–${Math.abs(b0 * 100).toFixed(0)}`, `${Math.abs(b2 * 100).toFixed(0)}–${Math.abs(b1 * 100).toFixed(0)}`, `±${(b3 * 100).toFixed(0)}`, `${(b3 * 100).toFixed(0)}–${(b4 * 100).toFixed(0)}`, `${(b4 * 100).toFixed(0)}–${(b5 * 100).toFixed(0)}`, `>${(b5 * 100).toFixed(0)}` ]; let cursor = 0; return labels .map((lbl, i) => { const w = (sizes[i] / total) * 100; const mid = cursor + w / 2; cursor += w; return `${lbl}`; }) .join(""); } })()}

`4d:Tcf1,viewof startYear = { const YEARS = [ "SY2017_18", "SY2018_19", "SY2019_20", "SY2020_21", "SY2021_22", "SY2022_23", "SY2023_24", "SY2024_25" ]; const LABELS = [ "17/18", "18/19", "19/20", "20/21", "21/22", "22/23", "23/24", "24/25" ]; const el = html`

Time range

${LABELS.map( (lbl, i) => ` ${lbl} ` ).join("")}

`; const track = el.querySelector("#fr-track"); const fill = el.querySelector("#fr-fill"); const leftDot = el.querySelector("#fr-left"); const label = el.querySelector("#fr-label"); let currentIdx = 0; // left handle index into YEARS function update() { const pct = (currentIdx / (YEARS.length - 1)) * 100; leftDot.style.left = pct + "%"; fill.style.left = pct + "%"; fill.style.right = "0%"; label.textContent = `${LABELS[currentIdx]} → 24/25`; el.value = YEARS[currentIdx]; window.__currentStartYear = YEARS[currentIdx]; window.__updateMMRColors && window.__updateMMRColors(); } // drag logic let dragging = false; leftDot.addEventListener("mousedown", (e) => { dragging = true; e.preventDefault(); }); document.addEventListener("mousemove", (e) => { if (!dragging) return; const rect = track.getBoundingClientRect(); const ratio = Math.max( 0, Math.min(1, (e.clientX - rect.left) / rect.width) ); currentIdx = Math.round(ratio * (YEARS.length - 1)); // can't go past second-to-last (right is fixed at last) currentIdx = Math.min(currentIdx, YEARS.length - 2); update(); }); document.addEventListener("mouseup", () => { dragging = false; el.dispatchEvent(new CustomEvent("input")); }); el.value = YEARS[0]; update(); return el; }4e:T45cb,{ const topojson = await import("https://cdn.skypack.dev/topojson-client@3"); const d3 = await import("https://cdn.skypack.dev/d3@7"); d3.select("#mmr-map").remove(); const W = 960, H = 760; const MAP_H = 580; const features = topojson.feature(us, us.objects.counties).features; const path = d3.geoPath(); const SCHOOL_YEARS = [ "SY2017_18", "SY2018_19", "SY2019_20", "SY2020_21", "SY2021_22", "SY2022_23", "SY2023_24", "SY2024_25" ]; // ── Dependencies ────────────────────────────────────────── const [b0, b1, b2, b3, b4, b5] = binBoundaries || [-0.2, -0.1, -0.05, 0.05, 0.1, 0.2]; const _lookup = countyLookup; const _sy = startYear; // ── Bin setup ───────────────────────────────────────────── const DIV_BINS = [ { label: `Declined > ${Math.abs(b0 * 100).toFixed(0)}pp`, min: -1, max: b0 }, { label: `Declined ${Math.abs(b1 * 100).toFixed(0)}–${Math.abs( b0 * 100 ).toFixed(0)}pp`, min: b0, max: b1 }, { label: `Declined ${Math.abs(b2 * 100).toFixed(0)}–${Math.abs( b1 * 100 ).toFixed(0)}pp`, min: b1, max: b2 }, { label: `Stable (±${(b3 * 100).toFixed(0)}pp)`, min: b2, max: b3 }, { label: `Improved ${(b3 * 100).toFixed(0)}–${(b4 * 100).toFixed(0)}pp`, min: b3, max: b4 }, { label: `Improved ${(b4 * 100).toFixed(0)}–${(b5 * 100).toFixed(0)}pp`, min: b4, max: b5 }, { label: `Improved > ${(b5 * 100).toFixed(0)}pp`, min: b5, max: 1 } ]; const sizes = [ Math.abs(b1 - b0), Math.abs(b2 - b1), Math.abs(b2 - b1), b3 - b2, b4 - b3, b4 - b3, Math.abs(b1 - b0) ]; const totalSize = sizes.reduce((a, b) => a + b, 0); const divC = (cell12 && cell12.divColors) || [ "#50007a", "#d741e1", "#DBAE61", "#F7F3D9", "#99C5D6", "#60d2bf", "#1d898b" ]; const midStable = (b2 + b3) / 2; const DIV_BIN_COLORS = [ divC[0], divergingScale(b0 + (b1 - b0) * 0.5) ?? divC[1], divergingScale(b1 + (b2 - b1) * 0.5) ?? divC[2], divergingScale(midStable) ?? divC[3], divergingScale(b3 + (b4 - b3) * 0.5) ?? divC[4], divergingScale(b4 + (b5 - b4) * 0.5) ?? divC[5], divC[6] ]; function getDivBinColor(val) { if (val === null || val === undefined) return "#F9F9F9"; const bin = DIV_BINS.findIndex((b) => val >= b.min && val < b.max); return bin >= 0 ? DIV_BIN_COLORS[bin] : DIV_BIN_COLORS[DIV_BIN_COLORS.length - 1]; } // ── Compute change ──────────────────────────────────────── function getCountyChange(info) { if (!info || !info.allRates) return { change: null, fromRate: null, toRate: null, fromYear: null, toYear: null, missingYears: false, missingCount: 0 }; // Use startYear as baseline if it has data, otherwise fall back to oldest const fromYear = (info.allRates[startYear] ?? null) !== null ? startYear : SCHOOL_YEARS.find((y) => (info.allRates[y] ?? null) !== null); const toYear = [...SCHOOL_YEARS] .reverse() .find((y) => (info.allRates[y] ?? null) !== null); if (!fromYear || !toYear || fromYear === toYear) return { change: null, fromRate: null, toRate: null, fromYear, toYear, missingYears: false, missingCount: 0 }; const fromRate = info.allRates[fromYear]; const toRate = info.allRates[toYear]; const change = toRate - fromRate; const fromIdx = SCHOOL_YEARS.indexOf(fromYear); const toIdx = SCHOOL_YEARS.indexOf(toYear); const span = SCHOOL_YEARS.slice(fromIdx, toIdx + 1); const missingInSpan = span.filter( (y) => (info.allRates[y] ?? null) === null ).length; return { change, fromRate, toRate, fromYear, toYear, missingYears: missingInSpan > 0, missingCount: missingInSpan, spanYears: span.length - 1 }; } // ── Color accessor ──────────────────────────────────────── function getColorSeq(d) { const id = String(d.id).padStart(5, "0"); const info = countyLookup.get(id); if (!info) return "#F9F9F9"; const { change } = getCountyChange(info); if (change === null) return "#F9F9F9"; const clamped = Math.max(b0, Math.min(b5, change)); const fullColor = scaleBinning === "Binned" ? getDivBinColor(change) : divergingScale(clamped) ?? "#F9F9F9"; if (!fullColor || typeof fullColor !== "string") return "#F9F9F9"; return fullColor; } // ── SVG ─────────────────────────────────────────────────── const fromLabel = startYear.replace("SY", "").replace("_", "/"); const svg = d3 .create("svg") .attr("id", "mmr-map") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W) .attr("height", H); svg.append("rect").attr("width", W).attr("height", H).attr("fill", "white"); svg .append("text") .attr("x", W / 2) .attr("y", 26) .attr("text-anchor", "middle") .style("font", "bold 17px sans-serif") .attr("fill", "#111") .text(`MMR Coverage Change · ${fromLabel} → latest available`); // ── Trend panel (foreignObject) ─────────────────────────── const PANEL_X = W / 2 + 20; const PANEL_Y = MAP_H + 8; const PANEL_W = W / 2 - 36; const PANEL_H = H - PANEL_Y - 16; const panelFO = svg .append("foreignObject") .attr("x", PANEL_X) .attr("y", PANEL_Y) .attr("width", PANEL_W) .attr("height", PANEL_H); const panel = d3 .select(panelFO.node()) .append("xhtml:div") .style("background", "rgba(255,255,255,0.97)") .style("border-radius", "8px") .style("padding", "16px 20px 12px") .style("font-family", "sans-serif") .style("border", "0.25px solid #bbb") .style("height", "100%") .style("box-sizing", "border-box") .style("overflow", "hidden"); panel.html( `

Hover a county to see its data

` ); function drawTrendPanel(info) { const rates = SCHOOL_YEARS.map((y) => info.allRates[y]); const validRates = rates.filter((v) => v !== null); if (!validRates.length) return; const { change, fromYear, toYear } = getCountyChange(info); const chgStr = change != null ? (change >= 0 ? "+" : "") + (change * 100).toFixed(1) + "pp" : "N/A"; const capFrom = fromYear ? fromYear.replace("SY", "").replace("_", "/") : "—"; const capTo = toYear ? toYear.replace("SY", "").replace("_", "/") : "—"; const PW = PANEL_W - 40, PH = 90; const ML = 10, MR = PW - 10; const barY = 30, barH = 28; const zx = ML + (MR - ML) * 0.5; const clamped = change != null ? Math.max(b0, Math.min(b5, change)) : 0; const rawColor = change != null ? scaleBinning === "Binned" ? getDivBinColor(change) : divergingScale(clamped) ?? "#ccc" : "#ccc"; const barColor = !rawColor || typeof rawColor !== "string" ? "#ccc" : rawColor; const chartSvg = d3 .create("svg") .attr("width", PW) .attr("height", PH) .attr("viewBox", `0 0 ${PW} ${PH}`); chartSvg .append("text") .attr("x", ML) .attr("y", 14) .style("font", "10px sans-serif") .attr("fill", "#999") .text(`${capFrom} → ${capTo}`); chartSvg .append("rect") .attr("x", ML) .attr("y", barY) .attr("width", MR - ML) .attr("height", barH) .attr("fill", "#f0f0f0") .attr("rx", 4); chartSvg .append("line") .attr("x1", zx) .attr("x2", zx) .attr("y1", barY - 6) .attr("y2", barY + barH + 6) .attr("stroke", "#999") .attr("stroke-width", 1.2); if (change != null) { const maxAbs = Math.max(Math.abs(b0), b5); const barW = (Math.abs(clamped) / maxAbs) * (zx - ML); chartSvg .append("rect") .attr("x", clamped < 0 ? zx - barW : zx) .attr("y", barY) .attr("height", barH) .attr("width", barW) .attr("fill", barColor) .attr("rx", 0); const labelX = clamped < 0 ? zx - barW - 6 : zx + barW + 6; chartSvg .append("text") .attr("x", labelX) .attr("y", barY + barH / 2 + 4) .attr("text-anchor", clamped < 0 ? "end" : "start") .style("font", "bold 12px sans-serif") .attr("fill", "#555") .text(chgStr); } const maxAbs = Math.max(Math.abs(b0), b5); chartSvg .append("text") .attr("x", ML) .attr("y", barY + barH + 18) .style("font", "10px sans-serif") .attr("fill", "#aaa") .text(`-${(maxAbs * 100).toFixed(0)}pp`); chartSvg .append("text") .attr("x", zx) .attr("y", barY + barH + 18) .attr("text-anchor", "middle") .style("font", "10px sans-serif") .attr("fill", "#aaa") .text("0pp"); chartSvg .append("text") .attr("x", MR) .attr("y", barY + barH + 18) .attr("text-anchor", "end") .style("font", "10px sans-serif") .attr("fill", "#aaa") .text(`+${(maxAbs * 100).toFixed(0)}pp`); panel.html(""); panel .append("xhtml:div") .style("display", "flex") .style("justify-content", "space-between") .style("align-items", "baseline") .style("margin-bottom", "8px").html(` ${info.county} ${chgStr} `); panel.node().appendChild(chartSvg.node()); } function clearTrendPanel() { panel.html( `

Hover a county to see its data

` ); } // ── County fills ────────────────────────────────────────── svg .append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", getColorSeq) .attr("stroke", (d) => (getColorSeq(d) === "#F9F9F9" ? "#666" : "#fff")) .attr("stroke-width", 0.25) .on("mouseover", function (event, d) { const id = String(d.id).padStart(5, "0"); const info = countyLookup.get(id); if (!info) return; d3.select(this).attr("stroke", "#222").attr("stroke-width", 1); drawTrendPanel(info); }) .on("mousemove", function () {}) .on("mouseout", function (event, d) { const col = getColorSeq(d); d3.select(this) .attr("stroke", col === "#F9F9F9" ? "#666" : "#fff") .attr("stroke-width", 0.25); clearTrendPanel(); }); // State outlines svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", 0.8) .attr("d", path); // ── Legend ─────────────────────────────────────────────── const LW = 340, LH = 14; const defs = svg.append("defs"); const BOX_Y_div = MAP_H + 8; if (scaleBinning === "Unbinned") { const BOX_H = 72; const grad = defs.append("linearGradient").attr("id", "div-grad"); const steps = 60; d3.range(steps + 1).forEach((i) => { const v = b0 + (i / steps) * (b5 - b0); const t = (v - b0) / (b5 - b0); const color = divergingScale(v) ?? "#ccc"; grad .append("stop") .attr("offset", `${(t * 100).toFixed(1)}%`) .attr("stop-color", color); }); const lg = svg.append("g").attr("transform", `translate(16,${BOX_Y_div})`); lg.append("rect") .attr("width", LW + 90) .attr("height", BOX_H) .attr("fill", "white") .attr("stroke", "#ddd") .attr("rx", 8) .attr("filter", "drop-shadow(0 1px 3px rgba(0,0,0,.08))"); const zx = 10 + ((0 - b0) / (b5 - b0)) * LW; lg.append("text") .attr("x", zx) .attr("y", 12) .attr("text-anchor", "middle") .style("font", "10px sans-serif") .attr("fill", "#333") .text("no change"); lg.append("rect") .attr("x", 10) .attr("y", 16) .attr("width", LW) .attr("height", LH) .attr("rx", 3) .attr("fill", "url(#div-grad)") .attr("stroke", "#eee") .attr("stroke-width", 0.5); lg.append("line") .attr("x1", zx) .attr("x2", zx) .attr("y1", 8) .attr("y2", 16 + LH) .attr("stroke", "#444") .attr("stroke-width", 1.2) .attr("stroke-dasharray", "3,2"); [b0, b1, b2, 0, b3, b4, b5].forEach((v) => { const x = 10 + ((v - b0) / (b5 - b0)) * LW; lg.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", 16 + LH) .attr("y2", 16 + LH + 4) .attr("stroke", "#bbb") .attr("stroke-width", 0.8); lg.append("text") .attr("x", x) .attr("y", 16 + LH + 14) .attr("text-anchor", "middle") .style("font", "9px sans-serif") .attr("fill", "#666") .text((v >= 0 ? "+" : "") + (v * 100).toFixed(0) + "pp"); }); lg.append("text") .attr("x", 10) .attr("y", 16 + LH + 28) .style("font", "10px sans-serif") .attr("fill", "#bbb") .text("Total change"); lg.append("rect") .attr("x", 10 + LW + 16) .attr("y", 16) .attr("width", 14) .attr("height", 14) .attr("rx", 2) .attr("fill", "#EAEAEA") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); lg.append("text") .attr("x", 10 + LW + 34) .attr("y", 27) .style("font", "11px sans-serif") .attr("fill", "#555") .text("No data"); } else { const PAD = 16; const BAR_H = 28; const BOX_W = LW + PAD * 2 + 60; const BOX_H = 80; const BAR_Y = PAD + 20; const getBinW = (i) => (sizes[i] / totalSize) * LW; let xCursor = PAD; const midXs = DIV_BINS.map((_, i) => { const bw = getBinW(i); const mid = xCursor + bw / 2; xCursor += bw; return mid; }); const lg = svg.append("g").attr("transform", `translate(16,${BOX_Y_div})`); lg.append("rect") .attr("width", BOX_W) .attr("height", BOX_H) .attr("fill", "white") .attr("stroke", "#ddd") .attr("rx", 8) .attr("filter", "drop-shadow(0 1px 3px rgba(0,0,0,.08))"); lg.append("text") .attr("x", (midXs[0] + midXs[2]) / 2) .attr("y", PAD + 4) .attr("text-anchor", "middle") .style("font", "11px sans-serif") .attr("fill", "#555") .text("← Declined"); lg.append("text") .attr("x", midXs[3]) .attr("y", PAD + 4) .attr("text-anchor", "middle") .style("font", "11px sans-serif") .attr("fill", "#888") .text("no change"); lg.append("text") .attr("x", (midXs[4] + midXs[6]) / 2) .attr("y", PAD + 4) .attr("text-anchor", "middle") .style("font", "11px sans-serif") .attr("fill", "#555") .text("Improved →"); const shortLabels = [ `>${Math.abs(b0 * 100).toFixed(0)}`, `${Math.abs(b1 * 100).toFixed(0)}–${Math.abs(b0 * 100).toFixed(0)}`, `${Math.abs(b2 * 100).toFixed(0)}–${Math.abs(b1 * 100).toFixed(0)}`, `±${(b3 * 100).toFixed(0)}`, `${(b3 * 100).toFixed(0)}–${(b4 * 100).toFixed(0)}`, `${(b4 * 100).toFixed(0)}–${(b5 * 100).toFixed(0)}`, `>${(b5 * 100).toFixed(0)}` ]; xCursor = PAD; DIV_BINS.forEach((b, i) => { const bw = getBinW(i); lg.append("rect") .attr("x", xCursor) .attr("y", BAR_Y) .attr("width", bw) .attr("height", BAR_H) .attr("fill", DIV_BIN_COLORS[i]) .attr("rx", 0); if (bw > 14) { lg.append("text") .attr("x", xCursor + bw / 2) .attr("y", BAR_Y + BAR_H / 2 + 4) .attr("text-anchor", "middle") .style("font", `${bw < 26 ? "8" : "10"}px sans-serif`) .attr("fill", "white") .text(shortLabels[i]); } xCursor += bw; }); lg.append("text") .attr("x", PAD - 4) .attr("y", BAR_Y + BAR_H / 2 + 4) .attr("text-anchor", "end") .style("font", "10px sans-serif") .attr("fill", "#888") .text("% pt"); lg.append("rect") .attr("x", PAD + LW + 12) .attr("y", BAR_Y) .attr("width", 24) .attr("height", BAR_H) .attr("rx", 0) .attr("fill", "#EAEAEA") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); lg.append("text") .attr("x", PAD + LW + 40) .attr("y", BAR_Y + BAR_H / 2 + 4) .style("font", "11px sans-serif") .attr("fill", "#555") .text("No data"); lg.append("text") .attr("x", PAD) .attr("y", BOX_H - 6) .style("font", "9px sans-serif") .attr("fill", "#bbb") .text("Width reflects pp range"); } svg .append("text") .attr("x", W - 8) .attr("y", H - 6) .attr("text-anchor", "end") .style("font", "10px sans-serif") .attr("fill", "#bbb") .text("Source: CDC school vaccination survey"); return svg.node(); }4f:T703,getColorSeq = (d) => { const [b0, b1, b2, b3, b4, b5] = binBoundaries || [-0.2, -0.1, -0.05, 0.05, 0.1, 0.2]; const id = String(d.id).padStart(5, "0"); const info = countyLookup.get(id); if (!info) return "#F9F9F9"; const fromYear = (info.allRates[startYear] ?? null) !== null ? startYear : SCHOOL_YEARS.find((y) => (info.allRates[y] ?? null) !== null); const toYear = [...SCHOOL_YEARS] .reverse() .find((y) => (info.allRates[y] ?? null) !== null); if (!fromYear || !toYear || fromYear === toYear) return "#F9F9F9"; const change = info.allRates[toYear] - info.allRates[fromYear]; const clamped = Math.max(b0, Math.min(b5, change)); const divC = (cell12 && cell12.divColors) || [ "#7A2E00", "#B44104", "#DBAE61", "#F7F3D9", "#99C5D6", "#5B9EC9", "#2F83B6" ]; const DIV_BINS = [ { min: -1, max: b0 }, { min: b0, max: b1 }, { min: b1, max: b2 }, { min: b2, max: b3 }, { min: b3, max: b4 }, { min: b4, max: b5 }, { min: b5, max: 1 } ]; const mid = (b2 + b3) / 2; const DIV_BIN_COLORS = [ divC[0], divergingScale(b0 + (b1 - b0) * 0.5) ?? divC[1], divergingScale(b1 + (b2 - b1) * 0.5) ?? divC[2], divergingScale(mid) ?? divC[3], divergingScale(b3 + (b4 - b3) * 0.5) ?? divC[4], divergingScale(b4 + (b5 - b4) * 0.5) ?? divC[5], divC[6] ]; const getDivBinColor = (val) => { const bin = DIV_BINS.findIndex((b) => val >= b.min && val < b.max); return bin >= 0 ? DIV_BIN_COLORS[bin] : DIV_BIN_COLORS[DIV_BIN_COLORS.length - 1]; }; const fullColor = scaleBinning === "Binned" ? getDivBinColor(change) : divergingScale(clamped) ?? "#F9F9F9"; return !fullColor || typeof fullColor !== "string" ? "#F9F9F9" : fullColor; }50:[{"id":"03aab57504ed82c3c33764ad5f31013749ecabb9318d044f8b0780a61d5f6a0add5e1b338aeaaa34a004874afbcad1cef16fb0b08bc988b7c920bb981da09285","href":"https://static.observableusercontent.com/files/03aab57504ed82c3c33764ad5f31013749ecabb9318d044f8b0780a61d5f6a0add5e1b338aeaaa34a004874afbcad1cef16fb0b08bc988b7c920bb981da09285","name":"mmr_data_us_counties_v2.csv","type":"text/csv","lastModified":1782407587257.965,"size":176739}] 48:{"id":"792777b0ecb34ba2","slug":"jhu-map-coverage-change","title":"JHU Map - Coverage change","thumbnail":"d1fa6d5b46899e7d25f4f47a9ad18c5d48b5171daf1537d6bc1ff81037b4764e","access_level":"public","create_time":"$D2026-06-25T17:13:07.257Z","update_time":"$D2026-09-11T13:19:14.162Z","view_time":null,"first_public_time":"$D2026-07-17T18:57:35.365Z","has_unpublished_edits":null,"fork":{"id":"6fa7f6dde64dd226","slug":null,"title":"JHU - Coverage by year","owner":{"id":"02959405770be1b9","login":"graphicacy","name":"Graphicacy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"02959405770be1b9","login":"graphicacy","name":"Graphicacy","avatar_url":"https://avatars-next.observableusercontent.com/e8ed1ea304796e64d44c250662f80590c46ca73f261b085861d4d4d241264951","tier":"starter_2024","bio":"","following":false},"version":647,"publish_version":647,"role":null,"authored":false,"authors":[{"type":"individual","id":"5981d991a47887ee","login":"bakbar","name":"Batool A","avatar_url":"https://avatars-next.observableusercontent.com/65c338bc9cea738b60fdba5ec9d7e1b70521e6009c733141e7226ec6eaf05f95","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"5981d991a47887ee","login":"bakbar","name":"Batool A","avatar_url":"https://avatars-next.observableusercontent.com/65c338bc9cea738b60fdba5ec9d7e1b70521e6009c733141e7226ec6eaf05f95","tier":null,"role":"editor"},{"type":"team","id":"02959405770be1b9","login":"graphicacy","name":"Graphicacy","avatar_url":"https://avatars-next.observableusercontent.com/e8ed1ea304796e64d44c250662f80590c46ca73f261b085861d4d4d241264951","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"JHU Map - Coverage change","cells":[{"id":0,"value":"# JHU Map - Coverage change","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"viewof scaleBinning = Inputs.radio([\"Binned\", \"Unbinned\"], {\n label: \"Color scale:\",\n value: \"Binned\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"localStorage.setItem(\"cp-div-colors\", JSON.stringify([\n \"#db6a35\",\n \"#eb986a\",\n \"#f4c5a0\",\n \"#F7F3D9\",\n \"#b7cfbe\",\n \"#75aca4\",\n \"#1d898b\"\n]));\n\"localStorage updated\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"{\n const btn = html``;\n\n btn.onclick = () => {\n const el = document.getElementById(\"mmr-map\");\n if (!el) {\n alert(\"Run the map cell first.\");\n return;\n }\n\n const blob = new Blob(\n [\n '\\n' +\n new XMLSerializer().serializeToString(el)\n ],\n { type: \"image/svg+xml;charset=utf-8\" }\n );\n const a = Object.assign(document.createElement(\"a\"), {\n href: URL.createObjectURL(blob),\n download: `mmr_coverage_change.svg`\n });\n a.click();\n URL.revokeObjectURL(a.href);\n };\n\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"rawData = FileAttachment(\"mmr_data_us_counties_v2.csv\").csv({ typed: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"parseRate = (val) => {\n const s =\n val === null || val === undefined\n ? \"\"\n : String(val).replace(\"*\", \"\").trim();\n return s === \"\" || s === \"NR\" ? null : +s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"divergingScale = {\n const d3 = await import(\"https://cdn.skypack.dev/d3@7\");\n const _c = cell12;\n const [b0, b1, b2, b3, b4, b5] = binBoundaries || [-0.2, -0.1, -0.05, 0.05, 0.1, 0.2];\n const div = (cell12 && cell12.divColors) || [\n \"#7A2E00\",\n \"#B44104\",\n \"#DBAE61\",\n \"#F7F3D9\",\n \"#99C5D6\",\n \"#5B9EC9\",\n \"#2F83B6\"\n ];\n // Domain: [b0, b1, b2, midpoint(b2,b3), b3, b4, b5]\n // so stable zone (b2→b3) maps to div[3], and transitions happen at boundaries\n const mid = (b2 + b3) / 2;\n return d3\n .scaleLinear()\n .domain([b0, b1, b2, mid, b3, b4, b5])\n .range([div[0], div[1], div[2], div[3], div[4], div[5], div[6]])\n .clamp(true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"us = fetch(\n \"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json\"\n).then((r) => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"SCHOOL_YEARS = [\n \"SY2017_18\",\n \"SY2018_19\",\n \"SY2019_20\",\n \"SY2020_21\",\n \"SY2021_22\",\n \"SY2022_23\",\n \"SY2023_24\",\n \"SY2024_25\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"countyLookup = {\n const map = new Map();\n for (const row of rawData) {\n if (!row.FIPS || String(row.FIPS).trim() === \"\") continue;\n const fips = String(row.FIPS).padStart(5, \"0\");\n\n const rates = Object.fromEntries(\n SCHOOL_YEARS.map((y) => [y, parseRate(row[y])])\n );\n\n const oldestYear = SCHOOL_YEARS.find((y) => rates[y] !== null);\n const newestYear = [...SCHOOL_YEARS]\n .reverse()\n .find((y) => rates[y] !== null);\n const fromRate = oldestYear ? rates[oldestYear] : null;\n const toRate = newestYear ? rates[newestYear] : null;\n const change =\n fromRate !== null && toRate !== null ? toRate - fromRate : null;\n\n map.set(fips, {\n county: `${row.County}, ${row.State}`,\n allRates: rates,\n change,\n oldestYear,\n newestYear\n });\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"yearStats = {\n const vals = [...countyLookup.values()]\n .map((d) => d.rate)\n .filter((v) => v !== null);\n\n const mean = vals.reduce((a, b) => a + b, 0) / vals.length;\n const below95 = vals.filter((v) => v < 0.95).length;\n const below85 = vals.filter((v) => v < 0.85).length;\n\n return {\n n: vals.length,\n missing: countyLookup.size - vals.length,\n mean: (mean * 100).toFixed(1),\n below95pct: ((below95 / vals.length) * 100).toFixed(1),\n below85pct: ((below85 / vals.length) * 100).toFixed(1)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 49:"$48:body"