42:null 43:["$","title",null,{"children":"JHU - Coverage by year | Graphicacy | Observable"}] 49:T12f5,viewof cell12 = { let seqC = ["#f7b267", "#d94f00", "#7f0000"]; let aboveC = ["#a8d4e0", "#3a9bc1"]; // ── 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 el = html`

Below threshold

← just belowvery low →

Above threshold

← just above100% →

`; // ── swatch builder ──────────────────────────────────────── const SEQ_LABELS = [ "Approaching threshold", "Mid coverage", "Very low coverage" ]; const ABOVE_LABELS = ["Just above threshold", "Full coverage"]; const buildSwatches = (containerId, colors, labels) => { const container = el.querySelector("#" + containerId); container.innerHTML = ""; colors.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) => { colors[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); }); }; // ── refresh ─────────────────────────────────────────────── const refresh = () => { el.querySelector("#cp-seq-bar").style.background = gradient(seqC); el.querySelector("#cp-above-bar").style.background = gradient(aboveC); el.value = { seqColors: [...seqC], aboveColors: [...aboveC] }; el.dispatchEvent(new CustomEvent("input")); }; buildSwatches("cp-seq-swatches", seqC, SEQ_LABELS); buildSwatches("cp-above-swatches", aboveC, ABOVE_LABELS); refresh(); return el; } 4a:T6af,{ const d3 = await import("https://cdn.skypack.dev/d3@7"); const _c = cell12; // dependency tracking const _t = THRESHOLD; const _m = scaleMin; const W = 400, H = 40; const svg = d3.create("svg").attr("width", W).attr("height", H); const defs = svg.append("defs"); const DOMAIN_STOPS = [ scaleMin, THRESHOLD * 0.85, THRESHOLD * 0.93, THRESHOLD, THRESHOLD + (1 - THRESHOLD) * 0.5, 1.0 ]; const PCT_POSITIONS = DOMAIN_STOPS.map( (v) => (v - scaleMin) / (1.0 - scaleMin) ); const grad = defs.append("linearGradient").attr("id", "preview-grad"); DOMAIN_STOPS.forEach((rate, i) => { grad .append("stop") .attr("offset", `${(PCT_POSITIONS[i] * 100).toFixed(1)}%`) .attr("stop-color", sequentialScale(rate)); }); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", W) .attr("height", 20) .attr("rx", 4) .attr("fill", "url(#preview-grad)"); // tick labels const ticks = [scaleMin, THRESHOLD, 1.0]; ticks.forEach((v) => { const x = ((v - scaleMin) / (1.0 - scaleMin)) * W; svg .append("text") .attr("x", x) .attr("y", 34) .attr( "text-anchor", v === scaleMin ? "start" : v === 1.0 ? "end" : "middle" ) .style("font", "10px sans-serif") .attr("fill", "#999") .text((v * 100).toFixed(0) + "%"); }); // threshold dashed line const tx = ((THRESHOLD - scaleMin) / (1.0 - scaleMin)) * W; svg .append("line") .attr("x1", tx) .attr("x2", tx) .attr("y1", 0) .attr("y2", 20) .attr("stroke", "#555") .attr("stroke-width", 1.2) .attr("stroke-dasharray", "3,2"); return svg.node(); }4b:T3a44,{ 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 = 750; const features = topojson.feature(us, us.objects.counties).features; const path = d3.geoPath(); const yearLabel = selectedYear.replace("SY", "").replace("_", "/"); const isCoverage = true; const _threshold = THRESHOLD; // ensures cell re-runs when slider moves 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 Vaccination Coverage by County (${yearLabel})`); d3.select("#map-tooltip").remove(); d3.select("#trend-panel").remove(); // ── Floating HTML trend panel ───────────────────────────── const panel = d3 .select("body") .append("div") .attr("id", "trend-panel") .style("position", "absolute") .style("pointer-events", "none") .style("display", "none") .style("background", "rgba(255,255,255,0.97)") .style("border-radius", "8px") .style("padding", "16px 20px 12px") .style("font-family", "sans-serif") .style("width", "350px") .style("border", "0.25px solid #bbb") .style("transform", "scale(0.8)") .style("transform-origin", "top left"); function positionPanel(event) { const PW = 440, PH = 230; const left = event.pageX + 16 + PW > window.innerWidth ? event.pageX - PW - 16 : event.pageX + 16; const top = event.pageY + 16 + PH > window.innerHeight ? event.pageY - PH - 16 : event.pageY + 16; panel.style("left", left + "px").style("top", top + "px"); } function drawTrendPanel(info, event) { const YEARS = [ "SY2017_18", "SY2018_19", "SY2019_20", "SY2020_21", "SY2021_22", "SY2022_23", "SY2023_24", "SY2024_25" ]; const YLABELS = [ "17/18", "18/19", "19/20", "20/21", "21/22", "22/23", "23/24", "24/25" ]; const rates = YEARS.map((y) => info.allRates[y]); const validRates = rates.filter((v) => v !== null); if (!validRates.length) return; const oldest = rates.find((v) => v !== null); const newest = [...rates].reverse().find((v) => v !== null); const overallChange = oldest != null && newest != null ? newest - oldest : null; const oldestLabel = YLABELS[rates.findIndex((v) => v !== null)]; const newestLabel = YLABELS[ rates.length - 1 - [...rates].reverse().findIndex((v) => v !== null) ]; const chgStr = overallChange != null ? (overallChange >= 0 ? "+" : "") + (overallChange * 100).toFixed(1) + "pp" : "N/A"; let chartSvg; { // ── Coverage view: line chart ────────────────────────── const PW = 360, PH = 150; const ML = 44, MR = PW - 24, MT = 12, MB = PH - 24; let yMin = Math.max( 0, Math.floor(Math.min(...validRates) * 20) / 20 - 0.02 ); let yMax = Math.min( 1, Math.ceil(Math.max(...validRates) * 20) / 20 + 0.02 ); yMin = Math.min(yMin, THRESHOLD - 0.05); yMax = Math.max(yMax, THRESHOLD + 0.02); const xScale = d3 .scalePoint() .domain(YLABELS) .range([ML, MR]) .padding(0.3); const yScale = d3.scaleLinear().domain([yMin, yMax]).range([MB, MT]); const selLabel = selectedYear.slice(4, 6) + "/" + selectedYear.slice(7, 9); const selIdx = YLABELS.indexOf(selLabel); const selRate = selIdx >= 0 ? rates[selIdx] : null; chartSvg = d3 .create("svg") .attr("width", PW) .attr("height", PH) .attr("viewBox", `0 0 ${PW} ${PH}`); const chartDefs = chartSvg.append("defs"); // Selected year highlight rect — grey if (selRate !== null) { const step = (MR - ML) / (YLABELS.length - 1); chartSvg .append("rect") .attr("x", xScale(selLabel) - step * 0.36) .attr("y", MT) .attr("width", step * 0.72) .attr("height", MB - MT) .attr("fill", "#888") .attr("opacity", 0.1) .attr("rx", 3); } // Grid + y labels yScale.ticks(4).forEach((t) => { chartSvg .append("line") .attr("x1", ML) .attr("x2", MR) .attr("y1", yScale(t)) .attr("y2", yScale(t)) .attr("stroke", "#ddd") .attr("stroke-width", 1); chartSvg .append("text") .attr("x", ML - 6) .attr("y", yScale(t) + 4) .attr("text-anchor", "end") .style("font", "10px sans-serif") .attr("fill", "#aaa") .text((t * 100).toFixed(0) + "%"); }); // Threshold reference line — annotation only const ty = yScale(THRESHOLD); chartSvg .append("line") .attr("x1", ML) .attr("x2", MR) .attr("y1", ty) .attr("y2", ty) .attr("stroke", "#555") .attr("stroke-width", 1.2) .attr("stroke-dasharray", "5,4"); chartSvg .append("text") .attr("x", MR + 4) .attr("y", ty + 4) .style("font", "10px sans-serif") .attr("fill", "#555") .text((THRESHOLD * 100).toFixed(0) + "%"); // X labels YLABELS.forEach((lbl, i) => { if (rates[i] === null) return; chartSvg .append("text") .attr("x", xScale(lbl)) .attr("y", MB + 14) .attr("text-anchor", "middle") .style("font", "10px sans-serif") .attr("fill", "#aaa") .text(lbl); }); // Line segments — continuous gradient, no categorical split const allPoints = YLABELS.map((lbl, i) => ({ lbl, rate: rates[i] })); const firstValid = allPoints.findIndex((d) => d.rate !== null); const lastValid = allPoints.reduce( (acc, d, i) => (d.rate !== null ? i : acc), -1 ); for (let i = firstValid; i < lastValid; i++) { const a = allPoints[i]; if (a.rate === null) continue; let nextIdx = -1; for (let j = i + 1; j < allPoints.length; j++) { if (allPoints[j].rate !== null) { nextIdx = j; break; } } if (nextIdx === -1) break; const b = allPoints[nextIdx]; const isGap = nextIdx > i + 1; if (isGap) { chartSvg .append("line") .attr("x1", xScale(a.lbl)) .attr("y1", yScale(a.rate)) .attr("x2", xScale(b.lbl)) .attr("y2", yScale(b.rate)) .attr("stroke", "#ccc") .attr("stroke-width", 1.5) .attr("stroke-dasharray", "4,3"); } else { const cA = sequentialScale(a.rate); const cB = sequentialScale(b.rate); if (cA === cB) { chartSvg .append("line") .attr("x1", xScale(a.lbl)) .attr("y1", yScale(a.rate)) .attr("x2", xScale(b.lbl)) .attr("y2", yScale(b.rate)) .attr("stroke", cA) .attr("stroke-width", 2); } else { const segId = "seg-" + i + "-" + Math.random().toString(36).slice(2, 6); const sg = chartDefs .append("linearGradient") .attr("id", segId) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", xScale(a.lbl)) .attr("x2", xScale(b.lbl)) .attr("y1", 0) .attr("y2", 0); sg.append("stop").attr("offset", "0%").attr("stop-color", cA); sg.append("stop").attr("offset", "100%").attr("stop-color", cB); chartSvg .append("line") .attr("x1", xScale(a.lbl)) .attr("y1", yScale(a.rate)) .attr("x2", xScale(b.lbl)) .attr("y2", yScale(b.rate)) .attr("stroke", `url(#${segId})`) .attr("stroke-width", 2); } } i = nextIdx - 1; } // Dots allPoints.forEach((d) => { if (d.rate === null) return; const dotColor = sequentialScale(d.rate); const isSel = d.lbl === selLabel; chartSvg .append("circle") .attr("cx", xScale(d.lbl)) .attr("cy", yScale(d.rate)) .attr("r", isSel ? 5 : 3.5) .attr("fill", dotColor) .attr("stroke", "white") .attr("stroke-width", isSel ? 2 : 1); }); } // Build panel HTML panel.html(""); panel .append("div") .style("display", "flex") .style("justify-content", "space-between") .style("align-items", "baseline") .style("margin-bottom", "8px").html(` ${ info.county } ${ info.rate != null ? (info.rate * 100).toFixed(1) + "%" : "No data" } `); panel.node().appendChild(chartSvg.node()); positionPanel(event); panel.style("display", "block"); } function clearTrendPanel() { panel.style("display", "none"); } // County fills svg .append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", getColor) .attr("stroke", (d) => (getColor(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, event); }) .on("mousemove", function (event) { positionPanel(event); }) .on("mouseout", function (event, d) { const col = getColor(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 = 400, LH = 14; const BOTTOM_PAD = 24; const defs = svg.append("defs"); { // Gradient stops placed at data percentiles so color steps map to // equal shares of counties, not equal % coverage intervals. // Percentile positions: p0=37%, p6=80%, p25=88%, p50=93%, p75=96%, p100=100% const DOMAIN_STOPS = [ scaleMin, THRESHOLD * 0.85, THRESHOLD * 0.93, THRESHOLD, THRESHOLD + (1 - THRESHOLD) * 0.5, 1.0 ]; const PCT_POSITIONS = DOMAIN_STOPS.map( (v) => (v - scaleMin) / (1.0 - scaleMin) ); const BOX_H = 60; // const BOX_Y = H - BOX_H - BOTTOM_PAD; const BOX_Y = 650; const lg = svg.append("g").attr("transform", `translate(16,${BOX_Y})`); lg.append("rect") .attr("width", LW + 90) .attr("height", BOX_H) .attr("fill", "white") .attr("stroke", "#ddd") .attr("rx", 5) .attr("filter", "drop-shadow(0 1px 3px rgba(0,0,0,.08))"); // Gradient bar — stops at percentile positions const grad = defs.append("linearGradient").attr("id", "seq-grad"); DOMAIN_STOPS.forEach((rate, i) => { grad .append("stop") .attr("offset", `${(PCT_POSITIONS[i] * 100).toFixed(1)}%`) .attr("stop-color", sequentialScale(rate)); }); lg.append("rect") .attr("x", 10) .attr("y", 14) .attr("width", LW) .attr("height", LH) .attr("rx", 3) .attr("fill", "url(#seq-grad)") .attr("stroke", "#eee") .attr("stroke-width", 0.5); // Tick marks at each domain stop DOMAIN_STOPS.forEach((rate, i) => { const x = 10 + PCT_POSITIONS[i] * LW; lg.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", 14 + LH) .attr("y2", 14 + LH + 4) .attr("stroke", "#bbb") .attr("stroke-width", 0.8); lg.append("text") .attr("x", x) .attr("y", 14 + LH + 14) .attr( "text-anchor", i === 0 ? "start" : i === DOMAIN_STOPS.length - 1 ? "end" : "middle" ) .style("font", "10px sans-serif") .attr("fill", "#999") .text((rate * 100).toFixed(0) + "%"); }); // Threshold marker — find its percentile position by interpolating let threshPct = null; for (let i = 1; i < DOMAIN_STOPS.length; i++) { if (THRESHOLD >= DOMAIN_STOPS[i - 1] && THRESHOLD <= DOMAIN_STOPS[i]) { const t = (THRESHOLD - DOMAIN_STOPS[i - 1]) / (DOMAIN_STOPS[i] - DOMAIN_STOPS[i - 1]); threshPct = PCT_POSITIONS[i - 1] + t * (PCT_POSITIONS[i] - PCT_POSITIONS[i - 1]); break; } } if (threshPct !== null) { const tx = 10 + threshPct * LW; lg.append("line") .attr("x1", tx) .attr("x2", tx) .attr("y1", 6) .attr("y2", 14 + LH) .attr("stroke", "#555") .attr("stroke-width", 1.2) .attr("stroke-dasharray", "3,2"); lg.append("text") .attr("x", tx) .attr("y", 5) .attr("text-anchor", "middle") .style("font", "9px sans-serif") .attr("fill", "#555") .text(`${(THRESHOLD * 100).toFixed(0)}% threshold`); } // No data swatch lg.append("rect") .attr("x", 10 + LW + 16) .attr("y", 14) .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", 25) .style("font", "11px sans-serif") .attr("fill", "#555") .text("No data"); } 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(); }4c:T641,// ── Export button ─────────────────────────────────────────── // Exports the map SVG (with current legend, colors, and threshold) as a // standalone .svg file. The floating trend panel (HTML div) is excluded // since it's not part of the SVG and only shows on hover. { const btn = html``; btn.onclick = () => { const el = document.getElementById("mmr-map"); if (!el) { alert("Run the map cell first."); return; } const isCov = !cell12 || cell12.activePanel !== "div"; const suffix = isCov ? `coverage_${selectedYear}` : `change_${selectedYear}`; const serializer = new XMLSerializer(); let svgStr = serializer.serializeToString(el); // Ensure xmlns is present so the file opens correctly outside the browser if (!svgStr.match(/xmlns=/)) { svgStr = svgStr.replace( "\n' + svgStr], { type: "image/svg+xml;charset=utf-8" } ); const a = Object.assign(document.createElement("a"), { href: URL.createObjectURL(blob), download: `mmr_${suffix}.svg` }); a.click(); URL.revokeObjectURL(a.href); }; return btn; }4d:[{"id":"03aab57504ed82c3c33764ad5f31013749ecabb9318d044f8b0780a61d5f6a0add5e1b338aeaaa34a004874afbcad1cef16fb0b08bc988b7c920bb981da09285","href":"https://static.observableusercontent.com/files/03aab57504ed82c3c33764ad5f31013749ecabb9318d044f8b0780a61d5f6a0add5e1b338aeaaa34a004874afbcad1cef16fb0b08bc988b7c920bb981da09285","name":"mmr_data_us_counties_v2.csv","type":"text/csv","lastModified":1782148657500.896,"size":176739}] 47:{"id":"6fa7f6dde64dd226","slug":null,"title":"JHU - Coverage by year","thumbnail":"ad1c0a64539618ce9890b44286ee2a3735e8b5aa544d58186b746f817a4554fd","access_level":"public","create_time":"$D2026-06-22T16:43:40.535Z","update_time":"$D2026-07-24T18:29:48.490Z","view_time":null,"first_public_time":"$D2026-07-17T18:59:00.788Z","has_unpublished_edits":null,"fork":false,"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":492,"publish_version":null,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"JHU - Coverage by year","cells":[{"id":0,"value":"# JHU - Coverage by year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"Click the color swatch to select a different color","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof THRESHOLD = {\n const el = html`

