28:null 29:["$","title",null,{"children":"U.S. Population Statistics by State and County, 2021-2024 | Test | Observable"}] 2e:T15ea,chart = { // 1. Setup Dimensions & Projection const width = 1000; const height = 700; const projection = d3.geoAlbersUsa() .scale(zoom) .translate([(width / 2) + panX, (height / 2) + panY]); const path = d3.geoPath(projection); // 2. Helper Function (Must match Color logic) const getValue = (d) => { if (!d) return null; // Logic for RPOPCHG if (metric === "RPOPCHG") { let num = 0; if (isCumulative) { const start = Math.max(2021, Math.min(startYear, year)); for (let y = start; y <= year; y++) { const val = 1000 * d[`NPOPCHG${y}`]; if (val != null && !isNaN(val)) num += val; } } else { num = 1000 * d[`NPOPCHG${year}`]; } const den = d[`POPESTIMATE${year}`]; return (den && den !== 0) ? num / den : null; } // Logic for others if (metric === "POPESTIMATE" || !isCumulative) { return d[`${metric}${year}`]; } const start = Math.max(2021, Math.min(startYear, year)); let sum = 0; for (let y = start; y <= year; y++) { const val = d[`${metric}${y}`]; if (val != null && !isNaN(val)) sum += val; } return sum; }; // 3. Prepare Data Map const dataMap = new Map(data.map(d => { const stateFips = d.STATE.toString().padStart(2, "0"); const countyFips = d.COUNTY.toString().padStart(3, "0"); const fips = d.SUMLEV === 50 ? (stateFips + countyFips) : stateFips; return [fips, d]; })); // 4. Filter Geometry const targetSumLev = level === "County" ? 50 : 40; const geom = level === "County" ? us.objects.counties : us.objects.states; const features = topojson.feature(us, geom).features; // 5. Container & Tooltip const container = d3.create("div").style("position", "relative"); const tooltip = container.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("color", "black") .style("padding", "8px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("pointer-events", "none") .style("font-family", "sans-serif") .style("font-size", "12px") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)") .style("z-index", "10"); // 6. Build SVG const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; display: block; overflow: hidden;"); // 7. Layers const geometryLayer = svg.append("g"); const borderLayer = svg.append("g").style("pointer-events", "none"); const highlightLayer = svg.append("g").style("pointer-events", "none"); // Draw Geometries geometryLayer .selectAll("path") .data(features) .join("path") .attr("fill", d => { const id = String(d.id).padStart(level === "County" ? 5 : 2, "0"); const row = dataMap.get(id); const val = getValue(row); return (val != null && !isNaN(val)) ? color(val) : "#eee"; }) .attr("d", path) .attr("stroke", "#bbb") .attr("stroke-width", 0.5) .on("mouseenter", (event, d) => { const id = String(d.id).padStart(level === "County" ? 5 : 2, "0"); const row = dataMap.get(id); const val = getValue(row); let content = `${d.properties.name}
No Data`; if (row) { let location = row.STNAME; if (row.CTYNAME && row.CTYNAME !== row.STNAME) { location = `${row.CTYNAME}, ${row.STNAME}`; } let valStr = "N/A"; if (val != null && !isNaN(val)) { // Format Rate nicely (e.g. 0.0512 -> 0.051) // If it's the new calculated rate, maybe use percent or raw decimal valStr = metric === "RPOPCHG" ? val.toLocaleString(undefined, {maximumSignificantDigits: 4}) : val.toLocaleString(); } content = `${location}
${metric}: ${valStr}`; if (isCumulative && metric !== "POPESTIMATE" && metric !== "RPOPCHG") { const s = Math.max(2021, Math.min(startYear, year)); content += `
Sum: ${s}-${year}`; } if (isCumulative && metric === "RPOPCHG") { const s = Math.max(2021, Math.min(startYear, year)); content += `
Rate: Sum(${s}-${year}) / Pop${year}`; } } tooltip.style("visibility", "visible").html(content); highlightLayer.append("path") .datum(d) .attr("d", path) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, container.node()); tooltip.style("top", (y + 15) + "px").style("left", (x + 15) + "px"); }) .on("mouseleave", () => { tooltip.style("visibility", "hidden"); highlightLayer.selectAll("*").remove(); }); // Draw State Borders borderLayer.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#bbb") .attr("stroke-width", 1.2) .attr("d", path); return container.node(); }2f:T938,color = { // 1. Helper to Calculate Value const getValue = (d) => { if (!d) return null; // Logic for new variable: Rate of Population Change if (metric === "RPOPCHG") { // Numerator: NPOPCHG (Sum if cumulative) let num = 0; if (isCumulative) { const start = Math.max(2021, Math.min(startYear, year)); for (let y = start; y <= year; y++) { const val = d[`NPOPCHG${y}`]; if (val != null && !isNaN(val)) num += val; } } else { num = d[`NPOPCHG${year}`]; } // Denominator: POPESTIMATE (Always current year) const den = d[`POPESTIMATE${year}`]; return (den && den !== 0) ? num / den : null; } // Logic for existing variables if (metric === "POPESTIMATE" || !isCumulative) { return d[`${metric}${year}`]; } // Cumulative Sum for other metrics const start = Math.max(2021, Math.min(startYear, year)); let sum = 0; for (let y = start; y <= year; y++) { const val = d[`${metric}${y}`]; if (val != null && !isNaN(val)) sum += val; } return sum; }; // 2. Prepare Data Values const targetSumLev = level === "County" ? 50 : 40; const values = data .filter(d => d.SUMLEV === targetSumLev) .map(getValue) .filter(v => v != null && !isNaN(v)); // 3. Define Color Scheme let schemeInterpolator; // Add RPOPCHG to diverging list if (["NPOPCHG", "RPOPCHG", "NATURALCHG", "NETMIG", "RNATURALCHG", "RNETMIG", "DOMESTICMIG", "RDOMESTICMIG"].includes(metric)) { // Red (Neg) -> Blue (Pos) schemeInterpolator = d3.interpolateRdBu; } else if (["DEATHS", "RDEATH"].includes(metric)) { schemeInterpolator = d3.interpolateReds; } else if (["BIRTHS", "RBIRTH", "INTERNATIONALMIG", "RINTERNATIONALMIG"].includes(metric)) { schemeInterpolator = d3.interpolateGreens; } else { schemeInterpolator = d3.interpolateBlues; } // 4. Return Scale if (useCustom) { const n = customBins; const range = d3.quantize(schemeInterpolator, n); const domain = Array.from({length: n - 1}, (_, i) => customMin + (i + 1) * customStep); return d3.scaleThreshold(domain, range); } else { const n = 9; const range = d3.quantize(schemeInterpolator, n); return d3.scaleQuantile(values, range); } }30:[{"id":"e1c1f1514ae76491bcc7d6b90bfc8262b3877bfb5a092f884846ed4b8bbe6bead299a2995c7dca653c16ad8d0ad3e0232003795f72edca7671a3d87357a8401d","href":"https://static.observableusercontent.com/files/e1c1f1514ae76491bcc7d6b90bfc8262b3877bfb5a092f884846ed4b8bbe6bead299a2995c7dca653c16ad8d0ad3e0232003795f72edca7671a3d87357a8401d","name":"population.csv","type":"text/csv","lastModified":1770933818757.564,"size":1769182}] 2c:{"id":"b8f6f838eb42f423","slug":null,"title":"U.S. Population Statistics by State and County, 2021-2024","thumbnail":"960ff93dd860b843901b42eac1b895646c4fdabd5671db4e8a5544c37b19140c","access_level":"public","create_time":"$D2026-02-09T21:06:29.855Z","update_time":"$D2026-02-12T22:03:48.751Z","view_time":null,"first_public_time":"$D2026-02-10T07:59:58.932Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa12b784c9181f72","login":"test1234235530","name":"Test","avatar_url":"https://avatars-next.observableusercontent.com/2b218144602253d75cc61a403ec8ca12df9dda7509825363e8f0422324dbab9c","tier":"starter_2024"},"version":186,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ac48e484ebf5bd","login":"shak-ragoler","name":"Shak Ragoler","avatar_url":"https://avatars-next.observableusercontent.com/ed916f589d6eb92dbd1e8934e2a01a219ff64cc15b635cd5a73c4245734333ca","tier":null}],"members":[{"type":"individual","id":"97ac48e484ebf5bd","login":"shak-ragoler","name":"Shak Ragoler","avatar_url":"https://avatars-next.observableusercontent.com/ed916f589d6eb92dbd1e8934e2a01a219ff64cc15b635cd5a73c4245734333ca","tier":null,"role":"editor"},{"type":"team","id":"aa12b784c9181f72","login":"test1234235530","name":"Test","avatar_url":"https://avatars-next.observableusercontent.com/2b218144602253d75cc61a403ec8ca12df9dda7509825363e8f0422324dbab9c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"U.S. Population Statistics by State and County, 2021-2024","cells":[{"id":0,"value":"# U.S. Population Statistics by State and County, 2021-2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":150,"value":"This interactive visualization lets users explore the population statistics of U.S. states and counties from 2021 to 2024. From top to bottom, the controls let you decide:\n- Whether to view states or counties.\n- Which of 15 population-related statistics to view.\n- Whether to view annual or cumulative statistics, and if cumulative, then what the starting year is.\n- Whether to use a custom or default legend, and if custom, then what the minimum value encoded, the length of each interval, and the number of intervals are.\n- The zoom level.\n- The horizontal and vertical panning positions.\n- The year for which the data is displayed.\n\nBelow those controls the legend and the map encoding the data are displayed. Hover over a county or state, and view the name of that county or state along with the value for the statistic you chose to view.\n\nAll data was sourced from the U.S. Census Bureau.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"viewof level = Inputs.radio([\"County\", \"State\"], {value: \"County\", label: \"Geographic Level\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"viewof metric = Inputs.select(\n new Map([\n [\"Population\", \"POPESTIMATE\"],\n [\"Net Population Change\", \"NPOPCHG\"],\n [\"Births\", \"BIRTHS\"],\n [\"Deaths\", \"DEATHS\"],\n [\"Natural Change\", \"NATURALCHG\"],\n [\"International Migration\", \"INTERNATIONALMIG\"],\n [\"Domestic Migration\", \"DOMESTICMIG\"],\n [\"Net Migration\", \"NETMIG\"],\n [\"Rate of Population Change\", \"RPOPCHG\"], // New Variable\n [\"Birth Rate\", \"RBIRTH\"],\n [\"Death Rate\", \"RDEATH\"],\n [\"Rate of Natural Change\", \"RNATURALCHG\"],\n [\"Intl. Migration Rate\", \"RINTERNATIONALMIG\"],\n [\"Dom. Migration Rate\", \"RDOMESTICMIG\"],\n [\"Net Migration Rate\", \"RNETMIG\"]\n ]),\n {value: \"POPESTIMATE\", label: \"Statistic\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"viewof isCumulative = Inputs.toggle({label: \"Cumulative Mode\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"viewof startYear = {\n const input = Inputs.range([2021, 2024], {step: 1, value: 2021, label: \"Start Year\"});\n input.style.marginLeft = \"20px\"; // Indent\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"viewof useCustom = Inputs.toggle({label: \"Enable Custom Legend\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"viewof customMin = {\n const input = Inputs.number({label: \"Minimum Value\", value: 0});\n input.style.marginLeft = \"20px\"; // Indent\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"viewof customStep = {\n const input = Inputs.number({label: \"Interval Length\", value: 100000});\n input.style.marginLeft = \"20px\"; // Indent\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof customBins = {\n const input = Inputs.range([3, 20], {label: \"Number of Intervals\", step: 1, value: 9});\n input.style.marginLeft = \"20px\"; // Indent\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"viewof zoom = Inputs.range([1200, 5000], {value: 1200, step: 10, label: \"Zoom Level\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof panX = Inputs.range([-1500, 1500], {value: 0, step: 1, label: \"Pan Horizontal\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"viewof panY = Inputs.range([-900, 900], {value: 0, step: 1, label: \"Pan Vertical\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof year = Inputs.range([2021, 2024], {step: 1, value: 2024, label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"legend = {\n // Determine Title\n let title = `${metric} (${year})`;\n if (isCumulative && metric !== \"POPESTIMATE\") {\n const s = Math.max(2021, Math.min(startYear, year));\n title = `${metric} (Sum: ${s}-${year})`;\n }\n\n return Legend(color, {\n title: title, \n width: 900,\n tickFormat: \".2s\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Data Loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"// Load the uploaded CSV file\ndata = FileAttachment(\"population.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"// Load US Topology\nus = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"## Data Management","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"{\n // 1. Manage Start Year (Linked to Cumulative Mode)\n const startEl = viewof startYear;\n // Inputs.range/number return the container, so we find the actual input element to disable\n const startInput = startEl.querySelector(\"input\");\n if (startInput) {\n const active = isCumulative; \n startInput.disabled = !active;\n startEl.style.opacity = active ? \"1\" : \"0.5\";\n // Disable pointer events on the container to prevent interaction with the slider track\n startEl.style.pointerEvents = active ? \"auto\" : \"none\";\n }\n\n // 2. Manage Custom Legend Inputs (Linked to Custom Legend Mode)\n // Now includes customBins in the group\n const customGroup = [viewof customMin, viewof customStep, viewof customBins];\n const customActive = useCustom;\n \n for (const el of customGroup) {\n const input = el.querySelector(\"input\");\n if (input) {\n input.disabled = !customActive;\n el.style.opacity = customActive ? \"1\" : \"0.5\";\n el.style.pointerEvents = customActive ? \"auto\" : \"none\";\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"