31:Td9a,viewof activeFeat = { let container = html`

`; yield container; let activeFeature = {}; let map = new mapboxgl.Map({ container, center: [-87.6597, 41.77], minZoom: 9, maxZoom: 17, zoom: 10.35, style: 'https://raw.githubusercontent.com/City-Bureau/chi-2019-runoff-maps/master/maps/style.json' }); const fillColorExpr = () => { const interpColor = (color, prop) => [ "interpolate", ["linear"], ["get", prop], 45, noWinnerColor, 80, color ]; if (mapDisplay === `18`) { return [ "case", [">", ["get", "newman_18_pct"], ["get", "lipinski_18_pct"]], interpColor(newmanColor, "newman_18_pct"), interpColor(lipinskiColor, "lipinski_18_pct") ]; } else if (mapDisplay === `diff`) { return [ "interpolate", ["linear"], ["get", "newman_pct_diff"], -25, lipinskiColor, 0, noWinnerColor, 25, newmanColor ]; } else { return [ "case", [">", ["get", "newman_20_pct"], ["get", "lipinski_20_pct"]], interpColor(newmanColor, "newman_20_pct"), interpColor(lipinskiColor, "lipinski_20_pct") ]; } }; map.on('load', () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.addSource("precincts-data", { type: "geojson", data: precincts, generateId: true }); map.addLayer( { id: "precincts-data", source: "precincts-data", type: "fill", paint: { "fill-outline-color": [ "case", ["boolean", ["feature-state", "hover"], false], "#ff0000", "rgba(150,150,150,0.5)" ], "fill-color": fillColorExpr() } }, "wards" ); const handleFeaturesHover = features => { if (activeFeature && activeFeature.id) { map.setFeatureState( { source: "precincts-data", id: activeFeature.id }, { hover: false } ); activeFeature = {}; } if (features.length > 0) { map.setFeatureState( { source: "precincts-data", id: features[0].id }, { hover: true } ); activeFeature = features[0]; } container.value = activeFeature; container.dispatchEvent(new CustomEvent("input")); }; handleFeaturesHover([]); function onMouseMove(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['precincts-data'] }); handleFeaturesHover(features); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; } else { map.getCanvas().style.cursor = null; } } function onMouseOut(e) { handleFeaturesHover([]); map.getCanvas().style.cursor = null; } function onMapClick(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['precincts-data'] }); handleFeaturesHover(features); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; } else { map.getCanvas().style.cursor = null; } } map.on("mousemove", "precincts-data", onMouseMove); map.on("mouseout", "precincts-data", onMouseOut); map.on("click", "precincts-data", onMapClick); }); invalidation.then(() => map.remove()); }32:[] 2f:{"title":"US House 3rd District Democratic Primary Chicago Vote","cells":[{"id":0,"value":"md`# US House 3rd District Democratic Primary Chicago Vote\n\n2018 and 2020 results from Chicago precincts for the Democratic primary for Illinois' 3rd District US House seat\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof mapDisplay = select({\n title: \"Map display\",\n options: [\n { label: \"% Change\", value: \"diff\" },\n { label: \"2020 Primary\", value: \"20\" },\n { label: \"2018 Primary\", value: \"18\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`\n\n

\n Democratic Primary Results: ${getTooltipLabel(mapDisplay)}\n

\n ${getTooltipWardPrecinct(activeFeat)}\n

\nNewman: ${getTooltipDisplay(activeFeat, mapDisplay, 'newman')}\n

\nLipinski: ${getTooltipDisplay(\n activeFeat,\n mapDisplay,\n 'lipinski'\n)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof newmanColor = color({\n value: \"#0571b0\",\n title: \"Marie Newman\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof lipinskiColor = color({\n value: \"#ca0020\",\n title: \"Dan Lipinski\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof noWinnerColor = color({\n value: \"#f7f7f7\",\n title: \"No winner\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"getTooltipDisplay = (feat, display, candidate) => {\n if (!feat.properties) {\n return ``;\n }\n const { properties } = feat;\n\n if (mapDisplay === `diff`) {\n return `${properties[`${candidate}_pct_diff`]}%`;\n } else {\n return `${properties[`${candidate}_${display}_pct`]}%, ${properties[\n `${candidate}_${display}`\n ].toLocaleString()}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"getTooltipLabel = display => {\n return display === `diff` ? `% Difference in 2020` : `20${display}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"getTooltipWardPrecinct = feat => {\n if (feat.properties) {\n const { ward, precinct } = feat.properties;\n return `Ward ${ward}, Precinct: ${precinct}`;\n }\n return `Hover over the map for details`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"import { select, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"precincts = fetch(\n `https://gist.githubusercontent.com/pjsier/6f8c8a6f5c57c931ab9e3dcd6d9549d2/raw/2018b87efc485d25e6e3a8e772c714e5b54af25b/chi-3rd-dist-precincts.geojson`\n).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"mapboxgl = require(\"mapbox-gl@0.49\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}