\n Threshold\n \n 95%\n

`;\n\n const input = el.querySelector(\"input\");\n const label = el.querySelector(\"#thresh-val\");\n\n input.addEventListener(\"input\", () => {\n label.textContent = (parseFloat(input.value) * 100).toFixed(0) + \"%\";\n el.value = parseFloat(input.value);\n el.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n el.value = 0.95;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"viewof scaleMin = {\n const el = html`

\n Scale minimum (Very low coverage\n)\n \n 37%\n

`;\n\n const input = el.querySelector(\"input\");\n const label = el.querySelector(\"#scalemin-val\");\n\n input.addEventListener(\"input\", () => {\n label.textContent = (parseFloat(input.value) * 100).toFixed(0) + \"%\";\n el.value = parseFloat(input.value);\n el.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n el.value = 0.37;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof selectedYear = Inputs.select(SCHOOL_YEARS, {\n label: \"Year\",\n value: \"SY2024_25\",\n format: (y) => y.replace(\"SY\", \"\").replace(\"_\", \"/\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"sequentialScale = {\n const d3 = await import(\"https://cdn.skypack.dev/d3@7\");\n const _t = THRESHOLD;\n const _m = scaleMin;\n const seq = (cell12 && cell12.seqColors) || [\"#f7b267\", \"#d94f00\", \"#7f0000\"];\n const above = (cell12 && cell12.aboveColors) || [\"#a8d4e0\", \"#3a9bc1\"];\n\n const below = [scaleMin, THRESHOLD * 0.85, THRESHOLD * 0.93, THRESHOLD];\n const aboveDomain = [THRESHOLD + (1 - THRESHOLD) * 0.5, 1.0];\n\n return d3\n .scaleLinear()\n .domain([...below, ...aboveDomain])\n .range([\n ...[...seq].reverse(), // dark red → light orange → near threshold\n \"#fdf3dc\", // cream at threshold\n ...above // light blue → dark blue\n ])\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":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":104,"value":"getColor = (d) => {\n const _t = THRESHOLD; // ← dependency tracking\n const _m = scaleMin;\n const id = String(d.id).padStart(5, \"0\");\n const info = countyLookup.get(id);\n if (!info) return \"#F9F9F9\";\n if (info.rate === null) return \"#F9F9F9\";\n return sequentialScale(info.rate);\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 prevYear = oldestYear !== selectedYear ? oldestYear : null;\n const prevRate = prevYear ? rates[prevYear] : null;\n\n const currentRate = rates[selectedYear];\n const currentIdx = SCHOOL_YEARS.indexOf(selectedYear);\n const change =\n currentRate !== null && prevRate !== null ? currentRate - prevRate : null;\n\n map.set(fips, {\n county: `${row.County}, ${row.State}`,\n rate: currentRate,\n change: change,\n prevRate: prevRate,\n prevYear: prevYear,\n allRates: rates\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":"$W4d","stdlib":"1"}} 48:"$47:body"