31:T678,countyMap = (key, format) => map({ width: 600, height: 400, margin: {top: 10, left: 10, right: 10, bottom: 10}, projection: d3.geoAlbers().rotate([110, 0, 0]), tooltipEnabled: true, layers: [ new FeatureLayer({ geodata: merged, // geojson featureStyle: { // fill: d => '#ddd', fill: d => changeColor(d[key]), stroke: d => 'white', strokeWidth: d => 1, } }), new FeatureLayer({ geodata: lakes, featureStyle: { fill: d => '#fff', opacity: d => 1, stroke: d => 'none', } }), // new FeatureLayer({ // geodata: highways, // featureStyle: { // fill: d => 'none', // stroke: d => '#666', // opacity: d => 0.5, // } // }), new PointLayer({ geodata: merged, featureStyle: { fill: d => 'none', stroke: d => 'none', // radius: d => 14, }, labelStyle: { text: d => d3.format(format)(d[key]), textAnchor: d => 'middle', fontWeight: d => 'bold', dx: d => 0, dy: d => '0.5em', }, }), new PointLayer({ geodata: cities, featureStyle: { fill: d => '#444', }, 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', fill: d => '#222' }, }), new FeatureLayer({ geodata: state, featureStyle: { fill: d => 'none', stroke: d => '#000', strokeWidth: d => 1.5, } }), ], })32:Ta51,countyMediansTable = Table({ data: history.sort((a,b) => b.median_25 - a.median_25), style: tableStyle, headers: [ { key: 'county', name: 'County', format: d => `

${d.replace('And','and')}

`, // pass through as string; this can also take generated HTML for complex text styling and/or SVG icons // TODO -- add cellFormat to allow for column-specific styling w/out having to muck w/ CSS class: 'label', sortable: true, showOnDesktop: true, // Is there a way to allow custom column sorting for mobile? showOnMobile: true }, // { // key: 'median_21', // name: 'Median home value 2021', // format: d => d3.format('$.3s')(d), // format to money text // sortable: true, // showOnDesktop: true, // showOnMobile: true // }, // { // key: 'median_23', // name: 'Median home value 2023', // format: d => d3.format('$.3s')(d), // format to money text // sortable: true, // showOnDesktop: true, // showOnMobile: true // }, { key: 'median_25', name: 'Median home value 2025', format: d => `

${d3.format('$.3s')(d)}

`, // format to money text class: 'number', sortable: true, sortable: true, showOnDesktop: true, showOnMobile: true }, { key: 'change_reappraisal_25', name: 'Two-year change', format: d => `

${d3.format('+.0%')(d)}

`, // format to money text class: 'number', sortable: true, sortable: true, showOnDesktop: true, showOnMobile: true }, { key: 'change_four_year', name: 'Four-year change', format: d => `

${d3.format('+.0%')(d)}

`, // format to money text class: 'number', sortable: true, sortable: true, showOnDesktop: true, showOnMobile: true } ], opts: { title: 'Median home value change by Montana county', dataNote: '', sourceNote: 'Data: Montana Department of Revenue', creditNote: 'Graphic: Eric Dietrich/MTFP', searchPlaceholder: 'Search county, e.g. "Wheatland"', searchFunction: (query) => history.filter((row) => row.county?.toLowerCase().includes(query) ), rowsPerPage: 25, } })33:T1940,Table = (config) => { const {data, style, headers, opts } = config /* NOTES Keys in data should match key in headers Feed in data as numeric values and then format to string (allows easy sorting) */ const headersDesktop = headers.filter(d => d.showOnDesktop) const headersMobile = headers.filter(d => d.showOnMobile) const table = (data) => { /* // Start of effort to translate this from D3 construction to a simple template // Eric sketched this out and realized it makes some of the interactive stuff harder const tableMarkup = `

${opts.title}

${opts.dataNote}

${opts.sourceNote}

${opts.creditNote}

` */ const container = document.createElement('div') const titleHeading = html`

${opts.title}

` const dataNote = html`

${opts.dataNote}

` const sourceNote = html`

${opts.sourceNote}

` const creditNote = html`

${opts.creditNote}

` const isMobileView = () => window.innerWidth <= 768; container.id = 'table-container'; container.append(titleHeading); container.append(dataNote); const searchInput = document.createElement('input'); searchInput.setAttribute('placeholder', opts.searchPlaceholder); searchInput.className = 'search-input'; const table = document.createElement('table'); const thead = document.createElement('thead'); const tbody = document.createElement('tbody'); const pagination = document.createElement('div'); pagination.className = 'pagination-div'; table.id = 'table'; table.style.width = '100%'; table.style.borderCollapse = 'separate'; table.style.borderSpacing = '0'; const tableWrapper = document.createElement('div'); tableWrapper.className = 'responsive-table-wrapper'; tableWrapper.appendChild(table); container.append(searchInput, tableWrapper, pagination, sourceNote, creditNote); table.append(thead, tbody); const rowsPerPage = opts.rowsPerPage; // Table state let currentPage = 1; let filteredData = data; let isMobile = isMobileView(); let headers = isMobile ? headersMobile : headersDesktop; // Table functions const renderTableHeaders = () => { thead.innerHTML = ''; const tr = document.createElement('tr'); headers.forEach((header) => { const th = document.createElement('th'); th.innerHTML = header.name; th.className = `${header.key}-header`; if (header.sortable) { th.style.cursor = 'pointer'; const sortOn = header.sortKey ?? header.key; th.addEventListener('click', () => sortTable(sortOn)); const arrow = document.createElement('span'); arrow.textContent = ' ▲▼'; arrow.style.fontSize = isMobile ? '13px' : '14px'; arrow.style.marginTop = '2px'; th.appendChild(arrow); } // Optional: center all header content if this is the combined column if (header.key === 'combinedPass') { th.style.textAlign = 'center'; } tr.appendChild(th); }); thead.appendChild(tr); }; const renderTableRows = (dataSlice) => { tbody.innerHTML = ''; dataSlice.forEach((row) => { const tr = document.createElement('tr'); headers.forEach((header) => { const td = document.createElement('td'); let value = row[header.key]; td.innerHTML = `${header.format(value)}` td.className = `${header.class}`; tr.appendChild(td); }); tbody.appendChild(tr); }); }; const updatePagination = (totalItems) => { pagination.innerHTML = ''; const totalPages = Math.ceil(totalItems / rowsPerPage); for (let i = 1; i <= totalPages; i++) { const btn = document.createElement('button'); btn.textContent = i; btn.className = i === currentPage ? 'active' : ''; btn.addEventListener('click', () => { currentPage = i; updateTable(); }); pagination.appendChild(btn); } }; const updateTable = () => { isMobile = isMobileView(); headers = isMobile ? headersMobile : headersDesktop; const start = (currentPage - 1) * rowsPerPage; const end = start + rowsPerPage; const pageData = filteredData.slice(start, end); renderTableHeaders(); tableWrapper.scrollIntoView({ behavior: 'smooth' }); renderTableRows(pageData); updatePagination(filteredData.length); }; const sortTable = (key) => { const order = (sortTable.lastOrder = sortTable.lastOrder === 'asc' ? 'desc' : 'asc'); filteredData.sort((a, b) => { let aVal = a[key] ?? ''; let bVal = b[key] ?? ''; // This shouldn't be necessary if we pass in data in numeric form and then apply formatting via a function // if (isNumericColumn(key)) { // aVal = parseFloat(String(aVal).replace(/,/g, '')) || 0; // Remove commas and convert to number // bVal = parseFloat(String(bVal).replace(/,/g, '')) || 0; // } return aVal < bVal ? (order === 'asc' ? -1 : 1) : aVal > bVal ? (order === 'asc' ? 1 : -1) : 0; }); currentPage = 1; updateTable(); }; searchInput.addEventListener('input', (e) => { const query = e.target.value.toLowerCase().trim() console.log('x', query) filteredData = opts.searchFunction(query); currentPage = 1; updateTable(); }); window.addEventListener('resize', () => { const wasMobile = isMobile; isMobile = isMobileView(); if (wasMobile !== isMobile) { updateTable(); } }); updateTable(); return container; }; return table(data) }34:T12cb,tableStyle = ``35:[{"id":"acc84a259ae42ead48a4bd752db9a6c0c6eda5f99bc7cc299ff3b21e2d7930ee7fa0ffb252cca631dce9e24c8afe8643083d8af547dff068c6e16f03106efb1f","href":"https://static.observableusercontent.com/files/acc84a259ae42ead48a4bd752db9a6c0c6eda5f99bc7cc299ff3b21e2d7930ee7fa0ffb252cca631dce9e24c8afe8643083d8af547dff068c6e16f03106efb1f","name":"mt-property-medians-2025-reappraisals@1.csv","type":"text/csv","lastModified":1752168666674.171,"size":2314},{"id":"fc7d3d2be48076aab7043437415db8494bc306e01657ef807f187130ff572ddb019a44bbf019b1630ebcd8920e5f6f221a5d402273108341c62dbb55a2292d64","href":"https://static.observableusercontent.com/files/fc7d3d2be48076aab7043437415db8494bc306e01657ef807f187130ff572ddb019a44bbf019b1630ebcd8920e5f6f221a5d402273108341c62dbb55a2292d64","name":"mt-county-level-residential-median-value-history.csv","type":"text/csv","lastModified":1752523061081.118,"size":3084}] 2f:{"title":"Montana tax assessment value changes, 2025 reappraisal cycle","cells":[{"id":0,"value":"# Montana tax assessment value changes, 2025 reappraisal cycle\n\nVisual for a Montana Free Press story. Data requested from Montana Department of Revenue.","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"history = {\n const raw = await FileAttachment(\"mt-county-level-residential-median-value-history.csv\").csv()\n\n const clean = raw.map(d => {\n return {\n ...d,\n median_21: +d.median_21,\n median_22: +d.median_22,\n median_23: +d.median_23,\n median_24: +d.median_24,\n median_25: +d.median_25,\n change_reappraisal_23: d.median_23 / d.median_21 - 1,\n change_reappraisal_25: d.median_25 / d.median_23 - 1,\n change_four_year: d.median_25 / d.median_21 - 1\n }\n })\n return clean\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"historyStatewide = [\n {\n \"year\": \"2021\",\n \"median\": 228000\n },\n {\n \"year\": \"2022\",\n \"median\": 231000\n },\n {\n \"year\": \"2023\",\n \"median\": 308000\n },\n {\n \"year\": \"2024\",\n \"median\": 311000\n },\n {\n \"year\": \"2025\",\n \"median\": 378000\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"// merge flat data to county features for mapping\nmerged = ({\n ...counties,\n features: counties.features.map(f => {\n const match = history.find(d => d.county.toUpperCase() === f.properties.NAME)\n if (!match) throw `Missing match ${f.properties.NAME}`\n return {\n ...f,\n properties: match,\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"changeColor = d3.scaleThreshold()\n .domain([0.1,0.2,0.3,0.5,0.75,1])\n .range(['#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"medianColor = d3.scaleThreshold()\n .domain([50e3, 100e3, 200e3, 300e3, 400e3, 500e3, 600e3])\n .range(['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"Plot.plot({\n height: 200,\n width: 400,\n marginLeft: 60,\n y: {\n grid: true,\n domain: [0, 400000],\n tickFormat: '$,.0f',\n label: 'Median Montana home value'\n },\n x: {\n label: 'Tax year'\n },\n marks: [\n Plot.barY(historyStatewide, {x: \"year\", y: \"median\", fill: '#cebc9f'}),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"reappraisal_23 = countyMap('change_reappraisal_23', '+.0%')","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"reappraisal_25 = countyMap('change_reappraisal_25', '+.0%')","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"reappraisal_combined = countyMap('change_four_year', '+.0%')","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { map, FeatureLayer, PointLayer, tooltipDefaultStyle } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { state, counties, cities, highways, lakes } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"countyTableEmbed = html`\n ${tableStyle}\n ${countyMediansTable}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}