2d:null 2e:["$","title",null,{"children":"How Chicago Voted in the 2020 General Election | Patrick Sier | Observable"}] 33:T1598,viewof mapData = { let container = html`

${mapStyles}

`; let mapContainer = html`

`; let legend = html`

2020 Election, Chicago Results

${ELECTIONS["251"].races[election]}

0% ${dataDomain[1].toFixed(0)}%

${ +election >= 103 && +election <= 164 ? `Based on 60% threshold for retention` : `` } ${getDataCols(csvData[0]) .filter((c) => !LEGEND_HIDE.includes(c)) .map((c) => c.replace(" Percent", "")) .map( (candidate, idx) => html`

${ candidate in DISPLAY_OVERRIDE ? DISPLAY_OVERRIDE[candidate] : candidate }

` )}

Unofficial results as of ${LAST_UPDATED.toLocaleDateString( undefined, { month: "long", day: "numeric", year: "numeric" } )}

`; 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, hash: true, style: "https://raw.githubusercontent.com/City-Bureau/chi-2019-runoff-maps/master/maps/style.json" }); const popupContent = (feat) => { const featData = csvDataMap[feat.properties.id]; const dataCols = getDataCols(featData); const candidateData = dataCols.map((c) => ({ label: c.replace(" Percent", ""), value: featData[c] })); const sortedData = candidateData.sort((a, b) => d3.descending(a.value, b.value) ); return `

Ward ${featData.ward}, Precinct ${featData.precinct}

${sortedData .map( ({ label, value }) => `

${ label in DISPLAY_OVERRIDE ? DISPLAY_OVERRIDE[label] : label }: ${value}%, ${featData[label].toLocaleString()}

` ) .join(``)} `; }; map.once("styledata", () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.addControl(new mapboxgl.FullscreenControl({ container })); map.removeLayer("precincts"); map.removeSource("precincts"); map.addSource("precincts", { type: "vector", maxzoom: 11, tiles: [ "https://projects.citybureau.org/chicago-2020-general-election/tiles/precincts/{z}/{x}/{y}.pbf" ], attribution: 'Chicago Board of Election Commissioners' }); map.addLayer( { id: "precincts", source: "precincts", "source-layer": "precincts", type: "fill", filter: filterExpression, paint: { "fill-outline-color": [ "case", ["boolean", ["feature-state", "hover"], false], "rgba(0,0,0,0.7)", "rgba(150,150,150,0.2)" ], "fill-color": dataJoinExpression } }, "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", sourceLayer: "precincts", id: mapData.activeFeat.id }, { hover: false } ); mapData.activeFeat = {}; } if (features.length > 0) { map.setFeatureState( { source: "precincts", sourceLayer: "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()); }34:T88f,mapStyles = html` `35:T1cd9,ELECTIONS = ({ "251": { label: "General Election", races: { "0": "Turnout", "10": "Proposed Amendment to the Illinois Constitution", "11": "President & Vice President, U.S.", "12": "Senator, U.S.", "13": "U.S. Representative, 1st District", "14": "U.S. Representative, 2nd District", "15": "U.S. Representative, 3rd District", "16": "U.S. Representative, 4th District", "17": "U.S. Representative, 5th District", "18": "U.S. Representative, 7th District", "19": "U.S. Representative, 9th District", "20": "State Senator, 1st District 4yr", "21": "State Senator, 4th District 4yr", "22": "State Senator, 6th District 2yr", "23": "State Senator, 7th District 4yr", "24": "State Senator, 10th District 4yr", "25": "State Senator, 11th District 2yr", "26": "State Senator, 13th District 4yr", "27": "State Senator, 16th District 4yr", "28": "State Senator, 28th District 4yr", "29": "State Representative, 1st District", "30": "State Representative, 2nd District", "31": "State Representative, 3rd District", "32": "State Representative, 4th District", "33": "State Representative, 5th District", "34": "State Representative, 6th District", "35": "State Representative, 8th District", "36": "State Representative, 9th District", "37": "State Representative, 10th District", "38": "State Representative, 11th District", "39": "State Representative, 12th District", "40": "State Representative, 13th District", "41": "State Representative, 14th District", "42": "State Representative, 15th District", "43": "State Representative, 16th District", "44": "State Representative, 19th District", "45": "State Representative, 20th District", "46": "State Representative, 21st District", "47": "State Representative, 22nd District", "48": "State Representative, 23rd District", "49": "State Representative, 24th District", "50": "State Representative, 25th District", "51": "State Representative, 26th District", "52": "State Representative, 27th District", "53": "State Representative, 28th District", "54": "State Representative, 29th District", "55": "State Representative, 31st District", "56": "State Representative, 32nd District", "57": "State Representative, 33rd District", "58": "State Representative, 34th District", "59": "State Representative, 35th District", "60": "State Representative, 36th District", "61": "State Representative, 39th District", "62": "State Representative, 40th District", "63": "State Representative, 55th District", "64": "State Representative, 78th District", "65": "Commissioner, Water Reclamation Dist", "66": "State's Attorney, Cook County", "67": "Clerk of the Circuit Court, Cook County", "68": "Board of Review, 1st District", "69": "Supreme Court Judge (Vacancy of Freeman)", "70": "Appellate Court Judge (Vacancy of Neville, Jr.)", "71": "Appellate Court Judge (Vacancy of Simon)", "72": "Circuit Court Judge (Vacancy of Bellows)", "73": "Circuit Court Judge (Vacancy of Coghlan)", "74": "Circuit Court Judge (Vacancy of Ford)", "75": "Circuit Court Judge (Vacancy of Funderburk)", "76": "Circuit Court Judge (Vacancy of Larsen)", "77": "Circuit Court Judge (Vacancy of Mason)", "78": "Circuit Court Judge (Vacancy of McCarthy)", "79": "Circuit Court Judge (Vacancy of Murphy Gorman)", "80": "Circuit Court Judge (Vacancy of O'Brien)", "81": "Circuit Court Judge (Vacancy of Patti)", "82": "Circuit Court Judge (Vacancy of Roti)", "83": "Circuit Court Judge (Vacancy of C. Sheehan)", "84": "Circuit Court Judge (Vacancy of K. Sheehan)", "85": "Judge, 1st Subcircuit (Vacancy of Hughes Brooks)", "86": "Judge, 1st Subcircuit (Vacancy of Crawford)", "87": "Judge, 2nd Subcircuit (Additional Judgeship A)", "88": "Judge, 3rd Subcircuit (Vacancy of Filan)", "89": "Judge, 3rd Subcircuit (Vacancy of Flynn)", "90": "Judge, 3rd Subcircuit (Vacancy of Murphy)", "91": "Judge, 6th Subcircuit (Vacancy of Nega)", "92": "Judge, 6th Subcircuit (Vacancy of Pantle)", "93": "Judge, 7th Subcircuit (Vacancy of Jackson)", "94": "Judge, 8th Subcircuit (Vacancy of Fleming)", "95": "Judge, 8th Subcircuit (Vacancy of Gubin)", "96": "Judge, 9th Subcircuit (Vacancy of Axelrood)", "97": "Judge, 9th Subcircuit (Vacancy of Luckman)", "98": "Judge, 10th Subcircuit (Vacancy of Allen)", "99": "Judge, 10th Subcircuit (Vacancy of McGing)", "100": "Judge, 10th Subcircuit (Vacancy of O'Brien)", "101": "Judge, 14th Subcircuit (Vacancy of Bertucci)", "102": "Judge, 14th Subcircuit (Vacancy of Lacy)", "103": "Aurelia Marie Pucinski", "104": "Mary Katherine Rochford", "105": "Michael P. Toomin", "106": "James Patrick Flannery, Jr.", "107": "Mary Ellen Coghlan", "108": "Shelley Lynn Sutker-Dermer", "109": "Patricia Manila Martin", "110": "Kenneth J. Wadas", "111": "Gregory J. Wojkowski", "112": "Robert E. Gordon", "113": "Lewis Nixon", "114": "Margaret Ann Brennan", "115": "Janet Adams Brosnahan", "116": "Peter A. Felice", "117": "Kerry M. Kennedy", "118": "Casandra Lewis", "119": "Laura Marie Sullivan", "120": "Raul Vega", "121": "Michael B. Hyman", "122": "Joan E. Powell", "123": "Patrick J. Sherlock", "124": "Maureen Ward Kirby", "125": "Edward A. Arce", "126": "James N. O'Hara", "127": "Mauricio Araujo", "128": "Thomas J. Byrne", "129": "Ann Collins-Dole", "130": "Donna L. Cooper", "131": "Anna Helen Demacopoulos", "132": "Diana L. Kenworthy", "133": "Pamela Elizabeth Loza", "134": "Jackie Marie Portman-Brown", "135": "Dominique C. Ross", "136": "Kristyna Colleen Ryan", "137": "Debra B. Walker", "138": "Ursula Walowski", "139": "Anthony C. ''Tony'' Kyriakopoulos", "140": "Caroline Kate Moreland", "141": "Thomas J. Carroll", "142": "Cynthia Y. Cobbs", "143": "Daniel J. Kubasiak", "144": "Andrea M. Buford", "145": "Pamela McLean Meyerson", "146": "Chris Lawler", "147": "John Michael Allegretti", "148": "Kristal Rivers", "149": "Steven G. Watkins", "150": "Abbey Fishman Romanek", "151": "William B. Raines", "152": "Judith Rice", "153": "Patrick Kevin Coughlin", "154": "John Curry", "155": "Megan Elizabeth Goldish", "156": "Anjana Hansen", "157": "Robert D. Kuzas", "158": "John J. Mahoney", "159": "Maritza Martinez", "160": "Terrence J. McGuire", "161": "Bridget Anne Mitchell", "162": "James Paul Pieczonka", "163": "Diana Rosario", "164": "Patricia O'Brien Sheahan", "165": "Broadband", "166": "City Plan", "167": "Firearms", "168": "Mental Health District", "169": "Mental Health Tax", "170": "Police Panel", "171": "Alcoholic Liquor W44 P16" } } })36:[] 31:{"id":"4c59669a1780354f","slug":"how-chicago-voted-in-the-2020-general-election","title":"How Chicago Voted in the 2020 General Election","thumbnail":"844dd879b1d3abb0dd9eb1fa726ac9c1deff606c9afeb4ecc791a6eb7430cb35","access_level":"public","create_time":"$D2020-11-04T16:32:00.030Z","update_time":"$D2022-03-16T14:42:02.763Z","view_time":null,"first_public_time":"$D2020-11-04T19:55:53.505Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":"starter_2024"},"version":199,"publish_version":null,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"fa9f97d3be3cc07d","slug":"city-bureau","title":"City Bureau","owner":{"id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier"}},"type":"notebook","body":{"title":"How Chicago Voted in the 2020 General Election","cells":[{"id":0,"value":"md`# How Chicago Voted in the 2020 General Election\n\n_Data last updated: ${LAST_UPDATED.toLocaleDateString(undefined, {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n})}_\n\nThe [Chicago Board of Election Commissioners](https://chicagoelections.gov/) publishes precinct-level election results for the city of Chicago on their site. We've mapped those results (last accessed on ${LAST_UPDATED.toLocaleDateString(\n undefined,\n {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n }\n)}) for every race in the Nov. 3, 2020 election here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`Use the select boxes to select which race to display on the map. \n\n\nSee the code used to generate the data in our GitHub repo: [City-Bureau/chicago-2020-general-election](https://github.com/City-Bureau/chicago-2020-general-election)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof election = select({\n title: \"Election\",\n options: Object.entries(ELECTIONS[\"251\"].races).map(([value, label]) => ({\n value,\n label\n })),\n value: params.get(\"race\") || \"11\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"{\n let inputEl = html``;\n\n function copy() {\n const el = document.getElementById(\"share-link\");\n el.select();\n try {\n return document.execCommand(\"copy\");\n } catch (err) {\n return false;\n }\n }\n\n let buttonEl = Object.assign(html`