3e:null 3f:["$","title",null,{"children":"Are coastal counties more active and less obese? | Benji | Observable"}] 45:T60a9,{ // ---------- state ---------- // mapMode: what the map colors by ("activity" | "obesity" | "both"); measure: what the charts plot const state = {mapMode: "activity", measure: "activity", coast: "distOcean", bands: new Set(), valueBins: new Set(), incomes: new Set(), hover: null}; const labels = distanceBands.map(b => b.label); const offsets = [-9, 0, 9]; const fmtIncome = d3.format("$,"); const fmtPct = d3.format(".1f"); const figW = Math.min(width, 1000); // single column: map → scatter → band chart const mapW = figW; const sideW = figW; const withIncome = counties.filter(d => d.income != null); const coastWord = () => state.coast === "distOcean" ? "ocean coast" : "ocean or Great Lakes shore"; const toggle = (set, v) => { set.has(v) ? set.delete(v) : set.add(v); renderAll(); }; const both = () => state.mapMode === "both"; // ---------- single-measure color classes: blues for activity, reds for obesity ---------- const classCache = new Map(); function colorClasses() { if (!classCache.has(state.measure)) { const values = counties.map(d => d[state.measure]); const thresholds = d3.scaleQuantile().domain(values).range(d3.range(7)).quantiles(); const interp = state.measure === "activity" ? d3.interpolateBlues : d3.interpolateReds; const colors = d3.quantize(t => interp(0.12 + 0.88 * t), 7); // darker = more of the measure classCache.set(state.measure, {thresholds, colors, extent: d3.extent(values)}); } return classCache.get(state.measure); } const classOf = v => d3.bisectRight(colorClasses().thresholds, v); const classRange = i => { const {thresholds, extent} = colorClasses(); return [i === 0 ? extent[0] : thresholds[i - 1], i === thresholds.length ? extent[1] : thresholds[i]]; }; const classText = i => { const t = colorClasses().thresholds; return i === 0 ? `< ${fmtPct(t[0])}%` : i === t.length ? `≥ ${fmtPct(t[i - 1])}%` : `${fmtPct(t[i - 1])}–${fmtPct(t[i])}%`; }; // ---------- bivariate classes: activity tercile × obesity tercile (Stevens blue–red palette) ---------- const bivarColors = [ // [activity tercile][obesity tercile] ["#e8e8e8", "#e4acac", "#c85a5a"], // activity low ["#b0d5df", "#ad9ea5", "#985356"], // activity middle ["#64acbe", "#627f8c", "#574249"] // activity high ]; const lvl = ["low", "middle", "high"]; const tercileCuts = k => { const v = counties.map(d => d[k]).sort(d3.ascending); return [d3.quantileSorted(v, 1 / 3), d3.quantileSorted(v, 2 / 3)]; }; const actCuts = tercileCuts("activity"), obCuts = tercileCuts("obesity"); const tercile = (v, cuts) => v < cuts[0] ? 0 : v < cuts[1] ? 1 : 2; const cellOf = d => `${tercile(d.activity, actCuts)}|${tercile(d.obesity, obCuts)}`; const bivarFill = d => bivarColors[tercile(d.activity, actCuts)][tercile(d.obesity, obCuts)]; const tercileText = (cuts, i) => i === 0 ? `< ${fmtPct(cuts[0])}%` : i === 1 ? `${fmtPct(cuts[0])}–${fmtPct(cuts[1])}%` : `≥ ${fmtPct(cuts[1])}%`; // ---------- filters: OR within an attribute, AND across attributes ---------- const inBand = d => state.bands.size === 0 || state.bands.has(bandOf(d, state.coast)); const inValue = d => state.valueBins.size === 0 || state.valueBins.has(both() ? cellOf(d) : classOf(d[state.measure])); const inIncome = d => state.incomes.size === 0 || (d.income != null && state.incomes.has(incomeGroupOf(d))); const passes = d => inBand(d) && inValue(d) && inIncome(d); const anyFilter = () => state.bands.size + state.valueBins.size + state.incomes.size > 0; let bandPlot, scatterPlot; // ---------- selected vs. everyone else: medians for the comparison lines ---------- function comparison() { if (!anyFilter()) return null; const sel = counties.filter(passes).map(d => d[state.measure]); const other = counties.filter(d => !passes(d)).map(d => d[state.measure]); if (!sel.length || !other.length) return null; return {selMedian: d3.median(sel), selN: sel.length, otherMedian: d3.median(other), otherN: other.length}; } // ---------- band stats (unfiltered, so medians stay comparable) ---------- const statsCache = new Map(); function stats() { const key = `${state.measure}|${state.coast}`; if (!statsCache.has(key)) { const rows = []; for (const [band, byGroup] of d3.group(withIncome, d => bandOf(d, state.coast), incomeGroupOf)) { for (const [group, values] of byGroup) { const v = values.map(d => d[state.measure]).sort(d3.ascending); rows.push({band, group, n: v.length, q1: d3.quantileSorted(v, 0.25), median: d3.quantileSorted(v, 0.5), q3: d3.quantileSorted(v, 0.75)}); } } rows.sort((a, b) => d3.ascending(labels.indexOf(a.band), labels.indexOf(b.band))); const totals = labels.map(band => ({band, n: counties.filter(d => bandOf(d, state.coast) === band).length})); statsCache.set(key, {rows, totals}); } return statsCache.get(key); } const incomeColor = {type: "ordinal", domain: incomeGroups, range: incomeColors}; // horizontal stripes marking the selected value ranges (single-measure mode only) const valueStripes = () => both() ? [] : [...state.valueBins].map(i => { const [lo, hi] = classRange(i); return Plot.rect([0], {y1: () => lo, y2: () => hi, fill: colorClasses().colors[i], fillOpacity: 0.18, clip: true}); }); // ---------- clickable legends ---------- function valueLegend() { const {thresholds, colors} = colorClasses(); const w = Math.min(380, mapW), cw = w / colors.length, top = 18, h = 14; const svg = d3.create("svg").attr("width", w).attr("height", top + h + 16).attr("font-size", 10) .attr("font-family", "sans-serif").style("overflow", "visible").style("display", "block"); svg.append("text").attr("y", 11).attr("fill", "currentColor").attr("font-weight", "bold") .text(`${measureInfo[state.measure].label} · darker = ${state.measure === "activity" ? "more active" : "more obesity"} · click to filter`); colors.forEach((c, i) => { const on = state.valueBins.has(i), dim = state.valueBins.size > 0 && !on; svg.append("rect").attr("x", i * cw + 0.5).attr("y", top).attr("width", cw - 1).attr("height", h) .attr("fill", c).attr("opacity", dim ? 0.3 : 1) .attr("stroke", on ? "black" : "none").attr("stroke-width", 2).style("cursor", "pointer") .on("click", () => toggle(state.valueBins, i)) .append("title").text(`${classText(i)}: click to ${on ? "remove from" : "add to"} filter`); }); thresholds.forEach((t, i) => svg.append("text").attr("x", (i + 1) * cw).attr("y", top + h + 12) .attr("text-anchor", "middle").attr("fill", "currentColor").text(fmtPct(t))); return svg.node(); } function bivarLegend() { const s = 26, left = 22, top = 22, keyX = left + 3 * s + 22; const counts = d3.rollup(counties, v => v.length, cellOf); const svg = d3.create("svg").attr("width", keyX + 190).attr("height", top + 3 * s + 30).attr("font-size", 10) .attr("font-family", "sans-serif").style("overflow", "visible").style("display", "block"); svg.append("text").attr("y", 11).attr("fill", "currentColor").attr("font-weight", "bold") .text("Physical activity × obesity (county thirds) · click cells to filter"); for (let a = 0; a < 3; a++) for (let o = 0; o < 3; o++) { const key = `${a}|${o}`, on = state.valueBins.has(key), dim = state.valueBins.size > 0 && !on; svg.append("rect").attr("x", left + o * s).attr("y", top + (2 - a) * s).attr("width", s - 1).attr("height", s - 1) .attr("fill", bivarColors[a][o]).attr("opacity", dim ? 0.3 : 1) .attr("stroke", on ? "black" : "none").attr("stroke-width", 2).style("cursor", "pointer") .on("click", () => toggle(state.valueBins, key)) .append("title").text(`Activity ${lvl[a]} (${tercileText(actCuts, a)}) · Obesity ${lvl[o]} (${tercileText(obCuts, o)})\n` + `${(counts.get(key) || 0).toLocaleString()} counties · click to ${on ? "remove from" : "add to"} filter`); } svg.append("text").attr("x", left).attr("y", top + 3 * s + 13).attr("fill", "currentColor").text("More obesity →"); svg.append("text").attr("transform", `translate(${left - 6},${top + 3 * s}) rotate(-90)`).attr("fill", "currentColor").text("More active →"); [["#64acbe", "Active, not obese"], ["#c85a5a", "Obese, not active"], ["#574249", "High on both"], ["#e8e8e8", "Low on both"]] .forEach(([c, t], i) => { svg.append("rect").attr("x", keyX).attr("y", top + 4 + i * 18).attr("width", 11).attr("height", 11).attr("fill", c); svg.append("text").attr("x", keyX + 16).attr("y", top + 13 + i * 18).attr("fill", "currentColor").text(t); }); return svg.node(); } function incomeLegend() { const k = v => `$${Math.round(v / 1000)}k`; const ranges = [`< ${k(incomeCuts[0])}`, `${k(incomeCuts[0])}–${k(incomeCuts[1])}`, `≥ ${k(incomeCuts[1])}`]; const div = html`

`; incomeGroups.forEach((g, i) => { const on = state.incomes.has(g), dim = state.incomes.size > 0 && !on; const b = html``; b.onclick = () => toggle(state.incomes, g); div.append(b); }); return div; } // ---------- view 1: map ---------- function mapView() { const selected = countyShapes.features.filter(f => countyByFips.has(f.id) && passes(countyByFips.get(f.id))); const color = both() ? {type: "identity"} : {type: "threshold", domain: colorClasses().thresholds, range: colorClasses().colors}; const plot = Plot.plot({ width: mapW, projection: "albers-usa", color, marks: [ anyFilter() ? Plot.geo(countyShapes, {fill: "#ececec", stroke: "white", strokeWidth: 0.2}) : null, Plot.geo(selected, Plot.centroid({ fill: f => { const d = countyByFips.get(f.id); return both() ? bivarFill(d) : d[state.measure]; }, tip: true, title: f => { const d = countyByFips.get(f.id); return `${d.county}, ${d.state}\n` + `Physically active: ${d.activity.toFixed(1)}% Obesity: ${d.obesity.toFixed(1)}%\n` + `To ocean: ${Math.round(d.distOcean)} km To ocean/Great Lakes: ${Math.round(d.distCoastLakes)} km\n` + `Median household income: ${d.income == null ? "n/a" : fmtIncome(d.income)}`; } })), Plot.geo(stateMesh, {stroke: "white", strokeWidth: 0.75}) ] }); plot.addEventListener("input", () => { state.hover = plot.value ? countyByFips.get(plot.value.id) : null; drawHover(); }); return plot; } // ---------- view 2: every county (the test); distance ranges are clickable here ---------- function scatterView() { const info = measureInfo[state.measure]; const xMin = 12.5, xMax = 2000; const clamped = d => d[state.coast] < xMin; const xOf = d => Math.max(xMin, d[state.coast]); const bandX = {x1: d => Math.max(xMin, d.lo), x2: d => Math.min(xMax, d.hi)}; const dots = (data, fill, opacity) => [ Plot.dot(data.filter(d => !clamped(d)), {x: xOf, y: state.measure, r: 1.8, fill, fillOpacity: opacity}), Plot.dot(data.filter(clamped), {x: xOf, y: state.measure, r: 2.2, fill: "none", stroke: fill, strokeOpacity: Math.min(1, opacity + 0.3)}) ]; // Median lines: solid black = selected counties, dashed gray = all other counties const cmp = comparison(); const medians = cmp ? [{who: "Selected", m: cmp.selMedian, n: cmp.selN, stroke: "black", dash: null}, {who: "Others", m: cmp.otherMedian, n: cmp.otherN, stroke: "#666", dash: "6,4"}] : []; const medianMarks = medians.flatMap((d, i) => { const other = medians[1 - i].m; const above = d.who === "Selected" ? d.m >= other : d.m > other; // labels on opposite sides of their lines return [ Plot.ruleY([d.m], {stroke: d.stroke, strokeWidth: 2, strokeDasharray: d.dash}), Plot.text([d.m], {y: v => v, frameAnchor: "right", textAnchor: "end", dx: -2, dy: above ? -7 : 9, text: () => `${d.who} median ${fmtPct(d.m)}% (n=${d.n.toLocaleString()})`, fontSize: 10.5, fontWeight: "bold", fill: d.stroke, stroke: "white", strokeWidth: 3, paintOrder: "stroke"}) ]; }); const plot = Plot.plot({ width: sideW, height: 340, marginLeft: 44, marginBottom: 40, x: {type: "log", base: 2, domain: [xMin, xMax], ticks: [25, 50, 100, 200, 400, 800], tickFormat: d3.format(","), label: `Distance to ${coastWord()} (km, log scale; each band doubles) →`}, y: {grid: true, label: `↑ ${info.label}`}, color: incomeColor, marks: [ Plot.rect(distanceBands.filter(b => state.bands.has(b.label)), {...bandX, fill: "currentColor", fillOpacity: 0.07}), ...valueStripes(), Plot.ruleX(distanceBands.slice(1), {x: "lo", stroke: "#ccc", strokeDasharray: "2,3"}), ...dots(counties.filter(d => !passes(d) || d.income == null), "#bbb", 0.35), ...dots(withIncome.filter(passes), incomeGroupOf, anyFilter() ? 0.8 : 0.45), ...medianMarks, // invisible click targets on top: one per distance range Plot.rect(distanceBands, {...bandX, fill: "currentColor", fillOpacity: 0, className: "band-hit"}) ] }); d3.select(plot).selectAll(".band-hit rect").style("cursor", "pointer").each(function (_, i) { const label = labels[i]; d3.select(this).append("title").text(`${label} km: click to ${state.bands.has(label) ? "remove from" : "add to"} filter`); this.addEventListener("mouseenter", () => this.setAttribute("fill-opacity", 0.05)); this.addEventListener("mouseleave", () => this.setAttribute("fill-opacity", 0)); this.addEventListener("click", () => toggle(state.bands, label)); }); return plot; } // ---------- view 3: band chart (income context; shows selected bands but isn't clickable) ---------- function bandView() { const {rows, totals} = stats(); const info = measureInfo[state.measure]; const yDomain = d3.scaleLinear().domain(d3.extent(rows.flatMap(d => [d.q1, d.q3]))).nice().domain(); return Plot.plot({ width: sideW, height: 300, marginLeft: 44, marginBottom: 40, x: {type: "band", domain: labels, padding: 0.08, label: `Distance to ${coastWord()} (km) →`}, y: {domain: yDomain, grid: true, label: `↑ ${info.label}`}, color: incomeColor, marks: [ Plot.barY(distanceBands.filter(b => state.bands.has(b.label)), {x: "label", y1: yDomain[0], y2: yDomain[1], fill: "currentColor", fillOpacity: 0.07}), ...valueStripes(), ...incomeGroups.flatMap((g, i) => { const gd = rows.filter(d => d.group === g); const k = state.incomes.size === 0 || state.incomes.has(g) ? 1 : 0.15; return [ Plot.ruleX(gd, {x: "band", y1: "q1", y2: "q3", stroke: "group", strokeWidth: 2, strokeOpacity: 0.5 * k, dx: offsets[i]}), Plot.line(gd, {x: "band", y: "median", stroke: "group", strokeWidth: 1.5, strokeOpacity: k, dx: offsets[i]}), Plot.dot(gd, {x: "band", y: "median", fill: "group", fillOpacity: k, r: 3.5, dx: offsets[i], title: d => `${d.group}, ${d.band} km\nMedian ${d.median.toFixed(1)}% (IQR ${d.q1.toFixed(1)}–${d.q3.toFixed(1)})\n${d.n} counties`}) ]; }), Plot.text(totals, {x: "band", text: d => `n=${d.n}`, frameAnchor: "bottom", dy: -4, fontSize: 10, fill: "#666"}) ] }); } // ---------- hover marker ---------- function marker(svg, cx, cy, text) { const g = d3.select(svg).append("g").attr("class", "hover-mark").attr("pointer-events", "none"); const right = cx < +svg.getAttribute("width") * 0.6; g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 7).attr("fill", "none").attr("stroke", "black").attr("stroke-width", 2); g.append("text").attr("x", cx + (right ? 10 : -10)).attr("y", cy - 9).attr("text-anchor", right ? "start" : "end") .attr("font-size", 11).attr("font-weight", "bold").attr("paint-order", "stroke").attr("stroke", "white").attr("stroke-width", 3) .text(text); } function drawHover() { for (const svg of [bandPlot, scatterPlot]) d3.select(svg).selectAll(".hover-mark").remove(); const d = state.hover; if (!d) return; const v = d[state.measure]; const text = `${d.county}, ${d.state}: ${v.toFixed(1)}%`; if (d.income != null) { const xs = bandPlot.scale("x"), ys = bandPlot.scale("y"); const [y0, y1] = ys.domain; const cx = xs.apply(bandOf(d, state.coast)) + xs.bandwidth / 2 + offsets[incomeGroups.indexOf(incomeGroupOf(d))]; marker(bandPlot, cx, ys.apply(Math.max(y0, Math.min(y1, v))), text); } const xs = scatterPlot.scale("x"), ys = scatterPlot.scale("y"); marker(scatterPlot, xs.apply(Math.max(12.5, d[state.coast])), ys.apply(v), text); } // ---------- controls ---------- const mapInput = Inputs.radio( new Map([["Physical activity", "activity"], ["Obesity", "obesity"], ["Both (bivariate)", "both"]]), {label: "Map shows", value: "activity"}); const chartInput = Inputs.radio( new Map([["Physical activity", "activity"], ["Obesity", "obesity"]]), {label: "Charts show", value: "activity"}); const coastInput = Inputs.radio( new Map([["Ocean only", "distOcean"], ["Ocean + Great Lakes", "distCoastLakes"]]), {label: "Coast means", value: "distOcean"}); mapInput.addEventListener("input", () => { state.mapMode = mapInput.value; if (!both()) state.measure = state.mapMode; // charts follow the map unless it shows both else chartInput.value = state.measure; // charts keep the last single measure state.valueBins.clear(); renderAll(); }); chartInput.addEventListener("input", () => { state.measure = chartInput.value; renderAll(); }); coastInput.addEventListener("input", () => { state.coast = coastInput.value; renderAll(); }); const clearBtn = html``; clearBtn.onclick = () => { state.bands.clear(); state.valueBins.clear(); state.incomes.clear(); renderAll(); }; const mapLegend = html`

`, status = html``; const incomeLegendScatter = html`

`, incomeLegendBand = html`

`; const mapBox = html`

`, bandBox = html`

`, scatterBox = html`

`; const compareLine = html`

`; function renderAll() { state.hover = null; chartInput.style.display = both() ? "" : "none"; bandPlot = bandView(); scatterPlot = scatterView(); bandBox.replaceChildren(bandPlot); scatterBox.replaceChildren(scatterPlot); mapBox.replaceChildren(mapView()); mapLegend.replaceChildren(both() ? bivarLegend() : valueLegend()); incomeLegendScatter.replaceChildren(incomeLegend()); incomeLegendBand.replaceChildren(incomeLegend()); const n = counties.filter(passes).length; const parts = []; if (state.bands.size) parts.push(`${labels.filter(b => state.bands.has(b)).join(", ")} km from the ${coastWord()}`); if (state.valueBins.size) { parts.push(both() ? [...state.valueBins].sort().map(k => { const [a, o] = k.split("|"); return `activity ${lvl[a]} & obesity ${lvl[o]}`; }).join(" or ") : `${state.measure === "activity" ? "active" : "obesity"} ${[...state.valueBins].sort(d3.ascending).map(classText).join(" or ")}`); } if (state.incomes.size) parts.push(incomeGroups.filter(g => state.incomes.has(g)).map(g => g.split(" ")[0].toLowerCase()).join(" or ") + " income"); status.textContent = anyFilter() ? `Highlighted: ${n.toLocaleString()} counties · ${parts.join(" · ")}` : `Showing all ${n.toLocaleString()} counties. Click legend colors, income groups, or distance ranges on the scatter below to filter; several at once is OK.`; const cmp = comparison(); if (cmp) { const diff = cmp.selMedian - cmp.otherMedian; const healthier = state.measure === "activity" ? diff > 0 : diff < 0; compareLine.textContent = `${measureInfo[state.measure].title}: selected counties' median is ${fmtPct(Math.abs(diff))} points ` + `${diff >= 0 ? "higher" : "lower"} than all other counties (${fmtPct(cmp.selMedian)}% vs. ${fmtPct(cmp.otherMedian)}%), ` + `${Math.abs(diff) < 0.05 ? "no difference" : healthier ? "healthier" : "less healthy"}.`; } else { compareLine.textContent = "Click distance ranges on the chart below (for example, 0–25 and 25–50 km) to compare those counties' median with all other counties."; } clearBtn.style.display = anyFilter() ? "inline-block" : "none"; } renderAll(); return html`

Hypothesis: US counties closer to the coast have higher rates of leisure-time physical activity and lower obesity.

${mapInput}${chartInput}${coastInput}

Where: every county, colored by the selected measure

${status}${clearBtn}

${mapLegend} ${mapBox}

Test: highlighted counties vs. all other counties

${compareLine}

Each dot is a county. Click a distance range (between dashed lines) to filter; click it again to remove it. Solid line = median of highlighted counties; dashed line = median of all other counties. Hollow dots at the left edge are counties closer than 12.5 km. Hover a county on the map to find it here.

${incomeLegendScatter} ${scatterBox}

Context: the role of income

Median county by distance band within each third of median household income. Dot = median county, bar = middle 50% of counties, n = counties in band. Shaded columns = distance ranges selected on the scatter above.

${incomeLegendBand} ${bandBox}

Sources: CDC PLACES 2024 release (county model-based estimates from BRFSS 2022, age-adjusted); U.S. Census SAIPE 2023 median household income; U.S. Census TIGER/cartographic boundary files 2024 (county and state boundaries, coastline). Method: distance is the great-circle distance from each county's internal point to the nearest TIGER coastline vertex. "Physically active" = 100% minus the share reporting no leisure-time physical activity. Single-measure map colors are 7 quantile classes (about 450 counties each); the bivariate map uses thirds of each measure (Stevens blue–red palette). Caveats: PLACES estimates are modeled and partly smoothed across neighboring counties and states; results describe counties, not individuals (ecological fallacy); income is only one of several confounders (urbanicity, age, climate).

`; }46:T414,{ const common = { width: 480, height: 360, marginLeft: 50, x: {label: "Distance from county centroid to ocean coast (km) →", grid: true}, y: {grid: true} }; const activityPlot = Plot.plot({ ...common, title: "Physical activity vs. distance to coast", y: {...common.y, label: "↑ Adults physically active (%)"}, marks: [ Plot.dot(counties, {x: "distOcean", y: "activity", r: 2, fill: "steelblue", fillOpacity: 0.4}), Plot.linearRegressionY(counties, {x: "distOcean", y: "activity", stroke: "black"}) ] }); const obesityPlot = Plot.plot({ ...common, title: "Obesity vs. distance to coast", y: {...common.y, label: "↑ Adults with obesity (%)"}, marks: [ Plot.dot(counties, {x: "distOcean", y: "obesity", r: 2, fill: "firebrick", fillOpacity: 0.4}), Plot.linearRegressionY(counties, {x: "distOcean", y: "obesity", stroke: "black"}) ] }); return html`

${activityPlot}${obesityPlot}

`; }47:T542,{ // Log-spaced bins so the trend line has equal resolution near the coast and inland const thresholds = d3.range(-0.4, 3.4, 0.2).map(e => 10 ** e); const common = { width: 480, height: 380, marginLeft: 50, x: { type: "log", domain: [0.5, 2000], label: "Distance from county centroid to ocean coast (km, log scale) →", grid: true }, y: {grid: true}, color: { type: "quantile", n: 5, scheme: "viridis", label: "Median household income (quintiles)", tickFormat: d => `$${Math.round(d / 1000)}k` } }; const panel = (y, label, title) => Plot.plot({ ...common, title, y: {...common.y, label}, marks: [ Plot.dot(counties.filter(d => d.income != null), { x: "distOcean", y, r: 2, fill: "income", fillOpacity: 0.6 }), Plot.lineY(counties, Plot.binX({y: "median"}, { x: "distOcean", y, thresholds, stroke: "black", strokeWidth: 2.5 })) ] }); return html`

${Plot.legend({color: common.color, width: 420})}

${panel("activity", "↑ Adults physically active (%)", "Physical activity vs. distance to coast")} ${panel("obesity", "↑ Adults with obesity (%)", "Obesity vs. distance to coast")}

`; }48:T6e7,{ const offsets = [-9, 0, 9]; // side-by-side so the three groups don't overlap const color = { domain: incomeGroups, range: [d3.interpolateViridis(0.05), d3.interpolateViridis(0.45), d3.interpolateViridis(0.78)], legend: true }; const panel = (measure, label, title) => { const data = bandStats.filter(d => d.measure === measure); return Plot.plot({ width: 480, height: 380, marginLeft: 50, title, x: {type: "point", domain: distanceBands.map(b => b.label), padding: 0.5, label: "Distance from county centroid to ocean coast (km) →"}, y: {grid: true, label}, color, marks: incomeGroups.flatMap((g, i) => { const gd = data.filter(d => d.group === g); return [ Plot.ruleX(gd, {x: "band", y1: "q1", y2: "q3", stroke: "group", strokeWidth: 2, strokeOpacity: 0.5, dx: offsets[i]}), Plot.line(gd, {x: "band", y: "median", stroke: "group", strokeWidth: 1.5, dx: offsets[i]}), Plot.dot(gd, {x: "band", y: "median", fill: "group", r: 3.5, dx: offsets[i], title: d => `${d.group}, ${d.band} km\nMedian ${d.median.toFixed(1)}% (IQR ${d.q1.toFixed(1)}–${d.q3.toFixed(1)})\n${d.n} counties`}) ]; }) }); }; return html`

${Plot.legend({color})}

${panel("activity", "↑ Adults physically active (%)", "Physical activity by distance band")} ${panel("obesity", "↑ Adults with obesity (%)", "Obesity by distance band")}

Dot = median county; vertical bar = middle 50% of counties (IQR). Income terciles from Census SAIPE 2023 median household income.

`; }49:Ta26,viewof selectedBand = { const {rows, totals} = linkedStats; const info = measureInfo[measure]; const labels = distanceBands.map(b => b.label); const yDomain = d3.scaleLinear().domain(d3.extent(rows.flatMap(d => [d.q1, d.q3]))).nice().domain(); const offsets = [-9, 0, 9]; const coastWord = coastDef === "distOcean" ? "ocean coast" : "ocean or Great Lakes shore"; const plot = Plot.plot({ width: 560, height: 420, marginLeft: 50, marginBottom: 45, title: `${info.title} by distance to coast, within income thirds`, subtitle: "Click a distance band to highlight its counties on the map. Click again to clear.", x: {type: "band", domain: labels, padding: 0.08, label: `Distance from county centroid to ${coastWord} (km) →`}, y: {domain: yDomain, grid: true, label: `↑ ${info.label}`}, color: {domain: incomeGroups, range: incomeColors, legend: true}, marks: [ // clickable background column for each band Plot.barY(distanceBands, {x: "label", y1: yDomain[0], y2: yDomain[1], fill: "currentColor", fillOpacity: 0, className: "band-bg"}), ...incomeGroups.flatMap((g, i) => { const gd = rows.filter(d => d.group === g); return [ Plot.ruleX(gd, {x: "band", y1: "q1", y2: "q3", stroke: "group", strokeWidth: 2, strokeOpacity: 0.5, dx: offsets[i]}), Plot.line(gd, {x: "band", y: "median", stroke: "group", strokeWidth: 1.5, dx: offsets[i]}), Plot.dot(gd, {x: "band", y: "median", fill: "group", r: 3.5, dx: offsets[i], title: d => `${d.group}, ${d.band} km\nMedian ${d.median.toFixed(1)}% (IQR ${d.q1.toFixed(1)}–${d.q3.toFixed(1)})\n${d.n} counties`}) ]; }), // county count per band, so thin bands are visible without hovering Plot.text(totals, {x: "band", text: d => `n=${d.n}`, frameAnchor: "bottom", dy: -4, fontSize: 10, fill: "#666"}) ] }); const wrapper = html`

${plot}

`; wrapper.value = null; const bgRects = d3.select(plot).selectAll(".band-bg rect"); const paint = () => bgRects.attr("fill-opacity", (_, i) => labels[i] === wrapper.value ? 0.1 : 0); bgRects .style("cursor", "pointer") .on("mouseenter", function (_, i) { if (labels[i] !== wrapper.value) d3.select(this).attr("fill-opacity", 0.04); }) .on("mouseleave", paint) .each(function (_, i) { this.addEventListener("click", () => { wrapper.value = wrapper.value === labels[i] ? null : labels[i]; paint(); wrapper.dispatchEvent(new Event("input", {bubbles: true})); }); }); return wrapper; }4a:T7b1,{ const info = measureInfo[measure]; const inBand = d => selectedBand == null || bandOf(d, coastDef) === selectedBand; const selected = countyShapes.features.filter(f => countyByFips.has(f.id) && inBand(countyByFips.get(f.id))); const coastWord = coastDef === "distOcean" ? "the ocean" : "the ocean or Great Lakes"; const fmtIncome = d3.format("$,"); return Plot.plot({ width: 975, projection: "albers-usa", title: `${info.title} by county`, subtitle: selectedBand == null ? "All counties shown. Click a distance band in the chart above to filter." : `Highlighted: ${selected.length} counties ${selectedBand} km from ${coastWord}`, caption: "Sources: CDC PLACES 2024 release (BRFSS 2022, age-adjusted); Census SAIPE 2023 median household income; Census TIGER 2024 boundaries and coastline.", color: { type: "quantile", n: 7, domain: counties.map(d => d[measure]), // fixed domain: colors don't shift when filtering range: d3.quantize(t => info.interpolate(0.2 + 0.8 * t), 7), label: info.label, tickFormat: ".0f", legend: true }, marks: [ // counties outside the selected band: neutral, no tooltip selectedBand == null ? null : Plot.geo(countyShapes, {fill: "#eeeeee", stroke: "white", strokeWidth: 0.2}), Plot.geo(selected, Plot.centroid({ fill: f => countyByFips.get(f.id)[measure], tip: true, title: f => { const d = countyByFips.get(f.id); return `${d.county}, ${d.state}\n` + `Physically active: ${d.activity.toFixed(1)}% Obesity: ${d.obesity.toFixed(1)}%\n` + `To ocean: ${Math.round(d.distOcean)} km To ocean/Great Lakes: ${Math.round(d.distCoastLakes)} km\n` + `Median household income: ${d.income == null ? "n/a" : fmtIncome(d.income)}`; } })), Plot.geo(stateMesh, {stroke: "white", strokeWidth: 0.75}) ] }); }4b:T5018,{ // ---------- state: each filter is a set; empty set = no filter on that attribute ---------- const state = {measure: "activity", coast: "distOcean", bands: new Set(), valueBins: new Set(), incomes: new Set(), hover: null}; const labels = distanceBands.map(b => b.label); const offsets = [-9, 0, 9]; const fmtIncome = d3.format("$,"); const fmtPct = d3.format(".1f"); const figW = Math.min(width, 1000); // single column: map → scatter → band chart const mapW = figW; const sideW = figW; const withIncome = counties.filter(d => d.income != null); const coastWord = () => state.coast === "distOcean" ? "ocean coast" : "ocean or Great Lakes shore"; const toggle = (set, v) => { set.has(v) ? set.delete(v) : set.add(v); renderAll(); }; // ---------- color classes: one set of breaks drives both the map and its legend ---------- const classCache = new Map(); function colorClasses() { if (!classCache.has(state.measure)) { const values = counties.map(d => d[state.measure]); const thresholds = d3.scaleQuantile().domain(values).range(d3.range(7)).quantiles(); const colors = d3.quantize(t => d3.interpolateReds(0.15 + 0.85 * t), 7); if (state.measure === "activity") colors.reverse(); // darker always = less healthy classCache.set(state.measure, {thresholds, colors, extent: d3.extent(values)}); } return classCache.get(state.measure); } const classOf = v => d3.bisectRight(colorClasses().thresholds, v); const classRange = i => { const {thresholds, extent} = colorClasses(); return [i === 0 ? extent[0] : thresholds[i - 1], i === thresholds.length ? extent[1] : thresholds[i]]; }; const classText = i => { const t = colorClasses().thresholds; return i === 0 ? `< ${fmtPct(t[0])}%` : i === t.length ? `≥ ${fmtPct(t[i - 1])}%` : `${fmtPct(t[i - 1])}–${fmtPct(t[i])}%`; }; // ---------- filters: OR within an attribute, AND across attributes ---------- const inBand = d => state.bands.size === 0 || state.bands.has(bandOf(d, state.coast)); const inValue = d => state.valueBins.size === 0 || state.valueBins.has(classOf(d[state.measure])); const inIncome = d => state.incomes.size === 0 || (d.income != null && state.incomes.has(incomeGroupOf(d))); const passes = d => inBand(d) && inValue(d) && inIncome(d); const anyFilter = () => state.bands.size + state.valueBins.size + state.incomes.size > 0; let bandPlot, scatterPlot; // ---------- selected vs. everyone else: medians for the comparison lines ---------- function comparison() { if (!anyFilter()) return null; const sel = counties.filter(passes).map(d => d[state.measure]); const other = counties.filter(d => !passes(d)).map(d => d[state.measure]); if (!sel.length || !other.length) return null; return {selMedian: d3.median(sel), selN: sel.length, otherMedian: d3.median(other), otherN: other.length}; } // ---------- band stats (unfiltered, so medians stay comparable) ---------- const statsCache = new Map(); function stats() { const key = `${state.measure}|${state.coast}`; if (!statsCache.has(key)) { const rows = []; for (const [band, byGroup] of d3.group(withIncome, d => bandOf(d, state.coast), incomeGroupOf)) { for (const [group, values] of byGroup) { const v = values.map(d => d[state.measure]).sort(d3.ascending); rows.push({band, group, n: v.length, q1: d3.quantileSorted(v, 0.25), median: d3.quantileSorted(v, 0.5), q3: d3.quantileSorted(v, 0.75)}); } } rows.sort((a, b) => d3.ascending(labels.indexOf(a.band), labels.indexOf(b.band))); const totals = labels.map(band => ({band, n: counties.filter(d => bandOf(d, state.coast) === band).length})); statsCache.set(key, {rows, totals}); } return statsCache.get(key); } const incomeColor = {type: "ordinal", domain: incomeGroups, range: incomeColors}; // horizontal stripes marking the selected value ranges (band chart + scatter share the y measure) const valueStripes = () => [...state.valueBins].map(i => { const [lo, hi] = classRange(i); return Plot.rect([0], {y1: () => lo, y2: () => hi, fill: colorClasses().colors[i], fillOpacity: 0.18, clip: true}); }); // ---------- clickable legends ---------- function valueLegend() { const {thresholds, colors} = colorClasses(); const w = Math.min(380, mapW), cw = w / colors.length, top = 18, h = 14; const svg = d3.create("svg").attr("width", w).attr("height", top + h + 16).attr("font-size", 10) .attr("font-family", "sans-serif").style("overflow", "visible").style("display", "block"); svg.append("text").attr("y", 11).attr("fill", "currentColor").attr("font-weight", "bold") .text(`${measureInfo[state.measure].label} · darker = less healthy · click to filter`); colors.forEach((c, i) => { const on = state.valueBins.has(i), dim = state.valueBins.size > 0 && !on; svg.append("rect").attr("x", i * cw + 0.5).attr("y", top).attr("width", cw - 1).attr("height", h) .attr("fill", c).attr("opacity", dim ? 0.3 : 1) .attr("stroke", on ? "black" : "none").attr("stroke-width", 2).style("cursor", "pointer") .on("click", () => toggle(state.valueBins, i)) .append("title").text(`${classText(i)}: click to ${on ? "remove from" : "add to"} filter`); }); thresholds.forEach((t, i) => svg.append("text").attr("x", (i + 1) * cw).attr("y", top + h + 12) .attr("text-anchor", "middle").attr("fill", "currentColor").text(fmtPct(t))); return svg.node(); } function incomeLegend() { const k = v => `$${Math.round(v / 1000)}k`; const ranges = [`< ${k(incomeCuts[0])}`, `${k(incomeCuts[0])}–${k(incomeCuts[1])}`, `≥ ${k(incomeCuts[1])}`]; const div = html`

`; incomeGroups.forEach((g, i) => { const on = state.incomes.has(g), dim = state.incomes.size > 0 && !on; const b = html``; b.onclick = () => toggle(state.incomes, g); div.append(b); }); return div; } // ---------- view 1: map ---------- function mapView() { const {thresholds, colors} = colorClasses(); const selected = countyShapes.features.filter(f => countyByFips.has(f.id) && passes(countyByFips.get(f.id))); const plot = Plot.plot({ width: mapW, projection: "albers-usa", color: {type: "threshold", domain: thresholds, range: colors}, marks: [ anyFilter() ? Plot.geo(countyShapes, {fill: "#ececec", stroke: "white", strokeWidth: 0.2}) : null, Plot.geo(selected, Plot.centroid({ fill: f => countyByFips.get(f.id)[state.measure], tip: true, title: f => { const d = countyByFips.get(f.id); return `${d.county}, ${d.state}\n` + `Physically active: ${d.activity.toFixed(1)}% Obesity: ${d.obesity.toFixed(1)}%\n` + `To ocean: ${Math.round(d.distOcean)} km To ocean/Great Lakes: ${Math.round(d.distCoastLakes)} km\n` + `Median household income: ${d.income == null ? "n/a" : fmtIncome(d.income)}`; } })), Plot.geo(stateMesh, {stroke: "white", strokeWidth: 0.75}) ] }); plot.addEventListener("input", () => { state.hover = plot.value ? countyByFips.get(plot.value.id) : null; drawHover(); }); return plot; } // ---------- view 2: every county (the test); distance ranges are clickable here ---------- function scatterView() { const info = measureInfo[state.measure]; const xMin = 12.5, xMax = 2000; const clamped = d => d[state.coast] < xMin; const xOf = d => Math.max(xMin, d[state.coast]); const bandX = {x1: d => Math.max(xMin, d.lo), x2: d => Math.min(xMax, d.hi)}; const dots = (data, fill, opacity) => [ Plot.dot(data.filter(d => !clamped(d)), {x: xOf, y: state.measure, r: 1.8, fill, fillOpacity: opacity}), Plot.dot(data.filter(clamped), {x: xOf, y: state.measure, r: 2.2, fill: "none", stroke: fill, strokeOpacity: Math.min(1, opacity + 0.3)}) ]; // Median lines: solid black = selected counties, dashed gray = all other counties const cmp = comparison(); const medians = cmp ? [{who: "Selected", m: cmp.selMedian, n: cmp.selN, stroke: "black", dash: null}, {who: "Others", m: cmp.otherMedian, n: cmp.otherN, stroke: "#666", dash: "6,4"}] : []; const medianMarks = medians.flatMap((d, i) => { const other = medians[1 - i].m; const above = d.who === "Selected" ? d.m >= other : d.m > other; // labels on opposite sides of their lines return [ Plot.ruleY([d.m], {stroke: d.stroke, strokeWidth: 2, strokeDasharray: d.dash}), Plot.text([d.m], {y: v => v, frameAnchor: "right", textAnchor: "end", dx: -2, dy: above ? -7 : 9, text: () => `${d.who} median ${fmtPct(d.m)}% (n=${d.n.toLocaleString()})`, fontSize: 10.5, fontWeight: "bold", fill: d.stroke, stroke: "white", strokeWidth: 3, paintOrder: "stroke"}) ]; }); const plot = Plot.plot({ width: sideW, height: 340, marginLeft: 44, marginBottom: 40, x: {type: "log", base: 2, domain: [xMin, xMax], ticks: [25, 50, 100, 200, 400, 800], tickFormat: d3.format(","), label: `Distance to ${coastWord()} (km, log scale; each band doubles) →`}, y: {grid: true, label: `↑ ${info.label}`}, color: incomeColor, marks: [ Plot.rect(distanceBands.filter(b => state.bands.has(b.label)), {...bandX, fill: "currentColor", fillOpacity: 0.07}), ...valueStripes(), Plot.ruleX(distanceBands.slice(1), {x: "lo", stroke: "#ccc", strokeDasharray: "2,3"}), ...dots(counties.filter(d => !passes(d) || d.income == null), "#bbb", 0.35), ...dots(withIncome.filter(passes), incomeGroupOf, anyFilter() ? 0.8 : 0.45), ...medianMarks, // invisible click targets on top: one per distance range Plot.rect(distanceBands, {...bandX, fill: "currentColor", fillOpacity: 0, className: "band-hit"}) ] }); d3.select(plot).selectAll(".band-hit rect").style("cursor", "pointer").each(function (_, i) { const label = labels[i]; d3.select(this).append("title").text(`${label} km: click to ${state.bands.has(label) ? "remove from" : "add to"} filter`); this.addEventListener("mouseenter", () => this.setAttribute("fill-opacity", 0.05)); this.addEventListener("mouseleave", () => this.setAttribute("fill-opacity", 0)); this.addEventListener("click", () => toggle(state.bands, label)); }); return plot; } // ---------- view 3: band chart (income context; shows selected bands but isn't clickable) ---------- function bandView() { const {rows, totals} = stats(); const info = measureInfo[state.measure]; const yDomain = d3.scaleLinear().domain(d3.extent(rows.flatMap(d => [d.q1, d.q3]))).nice().domain(); return Plot.plot({ width: sideW, height: 300, marginLeft: 44, marginBottom: 40, x: {type: "band", domain: labels, padding: 0.08, label: `Distance to ${coastWord()} (km) →`}, y: {domain: yDomain, grid: true, label: `↑ ${info.label}`}, color: incomeColor, marks: [ Plot.barY(distanceBands.filter(b => state.bands.has(b.label)), {x: "label", y1: yDomain[0], y2: yDomain[1], fill: "currentColor", fillOpacity: 0.07}), ...valueStripes(), ...incomeGroups.flatMap((g, i) => { const gd = rows.filter(d => d.group === g); const k = state.incomes.size === 0 || state.incomes.has(g) ? 1 : 0.15; return [ Plot.ruleX(gd, {x: "band", y1: "q1", y2: "q3", stroke: "group", strokeWidth: 2, strokeOpacity: 0.5 * k, dx: offsets[i]}), Plot.line(gd, {x: "band", y: "median", stroke: "group", strokeWidth: 1.5, strokeOpacity: k, dx: offsets[i]}), Plot.dot(gd, {x: "band", y: "median", fill: "group", fillOpacity: k, r: 3.5, dx: offsets[i], title: d => `${d.group}, ${d.band} km\nMedian ${d.median.toFixed(1)}% (IQR ${d.q1.toFixed(1)}–${d.q3.toFixed(1)})\n${d.n} counties`}) ]; }), Plot.text(totals, {x: "band", text: d => `n=${d.n}`, frameAnchor: "bottom", dy: -4, fontSize: 10, fill: "#666"}) ] }); } // ---------- hover marker ---------- function marker(svg, cx, cy, text) { const g = d3.select(svg).append("g").attr("class", "hover-mark").attr("pointer-events", "none"); const right = cx < +svg.getAttribute("width") * 0.6; g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 7).attr("fill", "none").attr("stroke", "black").attr("stroke-width", 2); g.append("text").attr("x", cx + (right ? 10 : -10)).attr("y", cy - 9).attr("text-anchor", right ? "start" : "end") .attr("font-size", 11).attr("font-weight", "bold").attr("paint-order", "stroke").attr("stroke", "white").attr("stroke-width", 3) .text(text); } function drawHover() { for (const svg of [bandPlot, scatterPlot]) d3.select(svg).selectAll(".hover-mark").remove(); const d = state.hover; if (!d) return; const v = d[state.measure]; const text = `${d.county}, ${d.state}: ${v.toFixed(1)}%`; if (d.income != null) { const xs = bandPlot.scale("x"), ys = bandPlot.scale("y"); const [y0, y1] = ys.domain; const cx = xs.apply(bandOf(d, state.coast)) + xs.bandwidth / 2 + offsets[incomeGroups.indexOf(incomeGroupOf(d))]; marker(bandPlot, cx, ys.apply(Math.max(y0, Math.min(y1, v))), text); } const xs = scatterPlot.scale("x"), ys = scatterPlot.scale("y"); marker(scatterPlot, xs.apply(Math.max(12.5, d[state.coast])), ys.apply(v), text); } // ---------- layout ---------- const measureInput = Inputs.radio(new Map([["Physical activity", "activity"], ["Obesity", "obesity"]]), {label: "Measure", value: "activity"}); const coastInput = Inputs.radio(new Map([["Ocean only", "distOcean"], ["Ocean + Great Lakes", "distCoastLakes"]]), {label: "Coast means", value: "distOcean"}); measureInput.addEventListener("input", () => { state.measure = measureInput.value; state.valueBins.clear(); renderAll(); }); coastInput.addEventListener("input", () => { state.coast = coastInput.value; renderAll(); }); const clearBtn = html``; clearBtn.onclick = () => { state.bands.clear(); state.valueBins.clear(); state.incomes.clear(); renderAll(); }; const mapLegend = html`

`, status = html``; const incomeLegendScatter = html`

`, incomeLegendBand = html`

`; const mapBox = html`

`, bandBox = html`

`, scatterBox = html`

`; const compareLine = html`

`; function renderAll() { state.hover = null; bandPlot = bandView(); scatterPlot = scatterView(); bandBox.replaceChildren(bandPlot); scatterBox.replaceChildren(scatterPlot); mapBox.replaceChildren(mapView()); mapLegend.replaceChildren(valueLegend()); incomeLegendScatter.replaceChildren(incomeLegend()); incomeLegendBand.replaceChildren(incomeLegend()); const n = counties.filter(passes).length; const parts = []; if (state.bands.size) parts.push(`${labels.filter(b => state.bands.has(b)).join(", ")} km from the ${coastWord()}`); if (state.valueBins.size) parts.push(`${state.measure === "activity" ? "active" : "obesity"} ${[...state.valueBins].sort(d3.ascending).map(classText).join(" or ")}`); if (state.incomes.size) parts.push(incomeGroups.filter(g => state.incomes.has(g)).map(g => g.split(" ")[0].toLowerCase()).join(" or ") + " income"); status.textContent = anyFilter() ? `Highlighted: ${n.toLocaleString()} counties · ${parts.join(" · ")}` : `Showing all ${n.toLocaleString()} counties. Click legend colors, income groups, or distance ranges on the scatter below to filter; several at once is OK.`; const cmp = comparison(); if (cmp) { const diff = cmp.selMedian - cmp.otherMedian; const healthier = state.measure === "activity" ? diff > 0 : diff < 0; compareLine.textContent = `Selected counties' median is ${fmtPct(Math.abs(diff))} points ${diff >= 0 ? "higher" : "lower"} than all other counties ` + `(${fmtPct(cmp.selMedian)}% vs. ${fmtPct(cmp.otherMedian)}%), ${Math.abs(diff) < 0.05 ? "no difference" : healthier ? "healthier" : "less healthy"}.`; } else { compareLine.textContent = "Click distance ranges on the chart below (for example, 0–25 and 25–50 km) to compare those counties' median with all other counties."; } clearBtn.style.display = anyFilter() ? "inline-block" : "none"; } renderAll(); return html`

Are coastal counties more active and less obese?

Hypothesis: US counties closer to the coast have higher rates of leisure-time physical activity and lower obesity.

${measureInput}${coastInput}

Where: every county, colored by the selected measure

${status}${clearBtn}

${mapLegend} ${mapBox}

Test: highlighted counties vs. all other counties

${compareLine}

${incomeLegendScatter} ${scatterBox}

Context: the role of income

${incomeLegendBand} ${bandBox}

Sources: CDC PLACES 2024 release (county model-based estimates from BRFSS 2022, age-adjusted); U.S. Census SAIPE 2023 median household income; U.S. Census TIGER/cartographic boundary files 2024 (county and state boundaries, coastline). Method: distance is the great-circle distance from each county's internal point to the nearest TIGER coastline vertex. "Physically active" = 100% minus the share reporting no leisure-time physical activity. Map colors are 7 quantile classes (about 450 counties each). Caveats: PLACES estimates are modeled and partly smoothed across neighboring counties and states; results describe counties, not individuals (ecological fallacy); income is only one of several confounders (urbanicity, age, climate).

`; }4c:T88c,I am incredibly happy with the final revision of this project. Taking in all of the things I learned along the way, I was able to put everything together in an interactive format that allows the reader to answer many questions, not just the ones relevant to my hypothesis. I did not include every revision of this final graphic as it would have been quite redundant and excessive; most of the revisions involved small fixes: rearranging the visuals, correcting labels and descriptions, and adding sources/methods/caveats. With a cell this large, seeing the changes within each block of code would have been tremendously difficult anyway. To remedy this, I simply made my revisions to the final visual within the existing cell. The steps I took to get here are still apparent, as many of the elements in my final visual come from previous visuals. One thing to be aware of when looking at these visuals is black and white crush. If your display crushes the ends of the grayscale spectrum into clusters, some elements of the visuals will not appear (light against light, dark against dark) such as gridlines, or unfortunately, the deselected counties on the choropleth. ## Conclusion to hypothesis I was pleasantly surprised to see that my hypothesis held up, both in terms of obesity and physical activity. Initially, the data did not seem to point to any clear conclusions, leading to a bit of disappointment. Once I dug a bit further, however, I came to find that my hypothesis was strikingly true, beyond mere chance (first seen in the initial bivariate scatters). A permutation test was done outside of this notebook to ensure that my results, at least for the counties within 50km of the coast, were indeed statistically significant; and they were. Of course, there is the caveat of income. Regardless of where you live, higher incomes nearly always correlate with higher activity and lower obesity. It also happens to be that coastal counties tend to have higher incomes. While my hypothesis is merely testing for correlation, not causation, this is definitely something to consider when making conclusions about the data, among many other confounders such as age, climate, etc.4d:[{"id":"7b1c776692f43cf1c9b5171567eaa3d7aebd6ff1cec78e5beacd0820abe1aab7827153dbcd2d055cd1843b4fb2890f49f460692e234c5046195771bf3688937c","href":"https://static.observableusercontent.com/files/7b1c776692f43cf1c9b5171567eaa3d7aebd6ff1cec78e5beacd0820abe1aab7827153dbcd2d055cd1843b4fb2890f49f460692e234c5046195771bf3688937c","name":"county_analysis.csv","type":"text/csv","lastModified":1790464749787,"size":362744},{"id":"a3296e94c6f122874fc0b1e1fbb0b345cca8ac74f79510f5455796878828b64f610da1013a922f172537ebaf0fbd187b621a19e80549a0b9c3bc9bce7d820ab9","href":"https://static.observableusercontent.com/files/a3296e94c6f122874fc0b1e1fbb0b345cca8ac74f79510f5455796878828b64f610da1013a922f172537ebaf0fbd187b621a19e80549a0b9c3bc9bce7d820ab9","name":"state_sex_panel.csv","type":"text/csv","lastModified":1790464749821,"size":9377},{"id":"7f1e75d3e6668652a4efd3ab5c7b2331833b4fe20fa2c41173d2ade0744b37a5d63909cbe849fe51939d68aea0c7478831d854356411d33b2506ea5edc41376d","href":"https://static.observableusercontent.com/files/7f1e75d3e6668652a4efd3ab5c7b2331833b4fe20fa2c41173d2ade0744b37a5d63909cbe849fe51939d68aea0c7478831d854356411d33b2506ea5edc41376d","name":"us_counties.topo.json","type":"application/json","lastModified":1790464749103,"size":3290447}] 43:{"id":"de5f72a0148ef12f","slug":"are-coastal-counties-more-active-and-less-obese","title":"Are coastal counties more active and less obese?","thumbnail":"6e86adbe3fe82875af7f54f7d630b9f2d14e7c529c9e8354845fee03bcfc951c","access_level":"public","create_time":"$D2026-09-26T23:09:17.217Z","update_time":"$D2026-09-28T01:59:33.161Z","view_time":null,"first_public_time":"$D2026-09-28T02:00:52.383Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5401807055ae8618","login":"benji823","name":"Benji","avatar_url":"https://avatars-next.observableusercontent.com/5116ea3621a099ca0069d79a87fa01f36ef9e7efd7e55dcba31fb687a18522e4","tier":"starter_2024","bio":""},"version":198,"publish_version":198,"role":null,"authored":false,"authors":[{"type":"individual","id":"35d7c478ca12bd85","login":"benji823","name":"Benji","avatar_url":"https://avatars-next.observableusercontent.com/5116ea3621a099ca0069d79a87fa01f36ef9e7efd7e55dcba31fb687a18522e4","tier":null,"bio":""}],"members":[{"type":"team","id":"5401807055ae8618","login":"benji823","name":"Benji","avatar_url":"https://avatars-next.observableusercontent.com/5116ea3621a099ca0069d79a87fa01f36ef9e7efd7e55dcba31fb687a18522e4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Are coastal counties more active and less obese?","cells":[{"id":1,"value":"# Are coastal counties more active and less obese?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## Revisions, investigations, etc...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"preparing and loading the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"counties = (await FileAttachment(\"county_analysis.csv\").csv()).map(d => ({\n fips: d.fips,\n state: d.state,\n county: d.county,\n population: +d.population,\n lon: +d.lon,\n lat: +d.lat,\n obesity: +d.obesity,\n obesity_ci: d.obesity_ci,\n inactivity: +d.inactivity,\n activity: 100 - +d.inactivity,\n inactivity_ci: d.inactivity_ci,\n income: d.income === \"\" ? null : +d.income,\n distOcean: +d.dist_ocean_km,\n distCoastLakes: +d.dist_coast_incl_lakes_km\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"countyByFips = new Map(counties.map(d => [d.fips, d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"us = FileAttachment(\"us_counties.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"countyShapes = topojson.feature(us, us.objects.counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"stateMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"statePanel = (await FileAttachment(\"state_sex_panel.csv\").csv({typed: true}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"({counties: counties.length,\n unmatchedShapes: countyShapes.features.filter(f => !countyByFips.has(f.id)).length})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Plot.plot({\n projection: \"albers-usa\",\n color: {legend: true},\n marks: [\n Plot.geo(countyShapes, {fill: d => countyByFips.get(d.id)?.obesity})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"### Here we have a choropleth of obesity rates in the United States.\n\nIt appears that the data loaded in correctly, however, we will need some labels in order to tell what this chart is actually trying to show (obesity). Also, the default color map might not be the best choice. Since obesity is a single metric, maybe we should use a single color gradient, like red-white.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Plot.plot({\n width: 975,\n projection: \"albers-usa\",\n title: \"Adult obesity by county, 2022\",\n subtitle: \"Age-adjusted share of adults with BMI ≥ 30\",\n caption: \"Source: CDC PLACES, 2024 release (BRFSS 2022 model-based estimates). Boundaries: US Census cartographic boundary files, 2024.\",\n color: {\n type: \"linear\",\n scheme: \"reds\",\n label: \"Adults with obesity (%)\",\n legend: true\n },\n marks: [\n Plot.geo(countyShapes, {fill: d => countyByFips.get(d.id)?.obesity}),\n Plot.geo(stateMesh, {stroke: \"white\", strokeWidth: 0.75})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"We now have a single-color scheme that fixes the luminosity problem from the previous graph. There is no question now where obesity is dense, and where it is not. There is also no issue of colorblindness-readability anymore, since this would still be readable even in monotone. I also added a white state border to make it a bit easier to localize without too much noise. We also have labels now.\n\nHowever, we haven't encoded anything about distance-to-coast, the main point of the hypothesis. We also haven't done anything about physical activity yet. My hypothesis is more geared toward physical activity, as BMI is a tad flawed. A bodybuilder would classify as obese, but they will likely undertake a lot of physical activity, which should help us differentiate (even if only slightly) between those who are actually obese, and those who are overly muscular. My original hypothesis had to do with sex-specific fitness markers, but that data wasn't available with enough granularity, so this is the next best we can do.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"Before revising the choropleth any further, I wanted to check on a bivariate plot whether physical activity or obesity have any correlation with distance to coast. Surprisingly, it would actually seem that those FURTHER from the coast participate in more physical activity (with an exception for those directly on the coast). Obesity seems to have no significant correlation. However, none of this is adjusted for population; a Wyoming county with few people has the same effect as Los Angeles county. Though, this might not actually be a problem, since we've targeted obesity rate, not raw numbers.\n\nRegarding that exception of those nearest the coast, I notice something interesting that may support my hypothesis. Looking at the far left of each of these graphs, you can clearly see that a vast majority of those counties actually fall above the activity regression, and below the obesity regression.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"I also wanted to check something else here; income. It's pretty well known that income is correlated with obesity, and we can see that represented on these scatters, encoded through color. I also switched to a logarithmic x-axis and plotted the median to highlight the exception of those extremely near to the coast. As we can see, those directly near the coast DO experience less obesity and more physical activity, it's just that the effect drops off rather quickly.\n\nHowever, even with color encoding, income is only readable as a vague vertical gradient under heavy overplotting. The median line also hides spread (no sense of variance) and ignores income entirely. We should try to account for this without relying solely on visual interpretation. We could slice distance and income into bands to try and do this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"distanceBands = [\n {label: \"0–25\", lo: 0, hi: 25},\n {label: \"25–50\", lo: 25, hi: 50},\n {label: \"50–100\", lo: 50, hi: 100},\n {label: \"100–200\", lo: 100, hi: 200},\n {label: \"200–400\", lo: 200, hi: 400},\n {label: \"400–800\", lo: 400, hi: 800},\n {label: \"800+\", lo: 800, hi: Infinity}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"incomeCuts = {\n const incomes = counties.map(d => d.income).filter(d => d != null);\n return [d3.quantile(incomes, 1 / 3), d3.quantile(incomes, 2 / 3)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"incomeGroups = [\"Lower-income third\", \"Middle-income third\", \"Upper-income third\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"bandStats = {\n const groupOf = d => d.income < incomeCuts[0] ? incomeGroups[0]\n : d.income < incomeCuts[1] ? incomeGroups[1]\n : incomeGroups[2];\n const bandOf = d => distanceBands.find(b => d.distOcean >= b.lo && d.distOcean < b.hi).label;\n const rows = [];\n for (const measure of [\"activity\", \"obesity\"]) {\n const grouped = d3.group(counties.filter(d => d.income != null), bandOf, groupOf);\n for (const [band, byGroup] of grouped) {\n for (const [group, values] of byGroup) {\n const v = values.map(d => d[measure]).sort(d3.ascending);\n rows.push({\n measure, band, group, n: v.length,\n q1: d3.quantileSorted(v, 0.25),\n median: d3.quantileSorted(v, 0.5),\n q3: d3.quantileSorted(v, 0.75)\n });\n }\n }\n }\n const bandOrder = new Map(distanceBands.map((b, i) => [b.label, i]));\n return rows.sort((a, b) => d3.ascending(bandOrder.get(a.band), bandOrder.get(b.band)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Some interesting insights here. For all income terciles, physical activity seems to be higher at the coasts, steadily declines, but spikes sharply as you get maximally far from the coast. The Great Lakes are not considered coast, perhaps they are causing this effect? Or maybe it's something else entirely?\n\nRegarding obesity, there is an interesting trend. Higher incomes increase steadily in obesity rates with distance to coast, while lower incomes drop sharply at the far interior. Middle income seems to stay constant. What could this be?\n\nSo far, we've found some very interesting insights, but nothing has been linked back to the map yet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof measure = Inputs.radio(\n new Map([[\"Physical activity\", \"activity\"], [\"Obesity\", \"obesity\"]]),\n {label: \"Measure\", value: \"activity\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof coastDef = Inputs.radio(\n new Map([[\"Ocean only\", \"distOcean\"], [\"Ocean + Great Lakes\", \"distCoastLakes\"]]),\n {label: \"What counts as coast\", value: \"distOcean\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"measureInfo = ({\n activity: {title: \"Physical activity\", label: \"Adults physically active (%)\", interpolate: d3.interpolateBlues},\n obesity: {title: \"Obesity\", label: \"Adults with obesity (%)\", interpolate: d3.interpolateReds}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"incomeColors = [d3.interpolateViridis(0.05), d3.interpolateViridis(0.45), d3.interpolateViridis(0.78)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"incomeGroupOf = d => d.income < incomeCuts[0] ? incomeGroups[0]\n : d.income < incomeCuts[1] ? incomeGroups[1]\n : incomeGroups[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"bandOf = (d, key) => distanceBands.find(b => d[key] >= b.lo && d[key] < b.hi).label","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"linkedStats = {\n const bandOrder = new Map(distanceBands.map((b, i) => [b.label, i]));\n const rows = [];\n const grouped = d3.group(counties.filter(d => d.income != null), d => bandOf(d, coastDef), incomeGroupOf);\n for (const [band, byGroup] of grouped) {\n for (const [group, values] of byGroup) {\n const v = values.map(d => d[measure]).sort(d3.ascending);\n rows.push({\n band, group, n: v.length,\n q1: d3.quantileSorted(v, 0.25),\n median: d3.quantileSorted(v, 0.5),\n q3: d3.quantileSorted(v, 0.75)\n });\n }\n }\n rows.sort((a, b) => d3.ascending(bandOrder.get(a.band), bandOrder.get(b.band)));\n const totals = distanceBands.map(b => ({\n band: b.label,\n n: counties.filter(d => bandOf(d, coastDef) === b.label).length\n }));\n return {rows, totals};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"testing interactivity of the data before putting it on a map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"Interactivity works on the map and hovering over a county shows its stats. However, scrolling between the toggles and visuals is annoying and doesn't allow you to see the change in real time. The linking between the chart and map is one-way; clicking on the chart shows relation on the map, but not vice-versa.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 44:"$43:body"