2e:null 2f:["$","title",null,{"children":"Chicago Turnout Changes: Illinois 2020 Primary | Patrick Sier | Observable"}] 34:T1199,viewof mapData = { let container = html`

${mapStyles}

`; let mapContainer = html`

`; let legend = html`

Chicago Democratic Primary Turnout

Change from 2016-2020

-30% +30%

`; container.appendChild(mapContainer); container.appendChild(legend); yield container; let mapData = {}; let map = new mapboxgl.Map({ container: mapContainer, center: [-87.6597, 41.83], minZoom: 9, maxZoom: 17, zoom: 9.25, style: 'https://raw.githubusercontent.com/City-Bureau/chi-2019-runoff-maps/master/maps/style.json' }); const popupContent = feat => { return `

Ward ${feat.properties.ward}, Precinct ${feat.properties.precinct}

Turnout change: ${( feat.properties.turnout_20 - feat.properties.turnout_16 ).toFixed(1)}%

2020 turnout: ${feat.properties.turnout_20.toFixed(1)}%

2016 turnout: ${feat.properties.turnout_16.toFixed(1)}%

`; }; map.on('load', () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.addControl(new mapboxgl.FullscreenControl({ container })); map.removeLayer("precincts"); map.removeSource("precincts"); map.addSource("precincts", { type: "geojson", maxzoom: 11, generateId: true, data: precinctData, attribution: "Chicago Board of Election Commissioners" }); const expr = [ "interpolate", ["linear"], ["-", ["get", "turnout_20"], ["get", "turnout_16"]], -30, "#7b3294", 0, "#f7f7f7", 30, "#008837" ]; map.addLayer( { id: "precincts", source: "precincts", type: "fill", paint: { "fill-outline-color": [ "case", ["boolean", ["feature-state", "hover"], false], "rgba(0,0,0,0.7)", "rgba(150,150,150,0.4)" ], "fill-color": expr } }, "wards" ); let hoverPopup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); let clickPopup = new mapboxgl.Popup({ closeButton: true, closeOnClick: true }); const removePopup = popup => { map.getCanvas().style.cursor = ""; popup.remove(); }; const handleFeaturesHover = features => { if (mapData.activeFeat && mapData.activeFeat.id) { map.setFeatureState( { source: "precincts", id: mapData.activeFeat.id }, { hover: false } ); mapData.activeFeat = {}; } if (features.length > 0) { map.setFeatureState( { source: "precincts", id: features[0].id }, { hover: true } ); mapData.activeFeat = features[0]; } container.value = mapData; container.dispatchEvent(new CustomEvent("input")); }; handleFeaturesHover([]); function onMouseMove(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['precincts'] }); handleFeaturesHover(features); if (features.length > 0 && !clickPopup.isOpen()) { map.getCanvas().style.cursor = "pointer"; if (window.innerWidth >= 600) { hoverPopup .setLngLat(e.lngLat) .setHTML(popupContent(features[0])) .addTo(map); } } else { removePopup(hoverPopup); } } function onMouseOut(e) { handleFeaturesHover([]); removePopup(hoverPopup); } function onMapClick(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['precincts'] }); handleFeaturesHover(features); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; clickPopup .setLngLat(e.lngLat) .setHTML(popupContent(features[0])) .addTo(map); } } map.on("mousemove", "precincts", onMouseMove); map.on("mouseout", "precincts", onMouseOut); map.on("click", "precincts", onMapClick); }); invalidation.then(() => map.remove()); }35:T690,mapStyles = html` `36:[] 32:{"id":"d56440e105e84e38","slug":"chicago-turnout-changes-il-2020-primary","title":"Chicago Turnout Changes: Illinois 2020 Primary","thumbnail":"465ca93d15a04b82f051bb9889efbb613446bb374e21df553f137c6da16d0a20","access_level":"public","create_time":"$D2020-03-22T01:01:27.609Z","update_time":"$D2020-03-23T16:15:33.710Z","view_time":null,"first_public_time":"$D2020-03-22T01:17:38.285Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":"starter_2024"},"version":59,"publish_version":59,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b8fd2b6e2488e83","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":null}],"members":[{"type":"individual","id":"9b8fd2b6e2488e83","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"fa9f97d3be3cc07d","slug":"city-bureau","title":"City Bureau","owner":{"id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier"}},"type":"notebook","body":{"title":"Chicago Turnout Changes: Illinois 2020 Primary","cells":[{"id":0,"value":"md`# Chicago Turnout Changes: Illinois 2020 Primary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"precinctData = fetch(\n `https://gist.githubusercontent.com/pjsier/cb2e554e55726de9b0cd79602272fe6a/raw/43bffddd01388a46b8549202a3ef2f58dfb31062/chi-turnout-precincts.geojson`\n).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-array@^2.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"mapboxgl = require(\"mapbox-gl@1.8.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"