2b:null 2c:["$","title",null,{"children":"Population Columns | 🪦 dis-2025-fall | Observable"}] 31:T2bd9,highlightRustBeltSpecial = { // --- 1. Special counties to highlight --- const specialFIPS = new Set(["55025", "39049", "17031", "42003"]); // Custom editable tooltip text for each special county const specialTooltips = { "55025": "Dane County, Wisconsin: home to Madison. In addition to housing the University of Wisconsin, Madison has become a prosperous tech center, housing major companies like Epic Systems. Its population has grown strongly despite manufacturing declines.", "39049": "Franklin County, Ohio: home to Columbus. Columbus has diversified its economy into the finance and insurance industries and is one of few fast-growing cities in Ohio.", "17031": "Cook County, Illinois: home to Chicago, the Rust Belt's largest city. Although Chicago retains a large industrial sector, its most promising sectors now include finance, technology, research, and healthcare.", "42003": "Allegheny County, Pennsylvania: home to Pittsburgh, headquarters of U.S. Steel and one of the hardest-hit cities by the decline of the steel industry. Today, Pittsburgh has reinvented itself, with significant growth in its healthcare, education, and technology sectors." }; // --- 2. Rust Belt counties from county_population --- const rustBeltFIPS = new Set( county_population.map(d => String(d.FIPS).padStart(5, "0")) ); // --- 3. Build enriched GeoJSON for 2009–2019 growth on Rust Belt only --- const BASE_YEAR = 2009; const TARGET_YEAR = 2019; const popBase = new Map( populationRaw .filter(d => +d.Year === BASE_YEAR) .map(d => [String(d.FIPS).padStart(5, "0"), +d.Population]) ); const popTarget = new Map( populationRaw .filter(d => +d.Year === TARGET_YEAR) .map(d => [String(d.FIPS).padStart(5, "0"), +d.Population]) ); const refRow = refGrowthTable.find( r => r.from === BASE_YEAR && r.to === TARGET_YEAR ); const refGrowth = refRow ? refRow.value : null; function formatCountyNameSimple(p) { const raw = p["County, State"] || p.NAME || p.county || p.County || p.geoid || "Unknown county"; const st = p.STUSPS || ""; let base = raw; if (!/County$/i.test(base)) base = `${base} County`; return st ? `${base}, ${st}` : base; } const features = modified_geojson2019.features .map(f => { const p = f.properties || {}; const geoid = String( p.GEOID ?? p.FIPS ?? (p.STATEFP && p.COUNTYFP ? p.STATEFP + p.COUNTYFP : "") ).padStart(5, "0"); // only keep Rust Belt counties if (!rustBeltFIPS.has(geoid)) return null; const b = popBase.get(geoid); const t = popTarget.get(geoid); let growth = null; if (b != null && t != null && b > 0) { growth = (t - b) / b; } let category = "no-data"; if (growth != null && refGrowth != null) { if (growth < 0) category = "decline"; else if (growth >= refGrowth) category = "above-avg"; else category = "below-avg"; } return { ...f, properties: { ...p, geoid, growth, category, special: specialFIPS.has(geoid) } }; }) .filter(Boolean); const rustGeo = { ...modified_geojson2019, features }; // quick lookup for labels → properties const propsByFips = new Map( rustGeo.features.map(f => [String(f.properties.geoid).padStart(5, "0"), f.properties]) ); // --- 4. Growth color logic --- function getGrowthColor(p) { if (!p || p.growth == null || refGrowth == null) { return [120, 120, 120, 160]; // no data / no benchmark } switch (p.category) { case "decline": return [220, 38, 38, 200]; // red case "below-avg": return [234, 179, 8, 200]; // yellow case "above-avg": return [22, 163, 74, 200]; // green default: return [120, 120, 120, 160]; } } const specialHighlightColor = [59, 180, 255, 255]; // bright blue // --- 5. Label positions for the four special counties --- const labelData = [ { fips: "55025", name: "Dane County, WI", coord: [-89.40, 43.07] }, { fips: "39049", name: "Franklin County, OH", coord: [-83.00, 39.96] }, { fips: "17031", name: "Cook County, IL", coord: [-87.65, 41.88] }, { fips: "42003", name: "Allegheny County, PA", coord: [-79.99, 40.44] } ]; // --- 6. Shared tooltip rendering helper --- function showTooltipFromProps(p, x, y) { const el = hoverTooltip; if (!p) { el.style.display = "none"; return; } const geoid = String(p.geoid || "").padStart(5, "0"); const isSpecial = specialFIPS.has(geoid); const custom = specialTooltips[geoid]; const name = formatCountyNameSimple(p); // For highlighted/special counties: ONLY text note (plus name) if (isSpecial) { el.style.display = "block"; el.style.left = `${x + 12}px`; el.style.top = `${y + 12}px`; el.innerHTML = `

${name}

${custom || "No note yet. Add one in specialTooltips."}

`; return; } // For all other counties: keep full growth analysis const g = p.growth; const gText = g == null ? "N/A" : d3.format("+.1%")(g); const refText = refGrowth == null ? "N/A" : d3.format("+.1%")(refGrowth); const diff = g != null && refGrowth != null ? g - refGrowth : null; const diffText = diff == null ? "N/A" : d3.format("+.1%")(diff); let label = "No growth comparison available."; if (g != null && refGrowth != null) { if (p.category === "decline") { label = "Population declined vs 2009."; } else if (p.category === "above-avg") { label = "Grew faster than the U.S. average."; } else if (p.category === "below-avg") { label = "Grew, but slower than the U.S. average."; } label += ` (${gText}, U.S. benchmark ${refText}, difference ${diffText}).`; } el.style.display = "block"; el.style.left = `${x + 12}px`; el.style.top = `${y + 12}px`; el.innerHTML = `

${name}

Growth (2009–2019): ${gText}

Benchmark (U.S.): ${refText}

${label}

`; } // --- 7. Map container & overlay UI --- const container = getDeckGLMap([], { pitch: 45, bearing: -20 }); const deckgl = container.deck; // make sure tooltip is attached container.appendChild(hoverTooltip); const ui = document.createElement("div"); Object.assign(ui.style, { position: "absolute", inset: "0", pointerEvents: "none" }); container.appendChild(ui); // --- 8. Base layer: all RB counties, short, growth-colored --- function buildBaseLayer() { return new deck.GeoJsonLayer({ id: "rb-growth-base", data: rustGeo, filled: true, stroked: true, extruded: true, getElevation: 800, elevationScale: 20, getLineColor: [20, 20, 20, 200], getLineWidth: 1, getFillColor: d => getGrowthColor(d.properties), pickable: true, autoHighlight: true, highlightColor: [0, 200, 255, 200], onHover: info => { const { object, x, y } = info; if (!object) { hoverTooltip.style.display = "none"; return; } showTooltipFromProps(object.properties, x, y); } }); } // --- 9. Highlight layer: ONLY the 4 special counties, tall & blue --- function buildHighlightLayer() { const highlightFeatures = rustGeo.features.filter( f => f.properties.special ); return new deck.GeoJsonLayer({ id: "rb-growth-highlight", data: { ...rustGeo, features: highlightFeatures }, filled: true, stroked: true, extruded: true, getElevation: 5000, elevationScale: 20, getFillColor: specialHighlightColor, getLineColor: [255, 255, 255, 255], getLineWidth: 2, pickable: false }); } // --- 10. Labels for the four highlighted counties (only when highlighted) --- function buildLabelLayer() { return new deck.TextLayer({ id: "rb-special-labels", data: labelData, getPosition: d => [d.coord[0], d.coord[1] + 0.06], getText: d => d.name, sizeUnits: "pixels", getSize: 28, getColor: [255, 255, 255, 255], background: true, getBackgroundColor: [15, 23, 42, 230], getTextAnchor: "middle", getAlignmentBaseline: "bottom", billboard: true, fontFamily: "system-ui, sans-serif", fontSettings: { sdf: true, padding: 14 }, pickable: true, parameters: { depthTest: false }, onHover: info => { const { object, x, y } = info; if (!object) { hoverTooltip.style.display = "none"; return; } const p = propsByFips.get(object.fips); if (!p) { hoverTooltip.style.display = "none"; return; } showTooltipFromProps(p, x, y); } }); } // --- 11. Initial render: base only --- deckgl.setProps({ layers: [buildBaseLayer()] }); // --- 12. Button toggle for highlight + labels --- const btn = document.createElement("button"); btn.textContent = "Click here to view key revitalizing counties"; Object.assign(btn.style, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", padding: "12px 26px", background: "rgba(17,24,39,0.95)", color: "#f9fafb", border: "1px solid rgba(156,163,175,0.9)", borderRadius: "12px", // <- more squared, like the legend box fontFamily: "system-ui, sans-serif", fontSize: "16px", fontWeight: "700", cursor: "pointer", pointerEvents: "auto", zIndex: "30", boxShadow: "0 8px 20px rgba(0,0,0,0.6)" }); ui.appendChild(btn); btn.onclick = () => { const layers = deckgl.props.layers || []; const hasHighlight = layers.some(l => l.id === "rb-growth-highlight"); if (!hasHighlight) { const newLayers = [ ...layers.filter(l => l.id !== "rb-growth-highlight" && l.id !== "rb-special-labels"), buildHighlightLayer(), buildLabelLayer() ]; deckgl.setProps({ layers: newLayers }); btn.textContent = "Click here to view the 2009-2019 population growth map"; } else { const newLayers = layers.filter( l => l.id !== "rb-growth-highlight" && l.id !== "rb-special-labels" ); deckgl.setProps({ layers: newLayers }); btn.textContent = "Click here to view the key revitalizing counties"; hoverTooltip.style.display = "none"; } }; return container; }32:T3afe,populationMap = { // --- base container & deck instance --- const initialYear = years[0]; // change to years[1] if you want to skip the baseline const container = getDeckGLMap([], { pitch: 45, bearing: -20 }); const deckgl = container.deck; // attach tooltip into the container container.appendChild(hoverTooltip); // --- state → postal abbrevs for tooltip formatting --- const stateAbbr = { "17": "IL", "18": "IN", "26": "MI", "39": "OH", "42": "PA", "55": "WI", "36": "NY", "54": "WV" }; function formatCountyName(p) { const raw = p["County, State"] || p.NAME || p.county || p.County || p.geoid || "Unknown county"; const st = p.STUSPS || stateAbbr[String(p.STATEFP).padStart(2, "0")] || ""; let base = raw; if (!/County$/i.test(base)) base = `${base} County`; return st ? `${base}, ${st}` : base; } // labels for key cities we want to highlight const majorCities = [ { name: "Chicago, IL", coordinates: [-87.6298, 41.8781] }, { name: "Cleveland, OH", coordinates: [-81.6944, 41.4993] }, { name: "Detroit, MI", coordinates: [-83.0458, 42.3314] }, { name: "Columbus, OH", coordinates: [-82.9988, 39.9612] }, { name: "Pittsburgh, PA", coordinates: [-79.9959, 40.4406] }, { name: "Philadelphia, PA", coordinates: [-75.1652, 39.9526] }, { name: "Madison, WI", coordinates: [-89.4012, 43.0731] } ]; const chicago = majorCities.find(d => d.name === "Chicago, IL"); // where the "Chicago, IL" label text is rendered const chicagoLabelPosition = chicago ? [chicago.coordinates[0], chicago.coordinates[1] + 0.06] : [-87.6298, 41.8781 + 0.06]; const populationAnnotation = { label: "county height = county population", // where you want the label pill to *sit* on the map labelPosition: [-84.8, 44.2], // tweak until you like the spot // keep for reference if you ever need it targetPosition: chicago ? chicago.coordinates : [-87.6298, 41.8781] }; // --- population scale (shared across years) --- const popValuesAll = populationRaw .map(d => +d.Population) .filter(v => Number.isFinite(v) && v > 0); const popScaleLocal = d3.scaleSqrt() .domain(d3.extent(popValuesAll)) .range([100, 2000]); // pre-elevationScale (meters before elevationScale) // previous year in years[] function getPrevYear(y) { const ys = years.map(Number); const idx = ys.indexOf(+y); return idx > 0 ? ys[idx - 1] : null; } // benchmark growth for period function getRefGrowth(from, to) { if (from == null) return null; const row = refGrowthTable.find( d => d.from === +from && d.to === +to ); return row ? row.value : null; } // build enriched GeoJSON for a specific year function buildGeojson(year) { const prevYear = getPrevYear(year); const refGrowth = getRefGrowth(prevYear, year); const rowsNow = populationRaw.filter(d => +d.Year === +year); const popMapNow = new Map( rowsNow.map(d => [String(d.FIPS).padStart(5, "0"), +d.Population]) ); const popMapPrev = new Map(); if (prevYear != null) { const rowsPrev = populationRaw.filter(d => +d.Year === +prevYear); for (const d of rowsPrev) { popMapPrev.set(String(d.FIPS).padStart(5, "0"), +d.Population); } } const features = modified_geojson2019.features .map(f => { const p = f.properties || {}; const geoid = String( p.GEOID ?? p.FIPS ?? (p.STATEFP && p.COUNTYFP ? p.STATEFP + p.COUNTYFP : "") ); const popNow = popMapNow.get(geoid) ?? null; const popPrev = popMapPrev.get(geoid) ?? null; let growth = null; if (popNow != null && popPrev != null && popPrev > 0) { growth = (popNow - popPrev) / popPrev; } let category = "no-data"; if (growth != null && refGrowth != null) { if (growth < 0) category = "decline"; else if (growth >= refGrowth) category = "above-avg"; else category = "below-avg"; } return { ...f, properties: { ...p, geoid, population: popNow, growth, category } }; }) .filter(f => f.properties.population != null); // only counties with data return { geojson: { ...modified_geojson2019, features }, prevYear, refGrowth }; } // color logic with translucency function makeGrowthColor(prevYear, refGrowth) { return p => { if (!p || p.population == null) { return [60, 60, 60, 40]; // very faint } // baseline year or missing benchmark → solid (translucent) blue if (prevYear == null || refGrowth == null) { return [59, 130, 246, 170]; } switch (p.category) { case "decline": // red return [220, 38, 38, 180]; case "below-avg": // yellow return [234, 179, 8, 180]; case "above-avg": // green return [22, 163, 74, 180]; default: // no data return [120, 120, 120, 80]; } }; } // --- Build Deck layers for a given year (main map) --- function buildMainLayers(year, geojson, prevYear, refGrowth) { const getFillColor = makeGrowthColor(prevYear, refGrowth); // county extrusions const countyLayer = new deck.GeoJsonLayer({ id: "population-growth", data: geojson, filled: true, stroked: false, extruded: true, wireframe: false, // HEIGHT = population getElevation: d => { const pop = d.properties.population || 0; return popScaleLocal(pop); }, elevationScale: 50, // COLOR = growth vs benchmark (translucent) getFillColor: d => getFillColor(d.properties), getLineColor: [15, 15, 15], getLineWidth: 1, pickable: true, autoHighlight: true, highlightColor: [0, 200, 255, 200], onHover: info => { const el = hoverTooltip; const { object, x, y } = info; if ( !object || !object.properties || object.properties.population == null ) { el.style.display = "none"; return; } const p = object.properties; const name = formatCountyName(p); const pop = p.population || 0; const g = p.growth; const gText = g == null ? "N/A" : d3.format("+.1%")(g); const refB = refGrowth == null ? "N/A" : d3.format("+.1%")(refGrowth); // color for the growth number (same as county fill) const [cr, cg, cb] = getFillColor(p); const growthColor = `rgba(${cr}, ${cg}, ${cb}, 1)`; let compText = "No growth comparison available."; if (g != null && refGrowth != null) { const diff = g - refGrowth; const diffText = d3.format("+.1%")(diff); const cat = p.category; let label = ""; if (cat === "decline") label = "Population declined vs previous period"; else if (cat === "above-avg") label = "Grew faster than the U.S. average"; else if (cat === "below-avg") label = "Grew, but slower than the U.S. average"; compText = `${label} (${gText}, U.S. benchmark ${refB}, difference ${diffText}).`; } const periodLabel = (prevYear == null) ? "N/A" : `${prevYear}–${year}`; el.style.display = "block"; el.style.left = `${x + 12}px`; el.style.top = `${y + 12}px`; el.innerHTML = `

${name}

Growth (${periodLabel}): ${gText}

Population (${year}): ${d3.format(",")(pop)}

Benchmark (U.S.): ${refB}

${compText}

`; } }); // city dots (now red) const cityDotLayer = new deck.ScatterplotLayer({ id: "major-city-dots", data: majorCities, getPosition: d => d.coordinates, getRadius: 3500, radiusUnits: "meters", getFillColor: [239, 68, 68, 255], // red stroked: true, getLineColor: [15, 23, 42, 255], lineWidthMinPixels: 1.5, pickable: false, parameters: { depthTest: false } }); // city labels const cityLabelLayer = new deck.TextLayer({ id: "major-city-labels", data: majorCities, getPosition: d => [d.coordinates[0], d.coordinates[1] + 0.06], getText: d => d.name, sizeUnits: "pixels", getSize: 22, getColor: [255, 255, 255, 255], background: true, getBackgroundColor: [15, 23, 42, 240], getTextAnchor: "middle", getAlignmentBaseline: "bottom", fontFamily: "system-ui, sans-serif", fontSettings: { sdf: true, padding: 12 }, billboard: true, pickable: false, parameters: { depthTest: false } }); // pill label anchored over the map const heightLabelLayer = new deck.TextLayer({ id: "population-height-label", data: [populationAnnotation], getPosition: d => d.labelPosition, getText: d => d.label, sizeUnits: "pixels", getSize: 28, // larger text getColor: [255, 255, 255, 255], background: true, getBackgroundColor: [15, 23, 42, 240], fontFamily: "system-ui, sans-serif", fontSettings: { sdf: true, padding: 12 }, getTextAnchor: "middle", getAlignmentBaseline: "center", billboard: true, // stays horizontal as you pitch/rotate pickable: false, parameters: { depthTest: false } }); // arrow from label to a point ABOVE the Chicago label const heightArrowLayer = new deck.PathLayer({ id: "population-height-arrow", data: [populationAnnotation], getPath: d => { // point just above the "Chicago, IL" text const tipAboveLabel = [ chicagoLabelPosition[0], chicagoLabelPosition[1] + 0.02 // tweak this up/down ]; return [d.labelPosition, tipAboveLabel]; }, widthUnits: "pixels", getWidth: 3, getColor: [255, 255, 255, 255], pickable: false, parameters: { depthTest: false } }); return [ countyLayer, cityDotLayer, cityLabelLayer, heightLabelLayer, heightArrowLayer ]; } // --- overlay UI (controls + legend) --- const ui = document.createElement("div"); ui.style.position = "absolute"; ui.style.inset = "0"; ui.style.pointerEvents = "none"; container.appendChild(ui); // top-center controls (scrubber) const controls = document.createElement("div"); Object.assign(controls.style, { position: "absolute", top: "8px", left: "50%", transform: "translateX(-50%)", display: "flex", alignItems: "center", gap: "12px", padding: "10px 14px", borderRadius: "12px", // less rounded, matches legend background: "rgba(17,24,39,0.95)", color: "#f9fafb", fontFamily: "system-ui, sans-serif", fontSize: "15px", boxShadow: "0 8px 18px rgba(15,23,42,0.45)", pointerEvents: "auto", zIndex: "20" }); const controlsText = document.createElement("div"); controlsText.style.fontWeight = "700"; controlsText.style.fontSize = "12px"; controlsText.textContent = "Press play or drag to see changes over the years."; controls.appendChild(controlsText); const scrub = Scrubber(years, { format: d => { const prev = getPrevYear(d); return prev ? `${prev}–${d}` : String(d); }, autoplay: false, loop: true, delay: 1330 }); Object.assign(scrub.style, { fontSize: "13px", padding: "4px 6px" }); controls.appendChild(scrub); ui.appendChild(controls); // bottom-right legend (color legend) const legendBox = document.createElement("div"); Object.assign(legendBox.style, { position: "absolute", bottom: "12px", right: "12px", padding: "10px 12px", borderRadius: "12px", background: "rgba(15,23,42,0.9)", color: "#e5e7eb", fontFamily: "system-ui, sans-serif", fontSize: "12px", boxShadow: "0 8px 18px rgba(0,0,0,0.45)", pointerEvents: "none", maxWidth: "260px" }); const legendTitle = document.createElement("div"); legendTitle.style.fontWeight = "600"; legendTitle.style.marginBottom = "4px"; legendTitle.textContent = "Color legend (growth vs U.S. counties)"; legendBox.appendChild(legendTitle); const legendList = document.createElement("div"); Object.assign(legendList.style, { display: "flex", flexDirection: "column", gap: "4px" }); function addLegendRow(rgb, label) { const row = document.createElement("div"); Object.assign(row.style, { display: "flex", alignItems: "center", gap: "6px" }); const swatch = document.createElement("span"); Object.assign(swatch.style, { display: "inline-block", width: "14px", height: "14px", borderRadius: "3px", border: "1px solid rgba(15,23,42,0.4)", background: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${rgb[3] / 255})` }); const text = document.createElement("span"); text.textContent = label; row.appendChild(swatch); row.appendChild(text); legendList.appendChild(row); } addLegendRow([220, 38, 38, 200], "Population declined vs previous period"); addLegendRow([234, 179, 8, 200], "Grew, but below average U.S. county growth rate"); addLegendRow([22, 163, 74, 200], "Grew at or above average U.S. county growth rate"); addLegendRow([120, 120, 120, 160], "No growth data / no benchmark"); const legendNote = document.createElement("div"); Object.assign(legendNote.style, { marginTop: "4px", fontSize: "11px", color: "#9ca3af" }); legendNote.textContent = "Height always shows population level; colors compare growth to a benchmark U.S. county growth rate."; legendBox.appendChild(legendList); legendBox.appendChild(legendNote); ui.appendChild(legendBox); // --- wire scrubber → map layers --- let currentYear = initialYear; function setYear(year) { currentYear = year; const { geojson, prevYear, refGrowth } = buildGeojson(year); deckgl.setProps({ layers: buildMainLayers(year, geojson, prevYear, refGrowth) }); } // initial render setYear(currentYear); // update on scrubber change scrub.oninput = () => { setYear(scrub.value); }; return container; }33:T429,popGeojson = { const features = modified_geojson2019.features .map(f => { const p = f.properties; const geoid = String( p.GEOID ?? p.FIPS ?? (p.STATEFP && p.COUNTYFP ? p.STATEFP + p.COUNTYFP : "") ); const popNow = popMapCurrent.get(geoid) ?? null; const popPrev = popMapPrev.get(geoid) ?? null; let growth = null; if (popNow != null && popPrev != null && popPrev > 0) { growth = (popNow - popPrev) / popPrev; } let category = "no-data"; if (growth != null && refGrowth != null) { if (growth < 0) category = "decline"; // red else if (growth >= refGrowth) category = "above-avg"; // green else category = "below-avg"; // yellow } return { ...f, properties: { ...p, geoid, population: popNow, growth, category } }; }) .filter(f => f.properties.population != null); return { ...modified_geojson2019, features }; }34:[{"id":"d2b9754b8b74334c31db7f3df7264df89835521210c81d70ac1523fd88e859714b06cf6c909242467d46453263f858d999162e801104bce3b145d0e0f0ea0e64","href":"https://static.observableusercontent.com/files/d2b9754b8b74334c31db7f3df7264df89835521210c81d70ac1523fd88e859714b06cf6c909242467d46453263f858d999162e801104bce3b145d0e0f0ea0e64","name":"modified_geojson2019.geojson","type":"application/geo+json","lastModified":1763560562500.697,"size":6516580},{"id":"4110c86203a169cd621499485e0fbe5db3479f82441efd0f96dbc07402663a6eaeef756b297734ac6f9ce2ba1f9484bb967e758b61707389dc4923339bcbb32f","href":"https://static.observableusercontent.com/files/4110c86203a169cd621499485e0fbe5db3479f82441efd0f96dbc07402663a6eaeef756b297734ac6f9ce2ba1f9484bb967e758b61707389dc4923339bcbb32f","name":"county_population.csv","type":"text/csv","lastModified":1763560566280.838,"size":50362}] 2f:{"id":"671d0074f372bd1f","slug":"population-columns","title":"Population Columns","thumbnail":"18c58826d8e685288f83d59480831bbe68cab092b1d88418f9b67a59780e7ada","access_level":"public","create_time":"$D2025-11-19T13:53:47.690Z","update_time":"$D2025-12-02T15:45:51.245Z","view_time":null,"first_public_time":"$D2025-11-19T18:23:57.300Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024"},"version":232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"58b4bf6dc88792cc","login":"samls2","name":"SamLS","avatar_url":"https://avatars-next.observableusercontent.com/5af7af2dc826d1f90f4a8d79fd0de60a87003c067bc02c639778e08358d356dd","tier":null}],"members":[{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"58b4bf6dc88792cc","login":"samls2","name":"SamLS","avatar_url":"https://avatars-next.observableusercontent.com/5af7af2dc826d1f90f4a8d79fd0de60a87003c067bc02c639778e08358d356dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Population Columns","cells":[{"id":0,"value":"# Population Columns ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"modified_geojson2019 = FileAttachment(\"modified_geojson2019.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"county_population = await FileAttachment(\"county_population.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"county_population","database":"$undefined"},{"id":7,"value":"mapboxToken = \"pk.eyJ1IjoiYm9zdGFkc2J1c3NlbiIsImEiOiJjbHN1a2JsZzYyODA0Mm1uc285N25hdDR5In0.xpGMqGPiskiRgb4wCyBoTg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mapboxgl = require(\"mapbox-gl@^1.5.1/dist/mapbox-gl.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"deck = require.alias({\n h3: {},\n s2Geometry: {}\n})(\"deck.gl@8.4.1/dist.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"getDeckGLMap = (layers, { pitch = 45, bearing = -10 } = {}) => {\n const container = html`

