31:T522,interactiveMapEmbed = html`

Montana's 2022 votes by precinct

${viewof selRace}

${legend({ race: selRace, noteText: "" })}

Zoom in to see small urban precincts. Note that one precinct in Pondera County is split between western and eastern U.S. House districts.

${interactiveMap}

Data: Montana Secretary of State unofficial election results available ${timeFormat( updateDate )}.

`32:T1569,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': selRace.border, }) map.addSource('counties',{ 'type': 'geojson', 'data': counties, }) map.addSource('reservations',{ 'type': 'geojson', 'data': reservations, }) // map.addSource('house-districts',{ // 'type': 'geojson', // 'data': hds, // }) // 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': 'white', 'line-width': 1, }, }) 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': 'vote-district-border', 'type': 'line', 'source': 'border', 'paint': { 'line-color': '#222', 'line-width': 3, }, }) // map.addLayer({ // 'id': 'house-district-lines', // 'type': 'line', // 'source': 'house-districts', // 'paint': { // 'line-color': 'white', // 'line-width': 1, // }, // }) // for interactivity only // map.addLayer({ // 'id': 'house-district-fills', // 'type': 'fill', // 'source': 'house-districts', // 'paint': { // 'fill-color': 'white', // 'fill-opacity': 0, // }, // }) map.addLayer({ 'id': 'precinct-hover', 'type': 'line', 'source': 'precincts', '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', 'precinct-fills', (e) => { if (e.features.length > 0) { map.getCanvas().style.cursor = 'pointer'; // Hover interactivity if (hoveredDistrictId !== null) { map.setFeatureState( { source: 'precincts', id: hoveredDistrictId }, { hover: false } ) } hoveredDistrictId = e.features[0].id map.setFeatureState( { source: 'precincts', id: hoveredDistrictId }, { hover: true } ) // Tooltip const description = makeTooltip(e.features[0].properties) popup.setLngLat(e.lngLat).setHTML(description).addTo(map); } }) map.on('mouseleave', 'precinct-fills', () => { // hover effect if (hoveredDistrictId !== null) { map.setFeatureState( { source: 'precincts', 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()); }33:T55d,legend = ({ race, noteText }) => { // console.log(race.candidates) return html`

