31:T86d,countyPopulationExample = { // const tooltip = new Tooltip(); let svg = d3.create("svg") .attr("width", exampleWidth) .attr("height", exampleHeight) .style("background-color", "#fff") svg.selectAll("path") .data(countyShapes.features) .join("path") .attr("d", path) .attr("fill", d => { let c = populationByCounty2021.get(d.id) switch (segments) { case "over_100K_threshold": return (c && over_100k_threshold.map(([id]) => id).includes(d.id)) ? '#6495ED' : '#F5F5F5'; case "natural_decrease": return (c && [...populationByCounty2021].filter(([k, v]) => Number(v.NATURALCHG2021) < 0 ).map(([id]) => id).includes(d.id)) ? naturalDecline2021(populationByCounty2021.get(d.id).NATURALCHG2021) : '#F5F5F5'; case "net_positive_domestic_migration": return (c && net_positive_domestic_migration.filter(([k, v]) => Math.abs(Number(v.DOMESTICMIG2021)) > 10000).map(([id]) => id).includes(d.id)) ? netColor2021(populationByCounty2021.get(d.id).DOMESTICMIG2021) : '#F5F5F5'; case "states_all_decline": return (c && states_all_decline.flatMap(([state, vals]) => vals.map(val => val.county_code)).includes(d.id)) ? declineColor2021(populationByCounty2021.get(d.id).NATURALCHG2021) : '#F5F5F5'; default: if(c) return populationColor2021(populationByCounty2021.get(d.id).change) return populationColor2021(0) } }) .attr("stroke", "#000") .attr("stroke-width", 0.35) .attr('transform', 'translate(0, 0)') .on("mouseover", function (event, d) { set(input, d.id); d3.select(this).transition() .duration('50') .attr('opacity', '.65'); // tooltip.show(d) }) .on("click", function (event, d) { // not used but useful if you want to filter a table for example }) .on("mouseout", function (event) { d3.select(this).transition() .duration('50') .attr('opacity', '1'); // tooltip.hide() }); // svg.append(() => tooltip.node); return svg.node() }32:[{"id":"de015a109e4d82b74b6b8dc7f647f13918e2b700dcd73a5d38a54e148bfc4a71347a9e514042f4dec676de77bc3d2e56f5403bc41e3ba3d901f770c6019375f8","href":"https://static.observableusercontent.com/files/de015a109e4d82b74b6b8dc7f647f13918e2b700dcd73a5d38a54e148bfc4a71347a9e514042f4dec676de77bc3d2e56f5403bc41e3ba3d901f770c6019375f8","name":"co-est2021.csv","type":"text/csv","lastModified":1651103038096.71,"size":645814}] 2f:{"title":"US counties population change 2021","cells":[{"id":0,"value":"# US counties population change 2021","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Let's recreate the population change chart that was mentioned in a [report](https://www.census.gov/newsroom/press-releases/2022/population-estimates-counties-decrease.html) by the US Census Bureau. We'll sprinkle in a little bit of interactivity.","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"md`### Interesting facts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`* Percentage of counties experiencing natural declines: **${Number(100*natural_decrease_2021.length/total_counties).toFixed(2)}%** \n* Percentage of counties experiencing positive domestic migration: **${Number(100*net_positive_domestic_migration_length/total_counties).toFixed(2)}%**\n* These states experienced natural decrease in **all** counties: **${states_all_decline.map(([state]) => state).join(\", \")}**\n* These counties crossed the 100k population threshold in 2021: **${over_100k_threshold.map(([,cty]) => cty.CTYNAME).join(\", \")}**\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"viewof segments = Inputs.radio(new Map([[\"All Counties\", \"all\"], [\"Counties with largest domestic migration\", \"net_positive_domestic_migration\"], [\"Counties with natural decrease\", \"natural_decrease\"]]), {value: \"all\", label: \"Interesting Counties\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"pop_change = htl.html`

Population Change:

0 ? 'green' : 'red'}\">County: ${populationByCounty2021.get(results)?.county} ${populationByCounty2021.get(results)?.change.toFixed(2)}%

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"swt = Swatches(populationColor2021, { format: x => {\n switch (x) {\n case -1.6: return `Loss of ${x} or more`;\n case 1.6: return `Gain of ${x} or more`;\n default: return x\n }\n}\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`## The original`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"htl.html` $\"Where$ [Source: U.S. Census Bureau]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`# Credit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`A big thanks to [@enjalot's](https://observablehq.com/@enjalot) very helpful https://observablehq.com/@observablehq/us-geographic-data. I also used the technique described in https://observablehq.com/@mbostock/event-listeners to implement the tooltip when you hover over counties.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"populationByCounty2021 = {\n let rows = populationDataFile2021\n .map(row => {\n let change = 100 * Number(row.NPOPCHG2021) / Number(row.POPESTIMATE2020);\n return [row.STATE + row.COUNTY, { change, county: row.CTYNAME, ...row }]\n })\n // finally we return a JavaScript Map which allows us to easily lookup the population given a FIPS code\n return new Map(rows)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"over_100k_threshold = [...populationByCounty2021].filter(([k, v]) => Number(v.POPESTIMATE2020) < 100000 && Number(v.POPESTIMATE2021) > 100000 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"net_positive_domestic_migration = [...populationByCounty2021]","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"net_positive_domestic_migration_length = net_positive_domestic_migration.filter(([k, v]) => Number(v.DOMESTICMIG2021) > 0).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"states_all_decline = d3.groups(populationDataFile2021, d => d.STNAME).filter(([k,v]) => v.every(cty => Number(cty.NATURALCHG2021) < 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"total_counties = [...populationByCounty2021].length","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"d3.extent(natural_decrease_2021.map(([k,v]) => v.NATURALCHG2021))","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"natural_decrease_2021 = [...populationByCounty2021].filter(([k, v]) => Number(v.NATURALCHG2021) < 0 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`Original Data saved from https://www2.census.gov/programs-surveys/popest/datasets/2020-2021/counties/totals/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"populationDataFile2021 = (await FileAttachment(\"co-est2021.csv\").csv()).filter(cty => cty.COUNTY !== \"000\").map(cty => ({...cty, county_code: `${cty.STATE}${cty.COUNTY}`}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof results = input","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"input = htl.html``;","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true })); // Native events bubble, so we should too\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"class Tooltip {\n constructor() {\n this._content = htl.svg``;\n this.node = htl.svg`\n ${this._content}\n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(120,0)`);\n this._content.textContent = `${populationByCounty2021.get(d.id).county}: ${populationByCounty2021.get(d.id).change.toFixed(2)}%`;\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"projection = d3.geoAlbersUsa()\n .fitSize([exampleWidth - 10, exampleHeight], countyShapes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"populationColor2021 = d3.scaleSequentialQuantile(d3.interpolatePiYG).domain([ -1.6,-1.5,-.5,0.1,0.6,1.6 ]) // d3.scaleSequential(populationExtent2021, d3.interpolateGreens)","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"netColor2021 = d3.scaleSequential([-50000, 30000], d3.interpolatePiYG) // d3.scaleSequential(populationExtent2021, d3.interpolateGreens)","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"naturalDecline2021 = d3.scaleSequential([-100, 100], d3.interpolatePiYG)","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"declineColor2021 = d3.scaleSequential([-500, 0].reverse(), d3.interpolatePurples) // d3.scaleSequential(populationExtent2021, d3.interpolateGreens)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import {countyShapes} from \"@enjalot/us-county-datasets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"exampleWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"exampleHeight = width / 1.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}