31:T4b1,renderTooltip = (tooltip, event) => { // Sample tooltip generation function const data = event.target.__data__ const d = data.properties const numF = d3.format(',.0f') const changeF = d3.format('+,.0f') const perChangeF = d3.format('+.1%') const colorText = (d, key, label) => { const color = populationGrowthPercentColor(d[`per_${key}`]) const abs = changeF(d[key]) const per = perChangeF(d[`per_${key}`]) return `

${abs} (${per}) ${label}

` } tooltip.html(`

${d.county.toUpperCase()} COUNTY

${numF(d.pop_2021)} people in 2021

${colorText(d, 'change', 'vs. 2020')}

Components

${colorText(d, 'migration', 'from migration')} ${colorText(d, 'births', 'from births')} ${colorText(d, 'deaths', 'from deaths')}

`) const toolTipStyle = tooltipDefaultStyle // object Object.keys(toolTipStyle).forEach(key => { tooltip.style(key, toolTipStyle[key]) }) tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px") }32:T42b,style = html` `33:T6d9,migrationMap = () => map({ width: safeGraphicWidth(), height: safeGraphicWidth()*0.6, margin: {top: 10, left: 10, right: 10, bottom: 10}, projection: d3.geoAlbers().rotate([110, 0, 0]), tooltipEnabled: true, layers: [ new FeatureLayer({ geodata: countiesMerged, // geojson featureStyle: { // stroke: d => '#e3e2de', // stroke: d => 'white', // fill: d => growthPercent(d.per_change), fill: d => '#e3e2de', strokeWidth: d => 1, zIndex: d => 1, } }), new FeatureLayer({ geodata: lakes, featureStyle: { fill: d => '#fff', opacity: d => 1, stroke: d => 'none', } }), // new FeatureLayer({ // geodata: urbanAreas, // featureStyle: { // fill: d => '#000', // opacity: d => 0.4, // stroke: d => 'none', // } // }), new FeatureLayer({ geodata: highways, featureStyle: { fill: d => 'none', stroke: d => '#000', opacity: d => 0.2, } }), new PointLayer({ geodata: countiesMerged, renderTooltip: renderTooltip, featureStyle: { radius: d => populationGrowthSizeScale(Math.abs(d[selView])), fill: d => populationGrowthPercentColor(d[`per_${selView}`]), fillOpacity: d => 0.7, // stroke: d => '#CA532B', stroke: d => populationGrowthPercentColor(d[`per_${selView}`]), strokeWidth: d => 1, }, }), new PointLayer({ geodata: cities, labelStyle: { text: d => (width > 500) ? d.NAME : '', dx: d => d.offset ? d.offset[0] : '0.5em', dy: d => d.offset ? d.offset[1] : '0.5em', }, }), ], })34:T53d,class ResponsiveTable { constructor(data, opts) { console.log(data) const perF = d3.format('.1%') const numF = d3.format(',.0f') const changeF = d3.format('+,.0f') const keys = Object.keys(data[0]) // assume consistent data size const headers = `${keys.map(key => `${key}`).join('')}` const rows = data.map(row => { const color = populationGrowthPercentColor(row['Annual Growth']) const textColor = (row['Annual Growth'] > 0.03) ? 'white' : 'black' return ` ${row['County']} ${perF(row['Annual Growth'])} ${numF(row['2021 Population'])} ${changeF(row['Population Change'])} ${changeF(row['Net Migration'])} ` }) return html`

${observableDefaultTableCss} ${tableStyle}

U.S. Census Bureau-estimated population change for Montana Counties, 2020-2021

${headers}${rows.join('')}

` } }35:[{"id":"b149d262cb90fe189c6c4b156ae3dbeb55884c4bd274c7fc3e22550e61335c08384887bb074971f9bfb3d4b4907066bab585a7926dd6288f5ccbbf4720d35ddf","href":"https://static.observableusercontent.com/files/b149d262cb90fe189c6c4b156ae3dbeb55884c4bd274c7fc3e22550e61335c08384887bb074971f9bfb3d4b4907066bab585a7926dd6288f5ccbbf4720d35ddf","name":"mt-2020-to-2021-pop-change-by-county-census@1.csv","type":"text/csv","lastModified":1648500410267.469,"size":3753}] 2f:{"title":"Montana County population change, 2020 to 2021","cells":[{"id":0,"value":"# Montana County population change, 2020 to 2021\n\nData: [U.S. Census Bureau](https://www.census.gov/data/tables/time-series/demo/popest/2020s-counties-total.html)","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"mapEmbed = html`

\n ${style}\n

Montana's 2020–2021 population shifts

${viewof selView}

${colorLegend}${sizeLegend}

\n ${migrationMap()}\n

Data: U.S. Census Bureau. Graphic: Eric Dietrich / MTFP

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"viewof selView = Inputs.radio([\n {value: 'change', label: 'Overall change' },\n {value: 'migration', label: 'Net migration' },\n {value: 'births', label: 'Births' },\n {value: 'deaths', label: 'Deaths' },\n {value: 'natural_change', label: 'Net births' },\n ], {\n value: 'change',\n valueof: d => d.value,\n // label: html`Show:`,\n format: d => html`${d.label}`,\n \n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"colorLegend = Legend(populationGrowthPercentColor, {\n title: \"Percent change\",\n tickFormat: '.01%',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"sizeLegend = {\n\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"// svgMap = migrationMap()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"countyData = {\n const raw = await FileAttachment(\"mt-2020-to-2021-pop-change-by-county-census@1.csv\").csv()\n const cleaned = raw.map(d => {\n return {\n county: d.geography.replace(\".\",\"\").replace(\" County, Montana\",\"\"),\n pop_2020: +d.july_1_2020_pop,\n pop_2021: +d.july_1_2021_pop,\n change: +d.change,\n per_change: +d.change / +d.july_1_2020_pop,\n births: +d.births,\n deaths: +d.deaths*-1,\n per_births: +d.births / +d.july_1_2020_pop,\n per_deaths: +d.deaths*-1 / +d.july_1_2020_pop,\n natural_change: +d.births - +d.deaths,\n per_natural_change: (+d.births - +d.deaths) / +d.july_1_2020_pop,\n migration: +d.net_migration,\n per_migration: +d.net_migration / +d.july_1_2020_pop,\n }\n \n })\n // return raw\n return cleaned\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"countiesMerged = joinFlatDataToGeo({\n geoData: counties,\n geoAccessor: d => d.NAME,\n flatData: countyData,\n flatAccessor: d => d.county.toUpperCase(),\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"stateWide = countyData.find(d => d.county === 'Montana')","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"populationGrowthPercentColor = d3.scaleThreshold()\n .domain([-0.03, -0.01, 0, 0.01, 0.03, 0.05])\n .range(['#b35806','#e08214','#fdb863','#b8e186','#7fbc41','#4d9221','#276419'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"populationGrowthSizeScale = d3.scaleSqrt()\n // .domain([0,50000])\n .domain([0,20000])\n .range([1,(safeGraphicWidth() > 400) ? 120 : 50,])","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"embedTable = new ResponsiveTable(countyData.sort((a,b) => (a.county === 'Montana') ? 1 : b.per_change - a.per_change).map(d => {\n return {\n 'County': d.county,\n 'Annual Growth': d.per_change,\n '2021 Population': d.pop_2021,\n 'Population Change': d.change,\n 'Net Migration': d.migration,\n // 'Births': d.births,\n // 'Deaths': d.deaths,\n }\n}), {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"tableStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"observableDefaultTableCss = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"// Sized for one-column layout on MTFP site\nsafeGraphicWidth = () => Math.min(width - 60, 700)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { map, FeatureLayer, PointLayer, joinFlatDataToGeo, tooltipDefaultStyle } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { counties, cities, highways, lakes, urbanAreas } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}