` const { county, precinct, raceLabel, totalVotes, winnerParty, winnerName, winnerMargin, winnerPercentMargin, } = data const candidates = JSON.parse(data.candidates) const nFormat = d3.format(',.0f') const pFormat = d3.format('.0%') return `` }36:T4d5,races = [ { key: 'us-house-west', label: 'U.S. House #1 (west)', border: usHouseDistricts.mt01, candidates: [ {key: 'R', name: 'Ryan Zinke (R)'}, {key: 'D', name: 'Monica Tranel (D)'}, {key: 'L', name: 'John Lamb (L)'}, ], }, {key: 'us-house-east', label: 'U.S. House #2 (east)', border: usHouseDistricts.mt02, candidates: [ {key: 'R', name: 'Matt Rosendale (R)',}, {key: 'D', name: 'Penny Ronning (D)'}, {key: 'I', name: 'Gary Buchanan (I)'}, {key: 'L', name: 'Sam Rankin (L)'}, ], }, {key: 'supco-1', label: 'MT Supreme Court #1', border: state, candidates: [ {key: 'NP1', name: 'Jim Rice',}, {key: 'NP2', name: 'Bill D\'Alton'}, ], }, {key: 'supco-2', label: 'MT Supreme Court #2', border: state, candidates: [ {key: 'NP1', name: 'Ingrid Gustafson',}, {key: 'NP2', name: 'James Brown'}, ], }, {key: 'ci-48', label: 'C-48', border: state, candidates: [ {key: 'Y', name: 'Yes on C-48'}, {key: 'N', name: 'No on C-48'}, ], }, {key: 'lr-131', label: 'LR-131', border: state, candidates: [ {key: 'Y', name: 'Yes on LR-131'}, {key: 'N', name: 'No on LR-131'}, ], }, ]37:[{"id":"8b408c27f4f99b018977e90aacd02892391336c47121bda37848fe045fada3adf8ab78e5842ea56453b9005ab4ebf8fe99ada7aa376ec05d2d9d2256b1d28a7d","href":"https://static.observableusercontent.com/files/8b408c27f4f99b018977e90aacd02892391336c47121bda37848fe045fada3adf8ab78e5842ea56453b9005ab4ebf8fe99ada7aa376ec05d2d9d2256b1d28a7d","name":"mt-2022-voting-precincts-2022@1.topojson","type":"application/octet-stream","lastModified":1669071350236.497,"size":864150},{"id":"7a53a9057acd8ad5a0cf23b49d8faa1c5877ddcc21dfb5042ab5a1fa1dc2a3c40e321e20121d65ffefaf441e088a85b5a9fd9fc44bbc238590085fc1eebe2a92","href":"https://static.observableusercontent.com/files/7a53a9057acd8ad5a0cf23b49d8faa1c5877ddcc21dfb5042ab5a1fa1dc2a3c40e321e20121d65ffefaf441e088a85b5a9fd9fc44bbc238590085fc1eebe2a92","name":"congressional-district-boundaries.json","type":"application/json","lastModified":1669153890305.575,"size":15513},{"id":"df80eaeb504dac9da283ef9a87de240488670298605137bc357980a35f73aec62c5901a3782d7abc6ceafb8fe323b947e9b0e1e823f6236bfd8adaf8cc96c6ed","href":"https://static.observableusercontent.com/files/df80eaeb504dac9da283ef9a87de240488670298605137bc357980a35f73aec62c5901a3782d7abc6ceafb8fe323b947e9b0e1e823f6236bfd8adaf8cc96c6ed","name":"nested-precinct-results-2022.zip","type":"application/zip","lastModified":1669226674669.828,"size":179478}] 2f:{"title":"Montana's 2022 election results, precinct by precinct","cells":[{"id":0,"value":"# Montana's 2022 election results, precinct by precinct\n\nPrecinct-level election results for 2022 Montana House races. Project for Montana Free Press.","pinned":false,"hidden":false,"mode":"md"},{"id":1101,"value":"updateDate = new Date(\"2022-11-23T17:09:54.353Z\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"viewof selRace = Inputs.radio(races, {label: \"Select race to map\", format: x => x.label, value: races[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"// precinctLevel22Results = FileAttachment(\"nested-precinct-results-2022@2.json\").json()\nprecinctLevel22Results = {\n const zipFiles = await FileAttachment(\"nested-precinct-results-2022.zip\").zip()\n const raw = zipFiles.file(\"nested-precinct-results-2022.json\").json()\n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"selMetric = 'winnerPercentMargin'","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"voteMarginScales = ({\n steps: {\n // \"winnerVotes\": [20, 50, 100, 250, 1000],\n // \"winnerMargin\": [20, 50, 100, 250, 500],\n // \"winnerPercent\": [0.02, 0.05, 0.1, 0.3, 0.5],\n \"winnerPercentMargin\": [0.05, 0.1, 0.2, 0.3, 0.5],\n }[selMetric],\n colorsR: ['#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d','#a50f15'],\n colorsD: ['#c6dbef','#9ecae1','#6baed6','#4292c6','#2171b5','#08519c'],\n colorsL: ['#d9d9d9','#bdbdbd','#969696','#737373','#525252','#252525'],\n colorsI: ['#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#006d2c'],\n colorsNP1: ['#dadaeb','#bcbddc','#9e9ac8','#807dba','#6a51a3','#54278f'],\n colorsNP2: ['#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603'],\n colorsY: ['#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#006d2c'],\n colorsN: ['#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603'],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"colorScales = ({\n D: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsD),\n R: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsR),\n L: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsL),\n I: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsI),\n NP1: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsNP1),\n NP2: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsNP2),\n Y: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsY),\n N: d3.scaleThreshold().domain(voteMarginScales.steps).range(voteMarginScales.colorsN),\n Tie: d => '#444',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"mapBoxGLColorSteps = (key, thresholds, colorRange) => {\n if ((colorRange.length - 1) !== thresholds.length) throw 'Threshold array must be one item smaller than colorRange array'\n let stepArray = []\n thresholds.forEach((t, i) => {\n if (i === 0) stepArray.push(colorRange[0])\n stepArray.push(t)\n stepArray.push(colorRange[i+1])\n })\n return [\n 'step',\n [\n 'get',\n key,\n ],\n ...stepArray,\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"voteMarginFill = ({\n \"fill-color\": [\n \"match\",\n [\"get\", \"winnerParty\" ],\n 'tie', '#fff',\n \n \"D\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsD),\n \"R\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsR),\n \"I\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsI),\n \n \"NP1\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsNP1),\n \"NP2\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsNP2),\n \n \"Y\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsY),\n \"N\", mapBoxGLColorSteps(selMetric, voteMarginScales.steps, voteMarginScales.colorsN),\n \n \"#ddd\"\n ],\n \"fill-opacity\": 0.6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"import { colors, historicData } from '@eidietrich/how-montanas-2014-2023-legislative-map-has-shaped-montana-h'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { counties, reservations, state } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"import { map, FeatureLayer } from \"@eidietrich/geojson-mapping-rig\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.10.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZWRpZXRyaWNobXRmcCIsImEiOiJjbDdnbWoydDUwNXllM3ZqdGNkZGthZjR5In0.3LoWfJPkcp6Typ20C3zXVg\";\n const href = await require.resolve(\"mapbox-gl@2.10.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"usHouseDistricts = {\n const raw = await FileAttachment(\"congressional-district-boundaries.json\").json()\n return {\n mt01: {...raw, features: raw.features.filter(d => d.properties.ID == 1)},\n mt02: {...raw, features: raw.features.filter(d => d.properties.ID == 2)},\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"// timeFormat = d => d3.timeFormat('%_I:%M %p %-m/%-d/%y')(d).replace('AM', 'a.m.').replace('PM', 'p.m.')\ntimeFormat = d => d3.timeFormat('%-m/%-d/%y')(d)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}