`;\n\n const deckgl = new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxAccessToken: \"\",\n mapboxApiAccessToken: mapboxToken,\n mapStyle: \"mapbox://styles/mapbox/dark-v10\",\n layers,\n initialViewState: {\n longitude: -81.3,\n latitude: 41.2,\n zoom: 5.3,\n minZoom: 3,\n maxZoom: 10,\n pitch,\n bearing\n },\n controller: true\n });\n\n // *** THIS LINE IS IMPORTANT ***\n container.deck = deckgl;\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"populationRaw = FileAttachment(\"county_population.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"maxPopOverall = d3.max(populationRaw, d => +d.Population)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"populationIndex = {\n const y = +year3;\n const rows = populationRaw.filter(d => +d.Year === y);\n\n // Map \"26005\" -> 119642\n return new Map(\n rows.map(d => [String(d.FIPS).padStart(5, \"0\"), +d.Population])\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"popDomain = {\n const vals = popGeojson.features\n .map(f => f.properties.population)\n .filter(v => v != null && !isNaN(v));\n return [0, d3.max(vals)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"colorScale = d3.scaleSequential(d3.interpolateYlOrRd)\n .domain(popDomain); // 0 → light, max → dark red","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"getColor = pop => {\n if (!pop || pop < minPop) return [60, 60, 60, 80]; // muted gray\n const c = d3.color(colorScale(pop));\n return [c.r, c.g, c.b, 200];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"popMapCurrent = {\n const y = +year3;\n const rows = populationRaw.filter(d => +d.Year === y);\n return new Map(rows.map(d => [String(d.FIPS).padStart(5, \"0\"), +d.Population]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"popMapPrev = {\n if (prevYear == null) return new Map();\n const y = +prevYear;\n const rows = populationRaw.filter(d => +d.Year === y);\n return new Map(rows.map(d => [String(d.FIPS).padStart(5, \"0\"), +d.Population]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"prevYear = {\n const ys = years;\n const i = ys.indexOf(+year3);\n return i > 0 ? ys[i - 1] : null; // null if first year\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"refGrowth = {\n if (prevYear == null) return null;\n const row = refGrowthTable.find(\n d => d.from === +prevYear && d.to === +year3\n );\n return row ? row.value : null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"popForScale = popGeojson.features\n .map(f => f.properties.population)\n .filter(v => v != null && !isNaN(v));\n\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"popExtent = d3.extent(popValues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"popValues = popGeojson.features\n .map(f => f.properties.population)\n .filter(v => v != null && !isNaN(v));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"popScale = d3.scaleSqrt()\n .domain(popExtent) // [minPop, maxPop]\n .range([100, 2000]); // baseline extrusion BEFORE elevationScale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"years = Array.from(\n new Set(populationRaw.map(d => +d.Year))\n)\n.filter(y => y !== 2023) // <-- remove 2023\n.sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"// Geographic bounds of your selected counties\nbounds = d3.geoBounds(popGeojson);\n// bounds = [[minLon, minLat], [maxLon, maxLat]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"hoverTooltip = {\n const div = html`

`;\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"getGrowthColor = d => {\n const p = d.properties || {};\n\n // Baseline year (1969): solid blue\n if (prevYear == null || refGrowth == null) {\n return [59, 130, 246]; // blue, fully opaque\n }\n\n const cat = p.category;\n\n switch (cat) {\n case \"decline\": // red\n return [220, 38, 38];\n case \"above-avg\": // green\n return [22, 163, 74];\n case \"below-avg\": // yellow\n return [234, 179, 8];\n default: // no data\n return [120, 120, 120];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"refGrowthTable = [\n { from: 1969, to: 1979, value: 0.1148 }, // ~11.48%\n { from: 1979, to: 1989, value: 0.0978 }, // ~9.78%\n { from: 1989, to: 1999, value: 0.1315 }, // ~13.15%\n { from: 1999, to: 2009, value: 0.0971 }, // ~9.71%\n { from: 2009, to: 2019, value: 0.0735 }, // ~7.35%\n { from: 2019, to: 2023, value: 0.0260 } // ~2.6% (2019→2023)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof minPop = Inputs.range([0, maxPopOverall], {\n label: \"Minimum population shown\",\n value: 0,\n step: 50000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"