2e:null 2f:["$","title",null,{"children":"US House 3rd District Democratic Primary Chicago Vote | Patrick Sier | Observable"}] 34: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()); }35:[] 32:{"id":"927f87e39f2d8940","slug":"us-house-3rd-district-democratic-primary-chicago-vote","title":"US House 3rd District Democratic Primary Chicago Vote","thumbnail":"d7ea2a82a4776bd3375f36f853ae5406cdeb00ce6165e5724444d44940f114d0","access_level":"public","create_time":"$D2020-03-19T16:40:55.398Z","update_time":"$D2020-12-07T00:27:15.452Z","view_time":null,"first_public_time":"$D2020-03-19T18:50:17.526Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":"starter_2024"},"version":239,"publish_version":239,"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":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof newmanColor = color({\n value: \"#0571b0\",\n title: \"Marie Newman\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof lipinskiColor = color({\n value: \"#ca0020\",\n title: \"Dan Lipinski\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof noWinnerColor = color({\n value: \"#f7f7f7\",\n title: \"No winner\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"getTooltipLabel = display => {\n return display === `diff` ? `% Difference in 2020` : `20${display}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import { select, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mapboxgl = require(\"mapbox-gl@0.49\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"