31:T12a7,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, style: "mapbox://styles/mapbox/light-v10", scrollZoom: true, pitchWithRotate: false, dragRotate: false, }); map.addControl(new mapboxgl.NavigationControl({showCompass: false}), "top-right"); map.on('load', () => { const bbox = [[-115.4, 44.4], [-104, 49]]; map.fitBounds(bbox, { padding: {top: 25, bottom:25, left: 40, right: 25} }); 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'], }, }) 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': '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': 'house-district-hover', 'type': 'line', 'source': '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: 'house-districts', id: hoveredDistrictId }, { hover: false } ) } hoveredDistrictId = e.features[0].id map.setFeatureState( { source: '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: '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()); }32:T11bf,legend = html` `33: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, } } }) } }34:Ta3a,makeTooltip = properties => { const data = properties // conversions for nesting that seems to be stringified somehow data.davesRating = JSON.parse(data.davesRating) data.legislativeElections = JSON.parse(data.legislativeElections) data.statewideElections = JSON.parse(data.statewideElections) data.statewideWins = JSON.parse(data.statewideWins) data.population = JSON.parse(data.population) // console.log(properties) const leanFormat = d => d3.format('+.0f')(d*100) const pFormat = d3.format('.1%') const winsNumber = (value, party) => (value > 0) ? `${value} ${party} win${(value !== 1) ? 's' : ''}` : `${value} ${party} wins` return `` }35:T799,precinctsAverage = { // Load from cache return FileAttachment("precinctsAverage.json").json() // // Calculate manually // // Average results of statewide races in 2016 and 2020 // const includeRacesFor2020 = ["president", "governor", "ussen", "usrep", "ag", "sos", "opi", "auditor"] // const includeRacesFor2016 = ["president", "governor", "usrep", "ag", "sos", "opi", "auditor"] // return precinctKeys2020.map(key => { // const results2020 = election2020 // .filter(d => includeRacesFor2020.includes(d.race)) // .map(race => race.precinctResults.find(d => d.key === key)) // const results2016 = election2020 // .filter(d => includeRacesFor2016.includes(d.race)) // .map(race => race.precinctResults.find(d => d.key === key)) // const averages = results2020.concat(results2016) // const totalRVotes = d3.sum(averages, d => d.RVotes) // const totalDVotes = d3.sum(averages, d => d.DVotes) // const totalLVotes = d3.sum(averages, d => d.LVotes) // const totalVotes = totalRVotes + totalDVotes + totalLVotes // const sorted = [ // {party: 'R', totalVotes: totalRVotes}, // {party: 'D', totalVotes: totalDVotes}, // {party: 'L', totalVotes: totalLVotes}, // ].sort((a,b) => b.totalVotes - a.totalVotes) // return { // // averages, // key: averages[0].key, // county: averages[0].county, // precinct: averages[0].precinct, // totalRVotes, // RPercent: totalRVotes / totalVotes, // totalDVotes, // DPercent: totalDVotes / totalVotes, // totalLVotes, // LPercent: totalLVotes / totalVotes, // avgVotesPerRace: Math.round(totalVotes / averages.length), // averageWinner: sorted[0].party, // averageVoteMargin: sorted[0].totalVotes - sorted[1].totalVotes, // averagePercentMargin: (sorted[0].totalVotes - sorted[1].totalVotes) / totalVotes, // } // }) }36:[{"id":"3522c1d44384f85ca71b4ae010f9d4495625185cbe5a5f3f7cded09151cd554f6d9bf4132959cfd0aafb874611f41c649a639ad2d5ef9d7fbdacff3f74404b2c","href":"https://static.observableusercontent.com/files/3522c1d44384f85ca71b4ae010f9d4495625185cbe5a5f3f7cded09151cd554f6d9bf4132959cfd0aafb874611f41c649a639ad2d5ef9d7fbdacff3f74404b2c","name":"combined-2020-gen.json","type":"application/json","lastModified":1661891947036.977,"size":1928130},{"id":"a6e38a89bcc0c60a20521fea210d63e65097624eb2e015da4d105d99891ebc364ac1a894404402aa9b83b9db9b8f4eac2c6361a8e3ec9dfedbc58b127dd6cd4a","href":"https://static.observableusercontent.com/files/a6e38a89bcc0c60a20521fea210d63e65097624eb2e015da4d105d99891ebc364ac1a894404402aa9b83b9db9b8f4eac2c6361a8e3ec9dfedbc58b127dd6cd4a","name":"precincts-simplified@1.topojson","type":"application/octet-stream","lastModified":1663796076839.721,"size":467734},{"id":"8a9a1b6798139cb138f9f0bf3bc7e708484e4cdd9751f5658880cbaa742948787a4f2fb5ce367b750fb3d5ca07d973c164f3dabf6d6050655d55007333538ed4","href":"https://static.observableusercontent.com/files/8a9a1b6798139cb138f9f0bf3bc7e708484e4cdd9751f5658880cbaa742948787a4f2fb5ce367b750fb3d5ca07d973c164f3dabf6d6050655d55007333538ed4","name":"precinctsAverage.json","type":"application/json","lastModified":1663779182469.503,"size":237589}] 2f:{"title":"Montana 2014-2023 House Districts interactive map","cells":[{"id":0,"value":"# Montana 2014-2023 House Districts interactive map\n\nHouse districts overlaid on precinct-level election results from 2016 and 2020 statewide races.","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"interactiveMapEmbed = html`

\n \n

The 2014-2023 Montana House map

${legend}

Zoom in to see small urban districts.

\n ${interactiveMap}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"hds = {\n const topo = await FileAttachment(\"precincts-simplified@1.topojson\").json()\n const geojsoned = topojson.feature(topo, topo.objects.precincts)\n\n const districts = [...Array(100).keys()].map(d => String(d+1)) \n\n return {\n type: 'FeatureCollection',\n features: districts.map(id => {\n const match = historicData.find(d => +d.number === +id)\n return {\n type: 'Feature',\n id, // Mapbox needs this for hover event tracking\n geometry: topojson.merge(topo, topo.objects.precincts.geometries.filter(d => d.properties.HOUSE === id)),\n properties: {\n // id,\n // number: id,\n ...match,\n }\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"hdCentroids = ({\n type: 'FeatureCollection',\n features: hds.features.map(f => ({\n ...turf.centerOfMass(f),\n properties: {\n number: f.properties.number,\n district: `${f.properties.number}`,\n },\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"voteMarginScales = ({\n // steps: [50, 100, 200, 500, 1000],\n steps: [0.05, 0.1, 0.2, 0.3, 0.5],\n colorsR: ['#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d','#a50f15'],\n colorsD: ['#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c'],\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})","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\", \"averageWinner\" ],\n \"D\", mapBoxGLColorSteps('averagePercentMargin', voteMarginScales.steps, voteMarginScales.colorsD),\n \"R\", mapBoxGLColorSteps('averagePercentMargin', voteMarginScales.steps, voteMarginScales.colorsR),\n \"#666\"\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 } from '@eidietrich/geojson-mapping-rig'","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"turf = require(\"@turf/turf@6\")","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"}],"files":"$W36","stdlib":"1","titling":"auto"}