2f:T60f,interactiveMapEmbed = html`

Montana's new Legislative map

For electing members of the Montana House and Senate in elections between 2024 and 2033.

House district boundaries are shown as dashed white lines and senate districts, which include two adjacent house districts, are shown as solid white lines. Hover or tap districts for more information and zoom in to see small urban districts.

${legend}

${interactiveMap}

Data: Montana Districting and Apportionment Commission, Dave's Redistricting.

`30:T184e,interactiveMap = { let container = html`

`; // Give the container dimensions. yield container; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [-111, 46.5993736,], zoom: 5, minZoom: 4, maxZoom: 14, style: "mapbox://styles/mapbox/light-v10", scrollZoom: true, pitchWithRotate: false, dragRotate: false, }); map.addControl(new mapboxgl.NavigationControl({showCompass: false}), "top-right"); map.on('load', () => { container.value = map const bbox = [[-115.8, 44.4], [-104, 49]]; map.fitBounds(bbox, { padding: {top: 25, bottom:25, left: 40, right: 25} }); map.addSource('border',{ 'type': 'geojson', 'data': state, }) map.addSource('counties',{ 'type': 'geojson', 'data': counties, }) map.addSource('reservations',{ 'type': 'geojson', 'data': reservations, }) map.addSource('proposed-house-districts',{ 'type': 'geojson', 'data': proposedHds, }) map.addSource('proposed-senate-districts', { 'type': 'geojson', 'data': proposedSds, }) // map.addSource('house-district-labels',{ // 'type': 'geojson', // 'data': hdCentroids, // }), map.addSource('precincts',{ 'type': 'geojson', 'data': precincts, }) map.addLayer({ 'id': 'precinct-fills', 'type': 'fill', 'source': 'precincts', 'paint': { 'fill-color': voteMarginFill['fill-color'], 'fill-opacity': voteMarginFill['fill-opacity'], }, // 'filter': ['==', 'precinctHasRace', true] }) // map.addLayer({ // 'id': 'county-lines', // 'type': 'line', // 'source': 'counties', // 'paint': { // 'line-color': '#fff', // 'line-width': 1, // 'line-opacity': 0.5, // }, // }) map.addLayer({ 'id': 'reservations-line-1', 'type': 'line', 'source': 'reservations', 'paint': { 'line-color': '#e6ab02', 'line-width': 1.5, }, }) map.addLayer({ 'id': 'reservations-line-2', 'type': 'line', 'source': 'reservations', 'paint': { 'line-color': '#e6ab02', 'line-width': 0.5, 'line-offset': 2, }, }) map.addLayer({ 'id': 'house-district-lines', 'type': 'line', 'source': 'proposed-house-districts', 'paint': { 'line-color': 'white', 'line-width': 0.5, // 'line-dasharray': [2, 2], }, }) map.addLayer({ 'id': 'senate-district-lines', 'type': 'line', 'source': 'proposed-senate-districts', 'paint': { 'line-color': 'white', 'line-width': 1.5, }, }) // map.addLayer({ // 'id': 'swing-districts', // 'type': 'line', // 'source': 'proposed-house-districts', // 'paint': { // 'line-color': 'yellow', // 'line-width': 2, // }, // 'filter': ['==', 'districtClass', 'swing'] // }) map.addLayer({ 'id': 'vote-district-border', 'type': 'line', 'source': 'border', 'paint': { 'line-color': '#222', 'line-width': 3, }, }) // for interactivity only map.addLayer({ 'id': 'house-district-fills', 'type': 'fill', 'source': 'proposed-house-districts', 'paint': { 'fill-color': 'white', 'fill-opacity': 0, }, }) map.addLayer({ 'id': 'district-hover', 'type': 'line', 'source': 'proposed-house-districts', 'paint': { 'line-color': 'black', 'line-width': 2, 'line-opacity': [ 'case', ['boolean', ['feature-state', 'hover'], false], 1, 0 ], } }) // map.addLayer({ // 'id': 'labels', // 'type': 'symbol', // 'source': 'house-district-labels', // 'layout': { // 'text-field': ['get', 'district'], // 'text-font': [ // 'Open Sans Semibold', // 'Arial Unicode MS Bold', // ], // 'text-anchor': 'center', // 'text-justify': 'center', // }, // 'paint': { // 'text-color': 'white', // 'text-halo-color': 'black', // 'text-halo-width': 2, // }, // }) }) // Hover interactivity // Adapted from https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/ // And https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/ let hoveredDistrictId = null const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false, offset: 20, }); // map.on('click', 'precinct-fills', (e) => { // console.table(e.features[0].properties) // }) // feature state for the feature under the mouse. map.on('mousemove', 'house-district-fills', (e) => { if (e.features.length > 0) { map.getCanvas().style.cursor = 'pointer'; // Hover interactivity if (hoveredDistrictId !== null) { map.setFeatureState( { source: 'proposed-house-districts', id: hoveredDistrictId }, { hover: false } ) } hoveredDistrictId = e.features[0].id map.setFeatureState( { source: 'proposed-house-districts', id: hoveredDistrictId }, { hover: true } ) // Tooltip const description = makeTooltip(e.features[0].properties) popup.setLngLat(e.lngLat).setHTML(description).addTo(map); } }) map.on('mouseleave', 'house-district-fills', () => { // hover effect if (hoveredDistrictId !== null) { map.setFeatureState( { source: 'proposed-house-districts', id: hoveredDistrictId }, { hover: false } ); } hoveredDistrictId = null; // tooltip map.getCanvas().style.cursor = ''; popup.remove(); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }31:T11bf,legend = html` `32:T5a4,proposedHds = { const raw = await FileAttachment("adopted-leg-districts.topojson").json() const unpacked = topojson.feature(raw, raw.objects.hds) // return unpacked return { ...unpacked, features: unpacked.features.map(f => { const match = proposedHdsData.find(d => d.Label === f.properties.NAME) if (!match) throw `No match found for ${f.properties.NAME}` const gopLean = (match['Total_2016-2020_Comp'] > 0) ? (match['Rep_2016-2020_Comp'] - match['Dem_2016-2020_Comp']) / match['Total_2016-2020_Comp'] : 0 const majorRaceVictories = tallyMajorRaceVictories(match) let districtClass = 'swing' if (majorRaceVictories.R >= 8) districtClass = 'safe R' if (majorRaceVictories.D >= 8) districtClass = 'safe D' return { ...f, id: f.properties.NAME, properties: { // ...f.properties, key: f.properties.NAME, label: `HD ${f.properties.NAME}`, senateDistrict: `SD ${Math.ceil(+f.properties.NAME / 2)}`, deviation: f.properties.F_DEVIATIO, population: +match['Total_2020_TotalAdj'], populationVAP: +match['Total_2020_VAP'], percentVAPWhite: +match['White_2020_VAP'] / +match['Total_2020_VAP'], percentVAPNative: +match['Native_2020_VAP'] / +match['Total_2020_VAP'], majorRaceVictories, districtClass, gopLean, } } }) } }33:T66f,holdovers = [ { "district": "SD 1", "holdover": "Mike Cuffe" }, { "district": "SD 10", "holdover": "Jeremy Trebas" }, { "district": "SD 11", "holdover": "Daniel Emrich" }, { "district": "SD 12", "holdover": "Wendy McKamey" }, { "district": "SD 14", "holdover": "Russ Tempel" }, { "district": "SD 18", "holdover": "Kenneth Bogner" }, { "district": "SD 19", "holdover": "Barry Usher" }, { "district": "SD 22", "holdover": "Daniel Zolnikov" }, { "district": "SD 23", "holdover": "Kathy Kelker" }, { "district": "SD 25", "holdover": "Dennis Lenz" }, { "district": "SD 28", "holdover": "Forrest Mandeville" }, { "district": "SD 29", "holdover": "John Esp" }, { "district": "SD 31", "holdover": "Pat Flowers" }, { "district": "SD 32", "holdover": "Denise Hayman" }, { "district": "SD 34", "holdover": "Shelly Vance" }, { "district": "SD 4", "holdover": "John Fuller" }, { "district": "SD 41", "holdover": "Janet Ellis" }, { "district": "SD 42", "holdover": "Mary Ann Dunwell" }, { "district": "SD 43", "holdover": "Jason Elsworth" }, { "district": "SD 48", "holdover": "Andrea Olsen" }, { "district": "SD 49", "holdover": "Willis Curdy" }, { "district": "SD 50", "holdover": "Shane Morigeau" }, { "district": "SD 6", "holdover": "Mark Noland" }, { "district": "SD 8", "holdover": "Susan Webber" }, { "district": "SD 9", "holdover": "Bruce Gillespie" } ]34:T5da,precincts = { const raw = await FileAttachment("precincts-simplified-1.topojson").json() const geojsoned = topojson.feature(raw, raw.objects.precincts) const precinctMatches = (f, d) => { let geoDataName = String(f.properties.NAME) let matchDataName = String(d.precinct) return geoDataName === matchDataName } return { ...geojsoned, features: geojsoned.features.map((f, i) => { // const match = election2020.find(d => d.race === 'governor') // .precinctResults.filter(d => d.county.replace('&','and') === f.properties.COUNTY.replace('&','and')) // .find(d => precinctMatches(f,d)) const match = precinctsAverage .filter(d => d.county.replace('&','and') === f.properties.COUNTY.replace('&','and')) .find(d => precinctMatches(f,d)) if (!match) { console.warn(`Missing match for ${f.properties.COUNTY} ${f.properties.NAME}`) return { ...f } // Looks like Lincoln TROY COMBINED is a problem } return { id: i, // Mapbox needs this for hover effects? ...f, properties: { key: match.key, county: f.properties.COUNTY, precinct: match.precinct, election: 'average', hd: f.properties.HOUSE, sd: f.properties.SENATE, averageWinner: match.averageWinner, averageVoteMargin: match.averageVoteMargin, averagePercentMargin: match.averagePercentMargin, } } }) } }35:T78e,makeTooltip = properties => { const data = properties // console.log(data) const { label, senateDistrict, districtClass, gopLean, percentVAPNative, percentVAPWhite, population, populationVAP, } = data const majorRaceVictories = JSON.parse(data.majorRaceVictories) const nFormat = d3.format(',.0f') const pFormat = d3.format('.0%') const leanFormat = d => (d > 0) ? `R+${nFormat(d*100)}` : `D+${nFormat(d*-100)}` const holdover = holdovers.find(d => d.district === senateDistrict) || {} return `