31: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()); }32:T690,mapStyles = html` `33:[] 2f:{"title":"Chicago Turnout Changes: Illinois 2020 Primary","cells":[{"id":0,"value":"md`# Chicago Turnout Changes: Illinois 2020 Primary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-array@^2.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mapboxgl = require(\"mapbox-gl@1.8.1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}